Designing Smart Lab’s Digital Brochure
UX/UI design, creating infographics, image editing, animation design…
UVU’s business resource center has a hidden marketing gem called the Smart Lab (Sales and Marketing Applied Research Test Lab). UVU is staying ahead of the curve with the addition of this remarkable, one of a kind facility, that is giving students and their clients a chance at utilizing The most updated neuromarketing technology in the United States.
The Vivint Smart Lab is the only facility of its kind in the Western United States. And it’s ready to revolutionize your company’s marketing and sales.
This amazing, one of kind, facility is growing, and has been in need of a digital presence for a long time. They do have social media accounts, but is currently in the process of building a website. My design partner and I took on the challenge of creating a digital brochure that could be distributed and viewed on any device from the apple store to google play, and more.
Scope
We started this project like many others, assessing goals, success metrics, our timeline, and assigning our individual roles and processes. The product would be built in a program called Mag+. The program allows many types of media integration (animation, video, HTML objects, audio, etc.), which allows for a lot of different ways to present content. Out clients at Smart Lab wanted to give us tons of information about the technology and services, but less about specific goals and success metrics.
Client Interview
My design partner and I visited the lab and tried out some of the equipment, we heard about case studies, and learned about various impressive clients and their success in the industry. As far as goals for our product, that was harder to extract. A few things we learned…
Smart lab wants a product that explains their technologies and services for perspective clients they meet at conferences.
The age groups of users will vary greatly, mostly early 30s+.
The brochure should include various types of media to match the technology that the lab employs in their methods.
The product will be an aid, in providing information about the lab along with the website
Site Map and Timeline
My partner and I created a very simple site map, there were some minor changes that came about down the road. But the main structure was set up. The red boxes represent the sections that were top priority. We also created a timeline and structured a naming convention for asset management. Our method of obtaining images and other content was with the Smart Lab’s shared Google Drive.
Our first meeting helped establish a list of needs and wants…. A wish list of features. Because this was a companion of sorts, to go along with their website, they wanted us to use the same assets that would be used for the creation of the site. We were instructed to work with the individual who was building the website, he would be our contact moving forward.
Sketching and Research
Finding design elements and using a style guide
To keep our designs consistent, we chose to use geometric shapes with masking as our main design theme. We created a Pinterest board to collect and share ideas as we discovered them. Our assets were placed in Box.com (box sync) for easy sharing, consistency and organization. As Smart Lab is an extension of UVU, we had to follow certain guidelines in the UVU style guide, which was provided.
Sketching
Sketching took place for the first couple weeks of the process, ideas were quickly surfacing. We had another client interview with our contact, to show sketches and ideas for approval, giving us the ability to move to digital creation.
Digital
The next step was to go digital, I started with the cover. Using some of the assets found in the shared folder from the client, I was able to do some editing and improve upon the design of the cover..
Constraints
Some of the issues that continued to surface was the lack of “quality” assets, the lack of clearly written content matched with corresponding sections, limited amount of time, and missing assets matching those found in the website. Eventually, we were given permission to find stock images for use in the brochure; in some ways, this proved helpful, it also become more work for us, and required approval of each image from our client.
Finding and Creating Content
We began to collect, edit, and add high quality images to our product. At each stage, we sent screenshots for approval. We got great feedback and felt confident moving from each stage to the next. Our first set of iterations had good positive feedback.
360 Panorama Creation
As part of our mission to help Smart Lab get noticed, I took a series of images and stitched together a high quality 360 degree interactive panorama that was added to Google maps, to serve as a benefit to their SEO efforts.
Overcoming obstacles
We continued to iterate, the struggle was obtaining quality assets needed to complete our product, as well as approval of assets we gathered. Our original iterations that were approved, were now needing revisions and we had to redo a portion of what was done. Specific images were sent to us and we were told to replace the high quality ones with the new ones. Here is an example of why that didn’t work out so well….
The Image on the far left was high quality, and looked great with the mask. It was replaced by image to the middle left. It was a small, low resolution image, that could not be made large enough to fill the space due to poor quality. The entire section had to be redesigned in order to use the wanted new image. It was placed in the image shown to the far right, kept small and placed in a way that made the low quality harder to notice.
Creating Video Animation and Infographic
Being perfectionists, my design partner and I came up with creative ways to use the assets we were requested to use. One of the ways I accomplished this was when I took a word doc, and used it to create an infographic.
The client loved it so much, he requested it for the website,
The next item created for the brochure came from simple text information provided from the SL; it was converted into an animated video. I found the image on Pexels.com, which I edited in PS, and created the animation in Hype.
The content that was created for the product did not stop there, so much more was done to make this project great. When all was done, we met all of our requirements listed in the beginning. This product was finished except for an extra section that was added 2 days before the due date. (major scope creep). To manage this situation, we added place holder images for the section.
Final Product
The final product had all of the items listed in the section of features and content, meeting all requirements. All required sections were created, with functional features; we delivered a high quality, visually stunning, usable product. Each technology had a corresponding section with scrolling and pop up elements. All video content and URL links worked flawlessly. We have all sections built into the product, The services section, was added to the project at the very end; therefore, images and text will need to be added in the future as that content is created.
The product turned our great, despite all the challenges that surfaced. We manages to create a beautiful, functional, usable, product. Some of features in the product include: popups, scrolling layers, video, animation, audio, links to social media pages, and zooming elements. Some things I learned from this project experience include:
Sometimes you win, and sometimes you learn
Have empathy for those you work with (partner, and client)
Manage expectations in the beginning and throughout the process
Remain in contact with multiple members of a client team, cc more than one individual during email exchanges if necessary
Taking calculated risks can pay off in the end
Don’t be afraid to educate a client about quality assets, ask for what you need to get the job done right
Shown below, are some examples of content added to the final product, which will be ready for publishing and distribution after all needed content is created by SL and added to the services section. All table of contents links are functioning, taking users strait to a section of their choice by tapping on the corresponding text/number. As well as technology links from home page to each technology page. Team members have linked information, also viewable by tapping on team members’ name or image. Arrows are present to guide users to scrolling elements, as well as calls to action by icon or text, guiding readers to hidden elements.
All functionality and design was created by my partner and I, it is a project that allowed us to stretch our skills in communication, technology trouble shooting, ux/ui design, photo editing, problem solving, and organization.
