HEEM is an AR interior design app that helps users to choose ideal furniture that matches their styles, view furniture in AR, and gives decoration suggestions.

 

1. research

0. Background

Heem already has partnerships with the top 10 furniture stores in the U.S. As a business, Heem will focus on providing the app to customers, with links to each item online. They will also have people from the team who are dedicated to keeping the catalogs, links, and product information up-to-date. 

Besides being able to browse through the catalog and order anything online through their app, users can also see their desired furniture where it would be placed in their home via augmented reality on their smartphones.

Challenge

- Hard to find the users who use shop furniture online for an interview

- Hard to conduct usability testing with a limited functional prototype

Research Goals

  1. To understand the current AR market on the interior industry.

  2. To identify the platform and system to design.  

  3. Empathy users need and pains to determine the potential features.

  4. Understand users behaviors, interactions, and preferences while shopping furniture online and offline.

Research Assumptions

  1. Users are having difficulties to visualize the product while shopping for furniture.

  2. Users have budget concerns while shopping for furniture.

  3. Users have concerns about shopping furniture online.

  4. Users have a specific style of furniture in mind before shopping.

Secondary Research

According to my research assumptions and questions in the research plan, I researched user demographics and statistics for furniture shopping, interior design, AR market, and devices. This secondary research helps me with narrowing down my target users and come up with some interview questions.

Empathy Research

5 participants were recruited from 2 locations: IKEA (return section) and Restoration Hardware. 4 IKEA customers and 1 Restoration Hardware customer shared their experience, feelings, and concerns regarding furniture shopping. They are 5 females aged from 20 – 42 who had experience on shopping furniture.

I created an empathy map to synthesis my research findings. I divided each participant's response by "do" "think/feel" "say" and "hear". And then I summarized these responses by common patterns to study insights and needs. I used the interior layout as my empathy map's graphic. 

Insights

  1. The offline shopping experience is significant because furniture is not only about appearance. Some customers will research online before shopping at the stores.

  2. ​Customers need the new furniture to be compatible with their current living environment or match their ideal interior design style.

  3. Customers, especially whose living spaces are limited, concern about furniture arrangement before shopping.

Needs

  1. A tool for assistance furniture researching and offline shopping experience.

  2. An approach to search for new furniture that fit existing or ideal interior style.

  3. An approach to get potential furniture arrangement proposals to help to choose furniture.

Persona

I created a persona according to my empathy map. I gave Jessica basic info, background story, goals, frustrations, needs, personalities, motivations, and affiliations. It helps me to sympathy my users, and develop later user flow and task.

 

2. IDEATE

How Might We

Brainstorm

I started brainstorming for the HMW questions. I came up with as many solutions as possible for each HMW question. It helps me to consider for potential features.

Bussiness & User Goals

This is a diagram indicating HEEM business goal and user goals, and what's in common. I referred back to my empathy map for user goals, and HMW for my business goals. It gives me a direction on next step project roadmap

Roadmap

It's a project roadmap with potential features for HEEM according to my previous business and user goals. After finding the common goals of business and users goals, I prioritized the common goals and listed out the potential features referring to my HMW brainstorming.

 

3. DEFINE

Sitemap

User Flow & Task Flow

Low-Fidelity Wireframes

I created a set of low fidelity wireframes according to my previous user task and UI requirement. I was trying to use 3D or isometric elements for my UI design.

Mid-Fidelity Wireframes

After finishing my low-fidelity wireframes, I found some places to improve. And then I created mid-fidelity wireframes with some improvements. I designed 46 screens for my mid-fidelity wireframes.

 

4. TEST

In order to gather the opinions and observe the user’s behavior on interacting with HEEM, I plan to conduct a usability testing with my mid-fidelity prototype. I am aiming for 80% error-free rate because I am not sure whether users are able to interact with the 3D UI and I am assuming users are not familiar with unfamiliar furniture processes.

Usability Testing Plan

Test Goals

 

  1. To make sure the interactions are comprehensive to complete the furniture shopping.

  2. Test if users can easily input needs and design requirements by following each step.

  3. Test if users can interact correctly with 3D interactions.

  4. Test if users can change features in AR.

  5. To find out pain point and confusion or hesitation that need improvement

Observe the user’s behavior on interacting with HEEM. Gather the opinions and analyze them. Summarize the information for next step iteration.

Test Completion Rate 

 

Aiming for 100% 

Users would complete all the tasks and errands in my plan.

 

Error-free Rate 

 

Aiming for 80%

I am not sure whether users are able to interact with the 3D UI. I am assuming users are not familiar with unfamiliar furniture processes.

Affinity Map

During my usability testing, I observed my four participants' behaviors and patterns and wrote down both successes and pain points. And then I synthesize my findings and their recommendations. It helps me to figure out next steps. My error-free rate was 85%.

To Be Iterated

 

  1. Change the “select styles” screen to simplify the interaction

  2. Add descriptions to icons that caused confusion, like “circle” and “>”.

  3. Simplify the processes and features.

  4. Clean up icon set in the full description page.

 

5. Design

Logo

I wanted to create a logo that reflects "reality" and "3D". After getting inspiration from Dribbble and Pinterest, I started to sketch some logos on my notebook. At first, I was trying to put HEEM into a cube, but I found out it was tough to make it simple and readable. Later, I was distracted by an "interior layout" idea. I went back and forth between my original idea and later ideas. Finally, I decided to use letter "H" only and simplified the cube to get my final logo design.

Style Tile

High-Fidelity Design

After creating my style tile, I started to develop my high-fidelity design. I designed 62 screens including 21 AR views. To make my design work more realistic, I used 3Ds Max to render a room and exported a 360º rendering image.

Onboarding Pages

Main Screens

Original Room

Using HEEM

NEXT STEPS

I am currently working on the offline feature, which gives users an offline shopping experience assist with better decision making. I am also designing screens for Android devices.

 

      Tools   Sketch, Invision, Photoshop, 3Ds Max, Illustrator

      Team   Alan Hurt (Product manager)

                  Heyi Wang (Designer)

Duration   80 Hours