Heem Copy
Heem is an app for home design that specializes in augmented reality (AR) shopping. A useful tool especially for furniture, AR allows a user with a camera-equipped mobile device to see a rendering of an object in their own space. Instead of traveling to a store, or guessing what a piece online might look like, they can get a rough estimation before their eyes. The problem is that AR is not a widely understood or leveraged service, and they risk low adoption if implemented poorly. Even among younger tech-savvy users, it will be important to deliver a familiar shopping experience and a non-intimidating AR experience. For future users of this app, my design challenge was:
How might we empower users with AR in an ecommerce app?
Project Type
Mobile iOS App
Role
Researcher, UX/UI Designer
Skills
Research, Product Roadmap, UX/UI Design, User Testing
Duration
Four weeks (2020)
Research
I interviewed fellow shoppers and collected data relevant to augmented reality adoption and furniture shopping. This research allowed me to rapidly learn more about the users, the industry, and some opportunities to make an enjoyable end product.
Talking to shoppers
I conducted remote user interviews and asked participants about their furniture buying habits and experiences with augmented reality. to help discover motivations, habits, and pain points that contribute to a positive or negative furniture shopping experience.
Users need quality product photos.
Users want product reviews.
Users want the ability to save favorites and create lists.
Secondary Research
Identifying competitors’ strengths and weaknesses through competitive analysis, and overall trends and actionable data with market research.
Research is a large part of they buying process.
To convince someone to buy furniture online, extra steps need to be taken to build confidence about color, materials, and size.
Augmented reality is not widespread or fully understood, so extra care will be needed to guide a user through the process.
Define
After creating a persona based on my research, a customer journey map tracked multiple aspects of a user’s path from seeking inspiration to previewing furniture in their space to reading reviews, and presented opportunities for the role of the app in this process.
Click to enlarge
User flows helped me to plan a user’s path through the AR feature in a way that gave confidence and control.
Click to see full flow
Design
Sketches helped me get ideas out quickly, and to consider the actions a user would take on each screen, and where they could be placed. I included interaction notes to demonstrate functionality that could not be drawn.
After benchmarking some other apps, I chose a general design direction from those initial sketches. Building these allowed me to see the actual size of elements on the screen, and to make additional sizing and spacing considerations.
Click to see all wireframes
Wireframe Testing
It was important to test my wireframes with users before any final design decisions were made. Using remotely-moderated testing, I had the opportunity to see how other people used the app and find opportunities for improvement.
Tasks:
View a mid-century chair in AR and add to cart
Find reviews on a mid-century chair
Favorite the leather recliner and find it in your favorites
Results:
Users utilized the search bar more than expected. It should remain prominent and very easy to use.
“Lists” was a potentially confusing term for the Favorites section (even though it DOES contain lists), and further benchmarking or research is needed.
The AR process may need more explaining and labels for buttons. While potentially more visually obtrusive, it will give users confidence with a relatively novel feature.
Home and Shop tabs should be visually distinctive, since they serve similar purposes.
High-Fidelity Designs
After sketching, wireframing, and testing, it was time to build the high-fidelity UI design.
Testing
After the high fidelity designs were complete, it was time to test them. I created an interactive prototype using Figma, created tasks for users to complete, and received feedback with remotely-moderated sessions.
Task 1 - Look in the furniture department for an accent chair under $200 and find the reviews.
Task 2 - View the accent chair you found in augmented reality and add it to your cart.
Task 3 - Browse the recliners section and save the Winston Porter recliner. Then go view it in your saved items.
Test subjects found the app easy to navigate, and overall well-designed.
Interestingly, every person went to the “accent chair” shortcut on the homescreen, instead of searching or using the Shop tab. This was partly a coincidence of instruction for testing, but shows that links to popular items on the homesceen would prove useful.
When asked to find a chair at a certain price point, every person attempted to use the sorting/filtering option. This confirms that it should remain prominent and accessible.
Most users agreed that the AR experience was straightforward, even with the limitations of the prototype, but that a basic walkthrough or skippable tutorial would be useful to give extra confidence.
Design Revisions
Based on my user feedback from testing, I made a few design and navigation changes to the app.
Search and navigation - One common recommendation was to make the search and shopping cart fixed at the top of the device screen. In order to do this, I had to make a change to the design to include the “back” button in the grey field. I made this field shorter so that when a user scrolls less of the screen is blocked.
Before
After
AR walkthrough - Through testing, I found that most users agreed that the AR experience was straightforward, even with the limitations of the prototype, but that a basic walkthrough or skippable tutorial would be useful to give extra confidence. Have an explicit walkthrough to demonstrate how the feature works will help give users more confidence when they use the feature, and could be programmed to only appear on the first experience.
Before
After
Conclusion
Implementing a relatively new technology into a large-scale platform presented some challenges. Because the major theme of the company was their augmented reality experience, the design of the screens, and even the logo, had to echo that theme. My favorite part of this project was getting to design an experience that I would want to use myself (especially since I have purchased furniture through similar services before). Ensuring I was not designing for myself, this project reinforced the importance of testing in early (wireframe) stages, as well as benchmarking to find established patterns. While there are further improvements and refinements I would make with the proper time, I believe this would be a good way to bring a next-gen shopping experience to the public.