Contact
Andy Meyers design logo

Heem is a furniture app that lets users browse for products and design their space in AR.

UX, UI, Augmented Reality

heem screen mockups
Heem believes in bringing an innovative shopping experience to users. They have partnered with a number of stores so customers can browse and order anything online through the app. The app will also allow users to see what the product looks like in their home. With the help of AR, Heem is looking to simplify purchasing decisions and engage users with an additional “fun factor”.

Project Overview

Over the course of 4 weeks, I applied a human-centered design process to decide how the Heem app could bring real value to users.

Design Process

UX design process

Discovery & Research

Defining the Objectives
  • What types of problems or frustrations do people face when shopping for furniture?
  • How could the process of buying furniture be easier and more enjoyable?
  • What types of needs, wants, or frustrations can be addressed with AR?
Different Approaches to AR
A competitive analysis of other AR apps was an important step in the design process. While there are a number of AR furniture apps on the market, I found that many take different approaches. Some apps focus primarily on the ecommerce flow and others focus more on the AR experience. Despite some of the glitches associated with AR, opportunities exist to create better UI and improve the overall AR experience.
AR furniture apps competitive analysis

User Interviews

Understanding the User’s Decision Process
I sat down with 4 participants to discuss some of my objectives for research and how an app like Heem could bring value to their lives. I also asked participants to place an object in the room using the popular AR app, Ikea Place. This quick usability test provided great feedback for areas of improvement.

Key Interview Findings

number 1 icon
People like to shop in-store for staple furniture items.
Viewing staple items in-store to see how it looks and feels is still the most effective way for people to confirm interest in the product.
number 2 icon
Finding the correct dimensions is a pain-point.
Knowing the dimensions of a space and whether or not an item will fit is a frustration among users.

Key Interview Findings

number 4 icon
People like to shop in-store for staple furniture items.
Users are frustrated by not having their saved items in one centralized location. Many of the participants said they would send screenshots of their saved items to friends and family to help them decide.
number 3 icon
Feeling overwhelmed with AR.
Users have felt overwhelmed and frustrated using AR in the past, mainly due to poorly designed interfaces and lack of clear instructions.

Defining the User

With the insights I gathered during interviews, I had a better understanding of the user’s decision-making process. I could take a deeper look at the needs, wants, and pain-points of the user and what their environment might look like. Keeping these things in mind helped me to further empathize with the user and make appropriate design decisions.
thrifty decorator user personaempathy map

Defining the Design Challenges

number 1 icon
Give users an enjoyable AR experience while providing direct access to furniture brands and retailers.
number 2 icon
Create a fun, enjoyable experience that streamlines the decision making process and drives product interest.

Early Ideation

Making Fast Iterations
Starting in my sketchbook allowed me to experiment with ideas and make quick changes. Applying my key research findings, I explored various ideas for the app. Once I came up with an idea that I liked, I turned my sketches into low-fidelity wireframes.
ideation s

Wireframing

An Easy Way Find Items In-store
The ability to view large furniture items in-store is an important option to shoppers. Keeping this in mind, I wanted to design an easy way users could find the closest in-store location that carries the item. The goal of this feature is to drive interest in the product and make the shopping experience more streamlined for the user.
find item in store task flow
Scan, Browse, and Place
My goal was to design an AR flow that would be friendly for both new and experienced users. On the app’s homescreen, users can click the top CTA and immediately scan their room in AR. Returning users will have the option to select their saved wishlist items to place in the room.
drop image in room task flow

User Flow

heem user flow

UI Design

Deciding on a Visual Language
Heem believes in bringing an innovative shopping experience to users. Their younger target audience appreciates the value of technology and the convenience it brings to their lives. I wanted the logo and styles to reflect the idea of innovation and technology without losing the playful “fun factor” that an AR furniture app brings
heem ui kit
high fidelity screen mockups
Solution 1

Store Locator

Being able to see staple furniture items in-person is important to people. Without leaving AR mode, users can quickly view store information for locations closest to them.
find a store mockup
Solution 2

Save and Share Ideas

Users can take a picture of the AR scene and save it to a centralized location on the app. Once the photo is taken, users have the option to share it.
save and share idea mockup
Solution 3

Easy Onboarding Process

First time users might feel overwhelmed while using AR. To avoid this, simple and clear instructions are given to the user. A help button is present in case the user still gets stuck after the onboarding process.
onboarding process mockup
Solution 4

View Product Dimensions

To see if the item will fit, users can quickly check the item’s dimensions while placing an object in AR.
check dimensions screen mockup

Prototyping

Prototyping in AR with Torch App
The Torch app was a great way to quickly test ideas in an AR environment. Various UI components were exported into Torch to create a realistic user interface. The Torch prototype was embedded into Invision so users could go through the entire app during testing.
torch prototype

Usability Testing

Validating Design Decisions
Four participants were gathered for an in-person usability test. All of the participants had prior online shopping experience. Three participants had experience with AR apps and one participant had no experience.
Goals for Testing
  • Observe user’s behaviour as they navigate through the app.
  • See how easily the participant can complete the tasks given to them.
  • Identify any pain points or concerns the user has while using the app.

Testing Tasks

number 1 icon
Sign in to the app and browse for lighting. Look for a desk lamp and place the object in the room. Once it is placed, take a photo and save it to ‘My Ideas’.
number 2 icon
Find the closest in-store location the item is sold without leaving AR mode.

UI Revisions

I organized my findings from the usability test to see where my design choices succeeded or fell short. Based on the results, I made revisions to my design.
affinity map
Revision 1

Shopping Cart Icon in AR Mode

Users were expecting to see a shopping cart icon in AR. The updated design gives users the option to checkout and purchase the item without having to reverse their steps out of AR mode.
AR visual guides revision
Revision 2

Product Ratings

Participants in the usability test stated that the combination of good reviews and seeing the item in AR work together to give them confidence to purchase. In the revised version, I made the item’s rating visible in the product detail screen.
product ratings revision
Revision 3

Visual Guides

The first time AR user still felt slightly overwhelmed after the onboarding process. To make things easier, I added small visual clues underneath the object showing that it can be repositioned. I also made the item’s placement shadow stand out more without affecting the user’s environment.
add to cart icon revision

Project Take-Aways

Thinking About the User’s Environment
I discovered that designing for AR brings many unique UX challenges. It required me to think in different ways of how people would be engaging with the app. I also had to consider the type of environment the user is in, which impacted the placement of UI. Being able to prototype in AR was very helpful in this regard. Despite some of the app’s limitations, testing in a realistic AR environment provided great feedback.
Azure RBAC
Scroll to Top
Finance Tracker
Andy Meyers design logo
hello@andymeyersdesign.comLinkedInResumé
Next Project