An Augmented Reality app to help envision your space better.
Scope: End-to-End Mobile App
Role: UX Designer (Research, Visual Design, Interaction Design)
The Challenge: Design an augmented reality app that provides additional value to the users and their buying experience.
The Result: Within a 2 week timeline (80 hours), Heem has an established brand guideline, a consistent visual direction for the app, and a functional prototype with the augmented reality feature implemented.
Heem is a new app for interior design and they have partnered with several top furniture stores in U.S. They are looking to design an app that integrates their furniture catalog and allow users to view the products via augmented reality.
As part of the project, Heem is also looking to create a brand that is both modern and timeless, one that not only highlights the diverse brands they carry, but also keep a sense of autonomy.
Tools: Market Analysis, Competitive Analysis, Provisional Persona, 1:1 Interviews
At the beginning of the secondary research, it was important to establish an understanding of the furniture industry and its current target demographic.
The research revealed that there's a growing number of furniture stores moving online which made the shopping experience more accessible and no longer limited to just brick and mortar stores. Yet, consumers still factor in store visits as part of their buying decisions, especially because buying furniture is still a large personal expense. Consumers who buy large furniture are between the ages 25-64. They make at least $30k annually if under 35, $50k or more annually if over 35.
Many businesses take advantage of the growing market by providing added value to their consumers' experience. Augmented Reality (AR) gained traction because it not only gave consumers the opportunity to personalize their shopping experience, it also potentially increased sales.
How are consumers then shopping for furniture given this augmented reality feature as part of their shopping experience? The primary research using contextual inquiry were conducted with these kinds of questions in mind. I aimed to uncover the consumers' motivations and preferences when it came to browsing and buying furniture.
Tools: Empathy Map, Persona
With an empathy map, I categorized the interview findings into behaviors that were then used to derive insights and needs from.
Participants need additional tools to help visualize furniture in their space.
Participants need to be able to find affordable furniture.
Participants need furniture that meets their standard of quality.
Participants are limited in what they can do to visualize how furniture will look in their space.
Participants gravitate to furniture that is both budget-friendly and robust.
Participants want to be reassured of the quality of the product once purchased.
I can also use the insights gathered from our research and user interviews to form our persona, Amy. She will represent Heem's ideal target user.
Tools: Point-of-View Statements, HMW Questions, Business, User and Shared Goal Diagram, Product Roadmap, Sitemap, User Flow, Task Flow, Low-Fidelity Wireframes, Mid-Fidelity Wireframes
When identifying the kind of challenges we might face when designing this app, it was important to keep in mind our goals:
Seamless integration of 3D rendered furnitures in the AR environment.
Provide a valuable tool in the AR environment to help move along the buyer decision process.
Provide an informed shopping experience
The brainstorming process is facilitated by using the Point-of-View Statements and How Might We Questions to reframe the challenges into actionable problems based on needs and insights.
Before any design is made however, a framework was made to show the hierarchy of content on the Heem app. The sitemap shown below breaks down the app into five major screens that will exist on the nav bar.
Once the hierarchy was established, I mapped out the user flow. This will show an overview of how the persona, Amy will interact with the app given a scenario.
The task flow below showed Amy's detailed steps of finding a coffee table:
When it came to the sketches for the low-fidelity wireframes, I focused a few main screens including two screens for the augmented reality feature.
A mid-fidelity wireframe was made from the initial sketches to show a more refined iteration of the screens. These will be used during the usability testing phase as a mid-fidelity prototype.
Tools: Prototyping with InVision, Affinity Map, Moodboard, Logo Sketches, Style Tile
Prior to the usability test, I created a plan that defined the test objectives, goals, and procedures. The test was completed with 7 participants who were asked to use the app as prospective consumers looking to browse the app's furniture catalog.
SCENARIO: You just moved into a new apartment, and you are looking to buy a new coffee table for your living room. You typically like mid-century furniture so you’re looking to add furniture that complements what you already own.
You are to use the app to look for a new coffee table.
Use the augmented reality view to see how the table looks in your apartment.
Key findings from the usability test showed that most of the participants were able to complete the task, however there was a high percentage of errors when using the augmented reality feature.
INSIGHTS + RECOMMENDATION
Affinity Map was used to organize notes and observations from the usability test into themes and categories.
The Affinity Map revealed the following insights:
Participants were unclear on the steps needed to use the AR view.
Participants used more gesture based actions once in the AR view rather than using the tap action to confirm / cancel (e.g. swiping, rotating)
Participants wanted clarification on icons used in the AR view.
Participants were more focused on browsing, buying, and using the AR environment to better understand how the furniture fits in their space. They rarely accessed My Projects or My Profile.
The insights led to several design recommendations:
Have a series of onboarding screens to educate the user on how to use the AR View. Provide coach marks within the AR view to guide the user.
Include more gesture-based actions, remove redundant items (e.g. double tapping to confirm instead of tapping on the “check” icon)
Add labels to icons, or replace them.
Clarify purpose of “my project”. Remove the social aspect of the profile (remove photo grid), only provide account or setting information.
For the visual direction, I created a moodboard based on keywords that describe the brand.
Several sketches were done for the logo with 3 concepts in mind, all of which have ties to furniture and the letter "H" for Home and Heem.
The final chosen logo was a combination of the letter H with the floor maps.
To show the visual direction for Heem, I created a style tile to show how type, color and imagery will be used in the app.
Tools: High-Fidelity Wireframes, Update Prototype, UI Kit
The high-fidelity wireframes and the prototype were updated based on the design recommendations. A few screens were added as part of the on-boarding process, particularly at the log-in screen and within the AR View.
I used existing elements the high-fidelity wireframes were used create the UI KIT to maintain a consistent application of visual design in the app.
Usability tests with the updated prototype
Implement design recommendations based on insights gained from the usability test.
Make use of a reliable prototyping tool. Part of the challenge during this project was settling on a prototyping app that has some interaction design animations available, but also a robust mobile integration that would allow me to show the prototype on a device as well as being able to access it offline. During the course of prototyping Heem, I sampled using proto.io, invision and figma.
Create interaction design examples for the AR View
Redline deliverable for developer handoff.