Heem AR Mobile App

Client:
Role:
Duration:

Student Project
Product Designer
Six weeks (part-time)

Background

This project was an assignment for Designlab’s UX Academy. The brief was to design a mobile application that used augmented reality (AR) to help millennial consumers with furniture purchasing.

Clickable Prototype

The clickable prototype I tested appears to the left. It's designed to test the following tasks, so not every affordance is clickable:

  • Find an item from a recent collection
  • Add the item to the AR view
  • Add another item to the AR view
  • Save both items as a set
  • Return to the app and purchase an item you previously saved

Process

Research

Get up to speed on the product landscape and understand potential users.

Define

Based on insights in research data, get clear on the problems to solve and who to solve for.

Prototype

Quickly build a prototype to test whether users can accomplish core tasks. Visual design fidelity relates to project needs.

Test

Test prototype with users representing target demographic. Come up with insights from this data to spotlight usability issues and reframe design questions.

Research

The research phase included both secondary and primary research. Secondary included a quick survey of the home furnishing purchase space and a more focused competitor and adjacent analysis. I also conducted user interviews to get a closer look at how users were actually buying furniture.

Market Research

Digitally transformed

Home furnishings are big business, and one in which a digital transformation has already happened. Bigger brands increasingly deliver omnichannel experiences and consumers are comfortable shopping online.

$55.3 Billion

The value of the US home furniture market in 2019.

76%

More than three quarters of revenue comes from online sales

Competitor and Adjacent Analysis

Nascent social and experiential dimensions

Several apps already exist to allow consumers to visualize furniture in AR. Ikea's Place app was successful, but hasn't translated into widespread adoption of AR. Other than Houzz, few examples of AR visualization from multiple manufacturers exist.

Although home decor maintains a solid presence on social media, few of the larger manufacturers have meaningful connections from their sites. DecorMatters gives users the opportunity to be their own decorators, but with 2d tools and not AR.

User Interviews

Interviews yielded rich qualitative data about both what participants said and what they did across complex purchase journeys. Notably, participants were generally renting apartments and weighing purchase decisions in terms of future housing plans. Some displayed more interest in interior design, while others saw furniture as a practical necessity with the potential to improve their home life. All commented on the dizzying array of furniture buying choices.

6 participants

I interviewed six participants from the millennial demographic.

30 min

Average interview length

Define

I used affinity mapping to find insights in the interview data I gathered. Two general patterns of purchasing behavior, motivations, frustrations and needs emerged, corresponding with the personas shown below.

Insights

A new dimension for the style feed

Enthusiast customers are using social media and other digital  resources to keep up with design trends outside of more focused furniture searches. They also discussed the value of seeing furniture in the context of decorated rooms instead of just on its own in developing a sense of style.

This led to the collections feature, which puts human-curated sets of furniture at the center of the app, headed by photo-real renderings of the furniture together in a space. (release schedule)

Measure twice, match once

All particiapnts used measurement and other visualization techniques like drawing or taping to judge fit. It was most pronounced when shopping for multiple furniture items. More engaged users also highlighted that fit was also about the relationship of scale of the furniture to the room, indicating the creative dimension of fit. Overhangs, overlaps, and pinched spaces were also hard to judge without 3d represntations.

These observations suggested that features to support easy visualization of multiple items in AR was important.

Cutting through the noise

All users lamented the overwhelming amount of choices in buying furniture online. A curated approach to an overall catalog was clearly welcome, even if different personas might browse it different ways.

Buying it later

Users infrequently bought furniture on first sight (or sit). Once a specific need was identifed, most would buy within a month or two, sometimes less time. However, many were also putting off dream purchases because of constant mobility due to work or family. The most enthusiastic about interior design would bookmark items for years later.

This underlined that bookmarking would be important, and need to include multiple items.

Personas

User Journey

Different motivations, similar journeys

A user like Emma seemed both underserved by current products, and the most likely to engage. Thus, she was the primary persona. However, I realized that both could be served with relatively similar features.

Users matching the Emma persona would likely use the collections to do a broader search for new items, while more casual shoppers would likely search items like “couch”.

Design Questions

How might we help Emma keep up with trends and determine whether items of interest both fit and match?

How might we help Ken quickly find several matching items that fit in his space and budget?

Prototype

Based on these user journeys, I created a mid-fidelity clickable prototype to test with users who matched the target demographic.

New UI Patterns

A publication, not a warehouse

Patterns borrowed from curated shopping apps helped users get to Heem’s collections more quickly.

I chose a final design that mixed the efficiency of carousels on mobile with the impact of large imges showcasing the collections.

A search bar and category-based browsing allowed users like Ken to do targeted and utilitarian browsing based on room or item type.

New patterns for multiple object selection

Initially, I explored tabs as a way to present options for selecting furniture to add to the scene. I opted instead to adapt the image carousel found in popular consumer AR-enabled apps like Instagram and Snapchat and add tabs above instead of buttons.

Some UI references for the carousel design

AR without motion

Rapidly prototyping interfaces with traditional and AR elements is challenging. Fortunately, key user actions did not involve moving objects in 3d space. I also designed the UI to be as clear as possible without animation cues. I designed and created a clickable prototype in Figma.

High-Fidelity Wireframes

Test

I tested the mid-fidelity prototype with five participants in the user demographic using remote, moderated testing. Users were able to complete most tasks, but sometimes struggled in illuminating ways.

Insights and Changes

Deciphering new icons

Users depended heavily on the copy to decipher unfamiliar icons. Labeling the “AR” icon in the bottom nav did wonders in allowing users to understand the view in AR icon. All users understood the purpose of this icon because of the bottom nav label.

Adding multiple items in AR

In order to make viewing multiple items in AR as seamless as possible, I created this feature to allow users to add items without leaving the AR view. Users displayed some confusion around the meaning of “similar”, although they were all able to intuit that it would add some kind of item. Based on feedback, I changed the type to the more general but accurate “add item”. Users did not seem to need to know that this add button would present collections and matching items first in order to use it.

Saving multiple items

Users displayed a little confusion around the meaning of sets and collections, and also that sets would be accessible under favorites. However, this only prevented one user from finding them.  When looking for one item that they had previously saved to a set, most users assumed that items saved to a set would also appear in favorites.

To make this more intuitive, I changed the name of the favorites on the bottom nav to “Saved Items”.

Next Steps

Targeted AR prototype

The testing helped scope the parts of the application that would benefit from AR prototyping. Testing with 2d wireframes as I did seems more helpful in looking at icon design and user mental models but likely does not report the actual usability of these interfaces as well as a more functional prototype. AR interfaces feature rich, dynamic feedback that allow users more room for trial and error. They also allow better communication of system states and affordances through animation.

Designing the service

Participants needed explanation for the collections idea. Future testing would usefully include ways to communicate this quickly, like an explainer website or newsletter. Another approach would be to include the information as a series of onboarding screens. Either way, considering the user journey before the app opens would be important.