<

Heem Furniture Shopping

Personal Project

Heem Furniture Shopping

AR shopping experience

  • Background
                • The Basics
                              • Challenges
                                            • Discover
                                                          • Define
                                                                        • Design
                                                                                      • Test
                                                                                                    • Next Step

                                                                                                                  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?

                                                                                                                  1. What can AR offer to solve users' current problem?
                                                                                                                  2. How do current AR interior-design apps work and what they could improve?
                                                                                                                  3. 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.

                                                                                                                    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

                                                                                                                    Challenge #2 -- Define a new brand

                                                                                                                    Heem is a new brand without any given branding. Therefore I had the chance to define this brand based on my target persona.

                                                                                                                    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

                                                                                                                    V1

                                                                                                                    V2 update

                                                                                                                    V3 update

                                                                                                                    V1

                                                                                                                    V2 update

                                                                                                                    V3 update

                                                                                                                    Shopping experience

                                                                                                                    V1

                                                                                                                    V3 update

                                                                                                                    V1

                                                                                                                    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:

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

                                                                                                                    Solutions for above problems used for V3 updates are:

                                                                                                                    1. Simplify sentences, and use friendly tone
                                                                                                                    2. Mainly use non-action-driven modal window to show steps
                                                                                                                    3. Use GIF to show hand gestures instead of still icon
                                                                                                                    4. 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