Length:
80 hours
Role:
UI/UX Designer
Platform
mobile app
Industry:
Furniture
Tools used
Sketch, Invision
Date
June 2019

Heem

Challenge: This project was part of my curriculum through Designlab. Heem has asked us to design an app that lets users visualize their full catalogue of furniture in their homes using AR Technology on their mobile app. Heem is a new app for interior design and they have partnerships with the top 10 furniture stores in the U.S.

Strategy: I entered into the mind of its target users to understand their current frustration with furniture shopping and designed the app in a way that helps users find furniture, while making sure it's a simple process for them to buy the item once they've found one they like.

Scope of Work

Strategy
Research
Competitive Research
AR Research
Qualitative Interviews
Research Summary
Strategy
Strategy
User Persona
User Flow
Affinity Map
Strategy
UX Design
Wireframes
Site Map
Prototype
Usability Testing
Strategy
UI Design
Visual Design
Style Guide

Background

Heem is a new app for interior design and they have partnerships with a number of top 10 furniture stores in the U.S. Partnership includes: Ashley’s Furniture, IKEA, Williams-Sonoma (Including West Elm and Pottery Barn), Berkshire Hathaway Furniture, Raymour & Flanigan, La-Z Boy Furniture Galleries, American Signature, Restoration Hardware, Crate & Barrel, and Ethan Allen.

Goal

Design a mobile app that allows users to view a catalog of furniture and place it in their home via AR.

Phase 1: Research

I performed competitive analysis to better understand the AR furniture market. I learned more about AR in mobile apps. I also performed remote qualitative interviews to understand the difficulties of buying furniture. I created the following person based on the interview findings: the budget conscious modernist.

Key takeaways from research

1) Furniture is usually bought when moving or when there is a key life change
2) There should be a clear way to see item dimensions
3) Many customers do not know the names of the style they like and would love to have some way of visually filtering the items to only see ones that match their style preference.
4) Biggest frustration was finding an item that would match the tone of the room and show the true tone of the item (unaffected by the light source).

Phase 2: Strategy

Based on my research findings, I decided to focus on the following, in addition to building a basic AR app:
1. Making it easy for users to see the dimensions of the furniture
2. Finding a solution for matching tones since that was the interviewees’ second most common frustration
3. Giving the users a way to only see furniture that matches their style preference.

I began by creating a user flow to design around the user's goal.

I really wanted to focus on giving users the option to find items that would match tones in their room and would compensate for lighting adjustments since half of those I interviewed said it was a problem. I began sketching by hand, then moved into wireframes.

For the full link to my wireframe prototype, see https://invis.io/G3S82Z2BTUQ.

Phase 3: User Interface Design

While designing the UI for the tones, I realized that there were too many complications to my original idea of picking out color from the items in the rooms. For one the colors selected do not look like the actual color of the item that our naked eye can see. I tried to adjust for the tone using a program to adjust for white lighting and that did not work either. Due to time constraints, I decided not to put any more hours into researching a solution that may or may not work. The focus would have to be creating a minimum viable product. For that reason, I decided to take out the feature to find tones that is pictured below.

Mobile Prototype

Main Task: Use the augmented reality feature to find an office chair for your desk.

Phase 4: Interaction and Implementation

After creating the MVP, I performed user testing. During user testing, we found that our older users had significant trouble navigating through the flow to find info on chairs and switch chairs. However the users in their 20s had very little problems.

Next Steps

1. Have a default optional guide on the home screen of the AR App, explaining each feature.
2. Remove inconsistencies (include the furniture brands on the category pages)
3. Create way to access AR via the shop page, so people can look at individual item details first.
4. User Testing

Lessons Learned

Onboarding is key for apps such as this one that is on the newer side. Just because there are a lot of AR furniture apps out there, does not mean that furniture buyers have experience with them and know how to use the app. It’s very important to hand hold the user through something like AR. I provided some description to the app but did not tell them where to go to add their first furniture piece. They felt confused when the AR app did not have any guide.

It's important to only test users that are in the target age range demographic. The older testers in their early 60s had a hard time exiting out of overlay screens that did not look like the typical pop-ups (left image). The designs I provided did not have the affordances they expected. They needed more clues for how to get out than hitting out of the section. I went out of my way to make sure older users could use the app since people in their 50s are in the target audience for buying furniture. However, people in their 50s are not in the target audience for using AR. In the future, I would make sure that I only interview users in my target age range for the app.

Users depend on consistency of icon placements.I tried to only have the most relevant icons on the screen and tried to move them around to make the design balanced but in the process the users were confused.

version 1 with inconsistent icon location
version 2 with consistent icon location

People have the tendency to see faces in objects. In the future, I’ll make sure to choose an icon that could not look like a face and is the most commonly thought of representation of that item.

A couple of testers thought the side table on the left looked like a robot (or penguin robot to be precise... He has since become a character, his name is Sebastian. He'll help you find what you need). But since there's no guarantee of added revenue from adding him to the app, I've redesigned the icon to an icon that most resembles adding a furniture piece (icon on right).

Conclusion

I learned the importance of starting with designing the minimum viable product and prioritizing which features to add. I learned the importance of onboarding users at the beginning, rather than just having a help section available for those who need it. I also learned the challenges of using AR with a prototyping tool like Invision, which cannot quite capture showing what placing a furniture piece would look like in front of them.