Heem

Building a Mobile App with an AR Feature

Challenge

My challenge was to design a new app for interior design for Heem, which scans all the catalog items featured by the top 10 furniture stores in the U.S. Users should be able to select any type of furniture and see it in augmented reality.

Solution

Design a catalog system that allows customers to browse and order anything online through their app.
Create an augmented reality feature that allows users to see their desired furniture where it would be placed in their homes on their smartphones or tablets.

Client: Heem (Speculative)

Duration: 80 hours

Role: UX/UI Designer

Research
Information Architecture
Interaction Design
Visual Design

Tools:

Sketch
Invision
Adobe Illustrator

This is a speculative project, and Heem is a fictional company.

01 Research

Research Goals

Identify Heem’s target demographic
Determine how people shop for furniture in-person
Determine how people shop for furniture online
Identify users’ goals, needs, motivations, and frustrations revolving around shopping for furniture
Learn about how AR is currently being used

View Research Plan

Market Research

First, I conducted market research to gain a better understanding of the problem space. I learned about the furniture industry’s trends, the demographics of furniture shoppers, and the current role of augmented and virtual reality in the market.

View Market Research

Taking a Peek at Our Competitors

To observe how other players are approaching a similar problem, I identified the strengths and weaknesses of Heem’s direct and indirect competitors. This allowed me to evaluate the role Heem would play in the market.

Provisional Personas

In order to frame my mindset to design for the user, I created provisional personas based on market research. They would be validated or invalidated with findings from my user interviews.

1:1 User Interviews

During my 1:1 user interviews, I asked participants open-ended questions about their furniture shopping experiences in-person and online to tap into their goals, needs, motivations, and frustrations about furniture shopping.

Participants

6 participants
3 males, 3 females
Ages 24-27

Empathy Map

I created an empathy map to synthesize my findings. This was an efficient way to observe patterns among my findings, pull insights, and identify user needs.

Insights

People often have an idea of what they are looking for when they shop for furniture.

People are concerned about finding furniture in the right size.

People are concerned about price when they shop for furniture.

People are concerned about their online purchases matching their expectations in-person.

Needs

People need to be able to find what they are looking for when they shop for furniture.

People need to be able to find sufficient information about size when they shop for furniture.

People need to be able to find furniture in their price range.

People need to be able to trust that products are being portrayed accurately.

Persona

In order to define a target audience and design for real user needs, I created a user persona based on my research findings. Steven constantly reminded me who I was designing for.

02 Define

POV Statements and HMW Questions

I developed POV statements to frame the problem from the user’s perspective and asked HMW questions in order to spark ideation sessions that approached the correct challenges.

03 Ideate

Brainstorming

With the problems defined, it was time for me to focus on generating as many solutions as I could to each HMW question without evaluating how they would be executed. I set a 3-minute timer for each HMW question and did this for 2 rounds.

Business and User Goals

To begin strategizing, I created a Venn diagram of business and user goals to observe the shared goals among them. It was important to remind myself to advocate for the user by providing the best user experience possible while also adding value to Heem’s business.

Product Roadmap

With all these ideas generated, it was essential for me to prioritize them by importance. I created a product roadmap to prioritize the features I would design based on their goals and ease of implementation.

Sitemap

To plan out Heem’s information architecture, I created a sitemap by referring to my product roadmap. The sitemap helped me visualize the structure of Heem’s mobile app and the organization of its features.

Task Flow

Creating a task flow helped me focus on the main actions a user would carry out with Heem’s mobile app. This helped me highlight the key screens to design for users to meet their goals.

User Flow

Furthermore, I created a user flow to observe the various ways users can interact with Heem’s mobile app. This helped me understand the different decisions users can make, so I could design to accommodate the possible interactions.

UI Requirements

To ensure that I would meet the high-level and detailed requirements of Heem’s main screens, I created a UI requirements document by referring to my sitemap and flows. This document remained fluid throughout the project, adapting to the decisions I made.

Low-Fidelity Wireframe Sketches

Creating low-fidelity wireframe sketches of Heem’s mobile app was an efficient way to experiment with the structure, layout, and organization of Heem before adding actual content. I referred to competitor apps including Wayfair and Overstock for inspiration.

Mid-Fidelity Wireframes

To see how my ideas would pan out digitally, I created mid-fidelity wireframes of Heem’s mobile app. Here, I was able to play around with font sizes and observe how my ideas would play out on the screen.

04 Prototype

Mid-Fidelity Prototype

With Heem’s mid-fidelity wireframes completed, it was time to create a functional prototype to carry out usability testing.

05 Test

Usability Testing

I conducted usability testing with 5 participants, 2 females and 3 males between the ages of 24 and 27. The moderated in-person and remote think aloud usability tests lasted approximately 10 minutes each. I informed all participants that we would test a furniture mobile app called Heem. I gave them 4 tasks to complete on Heem’s prototype and asked them to walk me through what they were doing out loud. Usability testing helped me uncover user pain points in order to make improvements to Heem’s mobile app.

Tasks

Find the Pinheiro Upholstered Platform Bed in the color gray and the queen size.
Use the augmented reality feature to see how the Pinheiro Upholstered Platform Bed in the color gray and the queen size looks in your room.
Add the bed to your favorites list.
Check your favorites list after to make sure it is added.

Affinity Map

I synthesized my usability testing findings in an affinity map in order to group patterns, pull insights, and identify improvements I needed to make to Heem’s mobile app.

Insights

People want another way to access their lists in addition to having "Lists" in the navigation.

People want to be able to use the AR feature before deciding on a color and size.

Recommendations

Right as users favorite an item, offer a "View My Lists" CTA to allow them to access their lists.

Allow users to access the AR feature before deciding on a color and size by displaying the item with a default color and size.

06 Design

Branding

With the mid-fidelity prototype updated, it was time to add elements that aligned with Heem’s brand. Before doing this, I first had to define Heem’s brand attributes: Modern, Calm, Reliable, Relaxing. Then, I created a Pinterest mood board for inspiration to help me choose elements that would align with Heem’s brand attributes. Furthermore, I created a brand style tile and UI kit to point me toward a clear design direction that was consistent with Heem’s brand and ensure that the visual elements I used were cohesive.

High-Fidelity Prototype

Then, I combined Heem’s branding elements with my mid-fidelity wireframes to create Heem’s high-fidelity mockups and prototype.

Conclusion

This was my first time designing an AR feature for a mobile app. (Interestingly enough, I was moving out during this project, so I was using furniture apps myself as I created Heem’s mobile app.)
Creating this app end to end definitely reminded me about the importance of referring to competitor apps to use design patterns that users are familiar with.
I don’t have too much experience with AR myself, so it was an enjoyable learning experience for me. With that in mind, I also wanted to make sure that Heem’s AR feature would be straightforward and easy to use. This project helped me gain more confidence in designing features I do not have much experience with.

Next Steps

Now that Heem’s high-fidelity prototype is complete, it is time to hand off my designs to a developer. The process doesn’t end here, though. I’ll continue to make more improvements to Heem’s mobile app by conducting more usability tests and gaining feedback.