Designing Smart Lab’s Digital Brochure

Kristi Gordon
9 min readMay 13, 2017

--

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.

Site Map and Timeline
Short list of features and content

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.

UVU style guide and Pinterest board
Assets kept organized in our labeled folders

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.

Rough first draft sketches

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..

Left side is before, right side is after editing

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.

First iterations

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.

360 Panorama creation and google maps

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….

Image to far left is high quality, new image did not fit space (middle left)

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.

Left, word doc, right, infographic created for brochure

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.

Animation created for Smart Lab

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.

--

--

Kristi Gordon
Kristi Gordon

No responses yet