Project

Heem Furniture is an app that helps users visualize new furniture in their current space. It removes the pain of not knowing if your new furniture’s color and style match with your existing room.

My role was to research, design, and test all UIs related to the project. I collaborated with my mentor Deborah Dennis, presented my work to student group critique sessions and consulted my design decisions and process with my peer advisor Robbin Arcega.

Challenge

My challenge was to help users visualize how the new furniture would fit into their current space using AR on their mobile devices.

Solution

I was tasked as a designer to tackle this problem. Through this case study I will show you how I solved this problem by using AR feature to enable users visualize new furniture in their existing space.

Competitor Analysis

I conducted competitor research with IKEA and Wayfair in order to understand what is available in the current market. I chose these two companies because they are the only companies with AR feature in their mobile apps. This analysis also helps me gain a fundamental understanding of what AR can achieve.

Here are some problems I have encountered when I was using IKEA and Wayfair's apps:

• IKEA Place app asked me to scan the floor before placing the furniture, but does scanning the floor allow the app to measure the space in my room too?
• The furniture inside the AR seems to be rendered and are not real pictures of the furniture. It was hard for me to visualize how it would really look like in my room even with the AR feature.

User Interview

I conducted user interviews with five people who have purchased furniture before in order to empathize and gain a deeper understanding of my users. I asked them open-ended questions about their furniture purchase experience. 

I saw a pattern from their answers – customers were most frustrated when they had to return items because the furniture didn’t match their current style or the color wasn’t what they expected. Below are more findings from my interviews.

Key Findings

• Most customers tend to use a mix both online and in-store methods when they try to purchase furniture.

• Half the interviewees measured their space prior to purchasing new furniture.

• All interviewees mentioned it was hard to visualize new furniture in their existing space.

Empathy Map

I created an empathy map in order to further analyze and create a bigger picture of my users. Here are some insights:

• Users tend to start their furniture shopping by browsing online.
• Users think online purchase is easier because of delivery.
• However, it's frustrating for users when the delivery doesn't match what they saw online.

Persona

I drafted a persona based on my empathy map’s insights in order to stay focus on who are my users. I envisioned Abby who is a new home owner and looking to fill her home with new furniture. 

Point of View & How Might We

Moving forward, I want to design a solution that can solve these problems. I wrote down point of view and how might we statements in order to brainstorm ideas of what features to design for my users. 

Product Road Map

I listed out a product road map in order to see which features are prioritized and would be included in my MVP.

User Flow & Site Map

I created a user flow in order to focus on what I want my users to accomplish in my MVP. 

For my user flow, the main goals of the users are:

• Choose and place a couch in the 360° photo they took.
• Change the color of the couch.
• Add another coffee table in the 360° photo.

I then constructed a site map in order to see how my product is structured. 

Mid-Fidelity Wireframes

I designed mid-fidelity wireframes from my sketches in order to see how my features and user flow would work together. 

Branding & UI Kit

This project requires me to create a brand identity for Heem. I designed the branding in order for Heem to have a clear and consistent identity.

To start, I wrote down a few words that I envisioned this brand to be: modern, stylish, trendy, elegant, and helpful. After creating a mood board and discussing my ideas with my mentor, I landed on the following logo and color palette. I wanted the logo to convey that the app includes AR feature, which is why I made it into a cube. I chose this vibrant shade of purple to show that this brand is trendy and elegant.

High-Fidelity Wireframes

I created high-fidelity wireframes and prototype in order to for users to easily visualize the MVP during usability testing.

Usability Testing

After building my high-fidelity prototype with Sketch and InVision from my initial mid-fidelity wireframes and brand identity, it was time to test my idea with users. I conducted usability testing in order to see how users would interact and react to this mobile app.

I chose to conduct my usability test with high-fidelity to help participants visualize the AR feature. I conducted usability testing with 6 people who match my persona using Google Hangout and screen sharing.

Affinity Map

I analyzed the usability testing result using an affinity map in order to gain insights on users’ response. I have also discussed and presented my findings during group critique sessions to seek more feedback from my peers.

Key Findings

THE POSITIVES

• All six users said they would use the app again and recommend to friends.

• All six users were able to retrieve previously saved layout and add second furniture into the layout.

THE ISSUES

• Users had a hard time understanding how to measure the room.
• Two users mentioned saving layout was confusing since they have just favorited the couch. 

The solutions

Going into final UI design, I made sure to tackle the two main issues users had during the testing.

• I removed the initial video tutorial that taught users how to measure the space, and added in step by step instruction as users are measuring the room.
• Secondly, I changed the saving method to automatic save, so users wouldn't need to worry about saving layout after they finished decorating.

Final UI Design

I iterated on final UI designs in order to cater to my users’ needs and goals.

How can we measure success?

We can measure success in the following ways:

• Amount of account and layout created
• Number of furniture add to cart via the mobile app
• Amount of purchase made using the mobile app

Learnings Recap

This capstone was challenging in many aspects. First of all, AR is a new topic for me. I had to do additional market research to understand what is AR capable of and its future potential. Secondly, it was hard conveying AR features on wireframes and high-fidelity prototype that are not fully developed. I had to give additional guidance to my users during usability testing and asked them to use imagination to help visualize this as a 100% functional app. I was able to overcome these challenges by asking guidance from my mentor and discuss my concerns during group critique sessions with other design students from Designlab. 

The next step of this project is to continue iterating, testing, and potentially add more features such as turning it into a VR project.