Heem Furniture Shopping

Personal Project

What is Heem?

Heem is an interior design app where shopping furniture becomes easier with embedded AR experience.

Augmented Reality (AR) has become a hot topic, and the application of such relative new feature has grown fast thanks to the development of technology. Heem aims to offer a big catalog of furnitures from the top 10 furniture stores in the U.S., and by allowing customers to place products in their room through AR, offering a new shopping experience beyond passive browsing.

A high-fidelity prototype was designed and tested as the final product of this project.

The Basics

Client

Heem

Time

03/2019 - 04/2019

My role

UX Researcher, UX Designer

Tool

Sketch, Marvel app

Mentor

Courtney Leonard

High-fidelity Prototype

https://marvelapp.com/b88476h

Challenge #1 -- AR app experience

Although AR has become more common, many people still don't have lots of experience using AR, or even realize they've used it before. Therefore, how to onboard them so they will feel interested and confident in interacting with such feature would be the question of interest.

How to embed AR experience into furniture shopping is another question to think about.

Research

What did I want to know?

What can AR offer to solve users' current problem?
How do current AR interior-design apps work and what they could improve?
What are consumers’ pains and needs when purchasing furnitures?

1. Secondary research

I mainly referred to Google’s Augmented Reality Design Guidelines.

To search for articles and reports about current AR app’s market and user background, technology needs, design restrictions and trends.

To learn about current market and design trend in online furniture shopping apps.

2. Competitive analysis

Houzz, Wayfair, IKEA place, Overstock and Holo were analyzed.

To analyze functions of other marker-less type AR app in the market, especially apps for interior-design purpose.

To analyze the information architecture of some popular furniture shopping apps.

Some key takeaways

AR: plan for the users’ movement
Help users realize they could move around, and offer options to move the object when users cannot move themselves.

AR: onboard by initializing smoothly‍

Use onboard guidance and assistance
Include a “see in AR” icon if switch from 2D to AR

AR: design natural object interaction‍

Use familiar gesture to adjust size, direction
Give feedback on placement, collision

AR: UI design‍

Use high contrast color with the background
Use familiar design patterns — button look like buttons

Customer expect personalization‍

Remember customers and their shopping preference
Help to narrow down options with assessments

Online shopping is informativeGive information needed without speaking to a sale associate.

📝 See detailed report on Research findings 1, Research findings 2

Define

Persona

Gary is a tech-savvy who values innovations and reliable information online.

Storyboard

I wanted to see how Gary will interact with both App and his environment when using AR function.

Sitemap

This shows the information architecture of Heem app.

Task flow

Design

Moodboard

Beyond being a shopping platform, I wanted to define Heem brand as a lifestyle and an attitude.

Unique
Attitude
Live little things
Nothing is ordinary
It's easy to make a difference

UI style guide

Search function

Create a new account

Shopping cart

Product info

AR

↑

Test

Usability testing was conducted with hi-fi prototype made from InVision. I conducted one-on-one in-person usability testing with 5 participants in total for test 1. 3 participants in total for test 2. AR onboarding was updated after 3 participants were tested in test 1.

All participants had experience with AR app and online furniture shopping. However, most participants had limited experience with AR.

AR experience

V2 update

V3 update

V2 update

V3 update

Shopping experience

V3 update

Testing takeaways

I did secondary research on how to design better user onboarding experience. To summarize, problems found above from testing 1 were:

Too much text, and the tone was robotic
Not clear on product tour goal: combined action-driven with non-action-driven, which caused confusion in users
Onboarding was not visually appealing
Too many steps while users couldn’t wait to start using the feature

Solutions for above problems used for V3 updates are:

Simplify sentences, and use friendly tone
Mainly use non-action-driven modal window to show steps
Use GIF to show hand gestures instead of still icon
While steps were not reduced for V3, progressive bar shows how many steps in total, and gives users a sense of making a progress by swapping to next screen