Interaction/UX design: Erica Liu
Visual design: Bea Catapang
Developer: Jakie Rice

Our Problem

The accessories business team had a KPI to increase sales of smart home tech. They reached out to our team to build an interactive and engaging experience that would be both an SEO page and a marketing page to help drive up online sales.

Our Solution

After participating in a design sprint, during which we created many different concepts, we decided to do a “day-in-the-life-of” type marketing page, which would show the smart home devices being put to work in practical situations every time of the day. We found through market research that the typical customer doesn’t feel the necessity of owning smart home technology. As a result of this finding, we tried our best to create a page that depicted how smart home items could be used in your daily life, not only out of convenience but safety and security.

Tools we used: Sketch, InVision, Principle

Process

See the process deck for a comprehensive view of what went into this project.

1. Competitive analysis was conducted to scope out any industry trends. We noticed not many people have pages like this one so we found a fresh opportunity to create something neat.

2. User flow diagramming was helpful to map out the end-to-end flow, including entry points and all other touch points.

3. Conceptualizing what type of story we wanted to tell with this page was critical. We brainstormed several different concepts and sketched several paper prototypes in order to see which concepts worked best.

4. Wireframing low fidelity prototypes helped us build out our page and tell our story.

5. Usability testing was conducted to ensure the page was user friendly and intuitive. We were concerned the patterns were not familiar, but we validated that our designs indeed matched the user mental models. We iterated the design based gaps we found in the experience. See the results summary.

6. Prototyping the microinteractions in Principle, from header functionality to plus sign interactions, were critical for developer hand off.

7. Visual design came last, taking the low fidelity wireframes and creating high fidelity comps.

8. Development was provided InVision prototypes and principle files in order to bring the designs to life.

9. QA was an essential part of this process, ensuring CSS styles were aligned, and helping to dictate the CSS animations of the different aspects of the design.