Victoria Kaufman: UI/UX Designer
heem banner.png

Heem

heem_big_banner.png
 
 

Client: DesignLab

My Role: Interaction Designer, UX Researcher

Background: Heem is a new app for interior design. They have partnerships with a number of top-ten furniture stores in the US. It’s now time to start designing the app. Heem is not the first one doing a AR furniture app. However, they aim to do it better, and bigger.

Objective: Create an end-end mobile application that will allow users to try out new furniture in their homes using augmented reality, make purchases and set up delivery.


Stage 1: Research


 

Competitive Analysis

To kick off my research phase I explored three other AR-based interior decorating apps - Amikasa, IKEA Place, and Housecraft. I tallied up all their features in a competitive analysis and decided which ones I should include in Heem.

 
 
competitive analysis.png
 
 
 

User Survey

I created an online survey through Google Forms that was a mixture of multiple choice and short answer asking about people’s shopping habits. My objective was to discover the preferences of people who buy furniture, whether they prefer to go to a store or shop online, and what they like and dislike about both experiences.

I received a total of 70 responses providing a large data set to analyze. Buying furniture online, while convenient and fast, is still not a replacement to going to a furniture store, especially for larger items. The inclusion of AR when shopping online can help bring us one step closer to be able to do a lot of furniture shopping online, because users will be able to see if something will fit in their space without leaving the home.

Screen Shot 2017-10-09 at 7.40.10 PM.png

Stage 2: Define


 
 
sam_persona.png

User Persona

After completing my primary and secondary research I created one final user persona, Sam, a physical therapist who is looking to buy a couch from IKEA with her husband. I use personas when making future design decisions to also keep my audience in mind and have a reference to look back to quickly.

 
 
 

POV Statement

Today’s consumers still struggle with online shopping when it comes to furnishing their homes. They are afraid of not knowing if something will fit in their space, or if it will match their decor. With Heem’s new AR interface, we take the guesswork out of purchasing furniture. Users will be able to select items from leading home furnishing brands of and view how each piece will look in reality, to scale. Heem will serve as one-stop shop, allowing users to purchase items in-app, set up delivery to their homes, and bridge the gap between the in-store and online experiences.

 

Feature Matrix

For this feature matrix I included the list of features and options I want to have for the Heem AR app. Much of this was based on my competitive analysis and what I found to be lacking in other AR apps. I also included the priority, difficulty to implement, and if this feature can be found on an already existing app.

 
 
feature matrix.png
 
 
 

Customer Journey Map

Continuing my design process, I mapped out Sam's journey of buying a new couch for her living room using the Heem app. I read articles and looked at examples of other journey maps before designing this. I also included an empathy map for her emotions. Having a journey map helps to empathize with the user’s wants and needs.

 
Journey Map.png
 

Application Map

The application map contains all the existing screens of the Heem app and shows the order of the screens. The boxes highlighted in blue are the pages I intend to design. This provides me with the skeleton and basis for which to start creating my screens.

 

 
 

Stage 3: Design

 
 

 
 

Sketches

My preliminary sketches for the key 6 screens to be shown for the application. I decided to design my app for the new iPhone X, since that phone comes with a built-in AR system. These served as the basis for my wireframes, and eventual final UI.

sketch.JPG
 

Wireframes (Key Screens)

Home .png
Item View.png
Place Item.png
Cart.png
 
 

Logo

For the Heem logo I went with a graphic interpretation of a mid-century American couch paired with thick sans-serif text. I wanted the logo to be fun and use a bright color that would pop on the screen and catch you eye. I made versions of the logo that work on both a light and dark background.

logo_twotone.png
 
 

Final Key UI Screens

home_Mockup.png
login_Mockup.png
success_Mockup.png
 

UI Kit

 
UI Kit.png
 
 

 

Stage 4: Test

 

 
 
 

 Prototype

I created a clickable prototype using InVision’s prototyping tools. I then carried out 6 moderated tests using volunteers to see how successful the complete flow is to end users. I compiled all my results and data into a document.

 

home_Mockup.png
 
 
 

Affinity Map

I summarized the results of all moderated user tests with my InVision prototype and came up with some key feedback notes. These are the main points I took away from my testing stage and what I can do in the future to improve the Heem app and continue to grow.

heem affinity map.png
 
 
heem_mockup_lvgrm.png

The future of Heem...

The future of Heem is bright. These are some of the features I want to add to this continually expanding project:

  • Landing Page for Heem, info about the app

  • Animation of UI elements

  • Incorporating VR technology to Heem, pushing it to new fields of the latest technology