Research <

Define <

Stretegy <

Design <

Test <

UI design<

Heem

Case Study of e-commerce furniture app
with Augmented Reality features

PROJECT BACKGROUND: Heem is new furniture shopping app and have partnership with top furniture stores in US. Heem believes that offering a truly big catalog makes a significant difference to the user experience. Besides being able to browse through the comprehensive catalog, get inspiration and order anything online through their app, users can also see their desired furniture where it would be placed in their home via augmented reality.
THE CHALLENGE: Design an Augmented Reality app that enhance users furniture buying experience.
THE SOLUTION: Heem is a app that allow users to select any piece of furniture from it’s catalog and see it in their space using Augmented reality.
ROLE: UX+UI Designer (Research, Interaction design, Visual design)
CLIENT: Heem (E-commerce furniture app with Augmented Reality features)
DESIGN PROCESS:

Research

TOOLS USED: SECONDARY RESEARCH: MARKET ANALYSIS, COMPETITOR ANALYSIS, PRIMARY RESEARCH: USER INTERVIEW.
MARKET ANALYSIS
With the requirements from project brief and research plan in hand that served as a guide that followed throughout the research phase, I started my research with Market Analysis. To start this project it was important to establish an understanding of furniture industry, current target demographics and AR/VR trends in furniture industry. Key takeaways are:
• In the most recently measured period, furniture and home furnishing sales accounted for 12.9 percent of total retail e-commerce sales in the United States.

• The prime demographic for furniture buyers are between the ages of 32-45 years old and predominantly female.
‍
• Millennials are the largest consumer group in the US furniture and bedding market.
‍
• AR and VR have widespread use cases but are tailor-made for the home furnishings industry. This technology increases consumer confidence when purchasing big-ticket items.
‍
• Aside from conversion rate benefits, AR can also help reduce return rates by helping to prevent consumers from making erroneous purchases that cause buyer’s remorse.
COMPETITOR ANALYSIS
Next I moved on to competitor analysis to identify Heem’s competitors and to determine their strengths and weaknesses.
PROVISIONAL PERSONAS
Based on my secondary, I created provisional personas to begin thinking about who might make up Heem’s customer base. It helped me to focused on the question I wanted to ask in interviews.
USER INTERVIEWS
After the secondary research, I developed list of questions and conducted series of interviews with people who had experience with purchasing furniture or who were looking to purchase furniture. These interviews helped me in gaining understanding of people’s experiences and preferences towards buying furniture.

Assumptions I hoped to prove or disprove were:
• Users like to visit store physically to see furniture before they make a purchase.

• Users go online for ideas and inspiration for decoration.

• Users want to see how product fit in their space.

Synthesis + Defining

TOOLS USED: EMPATHY MAP, PRIMARY PERSONA, POV STATEMENTS+ HMW QUESTIONS, BRAINSTORMING
EMPATHY MAP
After completing interviews I gathered and organised all information to look for insights. I wrote down responses on sticky notes and categorized them into says, does, thinking and feeling. This method allowed me to discover trends and patterns from which I was able to draw insights and discover the needs of my users.

Insights
‍
1. Users measure their space to get the idea about what size of furniture would fit in their space.

2. Users find it difficult to imagine how new piece of furniture would look in their space.

3. Users final decision about purchasing online depend on reviews.

4. Users use many sources to get design inspiration before they buy furniture.

5. Users are concerned about specifications of the product.

Needs
‍
1. Users need intuitive way to take measurements of their space.
‍
‍
2. Users need a way to visualize the furniture in their space.


3. users need access to reviews from other customers.


4. Users need to be able to get design inspiration within app.


5. Users need access to accurate specifications of the product.

PERSONA
Using all the qualitative data that I gathered in my research process, I created Heem’s primary persona Olivia.
POV STATEMENTS AND HMW QUESTIONS
Using my persona's goals and needs, I developed Point of View statements and translate them into How Might We questions. This allowed me to define the problem before thinking about solutions.

Strategy

TOOLS USED: PROJECT GOALS MAPPING, PRODUCT ROADMAP, SITE MAPPING
BUSINESS AND USER GOALS
After a short brainstorming session I compared initial business goals with goals of the user to identify what’s common between them. This helped me to focus on the features that satisfy both business and user.
PRODUCT ROADMAP
After that I created a product roadmap outlining features and metrics. This helped me organize my thoughts and prioritize what features to focus on.
INFORMATION ARCHITECTURE - APPMAP
After outlining the features and priorities in product roadmap, I created appmap of the Heem. This helped me in visualizing how each page would be connected, and how users could potentially navigate through the application.

Interaction Design

TOOLS USED: USER FLOW MAP, SKETCHING, WIREFRAMING IN ADOBE XD
USER FLOW
When the app’s structure was established, I created a user flow to determine how Olivia (primary persona) will navigate through the app for a given scenario. This helped me to make sure that I was designing all the necessary screens that user would use to achieve their goals.
WIREFRAMING
I established UI requirements for key screens based on user flow. I started with low-fidelity wireframe sketches on paper. This helped me in exploring different options to show content in a best way possible and it also saved me time once I moved on into creating mid-fidelity wireframes.
Then Mid-fidelity wireframes were created from initial sketches to show more refined look. The wireframes were developed with the intention to quickly translate them into a prototype so that I could begin testing my design early in the process.

Prototyping & Testing

TOOLS USED: TESTING PLAN AND SCRIPT, PROTOTYPE IN ADOBE XD, AFFINITY MAP
I created prototype in Adobe XD, I conducted in-person usability testing with five users who were recruited in a public places. I provided the users with a detailed scenario and had them complete a series of simple tasks.
Mid-Fidelity Wireframe Prototype
AFFINITY MAP
After testing my prototype I created affinity map to organize responses and observations. This helped me in checking for patterns and driving insights, from which I constructed design recommendations. I listed out design recommendation in the order of high priority to low priority.

UI Design & Iteration

TOOLS USED: MOODBOARD, STYLETILE, HIGH-FIDELITY WIREFRAMES +  PROTOTYPE, UI KIT
I started working on UI design by defining brand attributes Trustworthy | functional | entertaining | diligent. With these words in mind I created moodboard and organized the images into color palette, typography, inspiration and logo.

After that I refined the direction of visual design to create style tile and finalized logo.
HIGH-FIDELITY WIREFRAMES & PROTOTYPE
With list of recommended design revisions and final branding decisions in hand , I moved forward to create high-fidelity wireframes and prototype to show more refined look and feel of product.

ONBOARDING FLOW

BROWSE PRODUCT FLOW

AUGMENTED REALITY FEATURE

INSPIRATION AND CHECKOUT

HIGH-FIDELITY PROTOTYPE

UI KIT
Finally, UI kit was created to document the design patterns and components and to ensure consistent application of elements across the product.

NEXT STEPS

Test: Further user testing with the updated, high-fidelity prototype to test the usability of the current interface.

Iterate: More iteration of the prototype based on next round of usability test.

I enjoyed this project because of its creative opportunities and it helped me deepens my knowledge of Augmented reality and its uses. After I did user interviews I found out that many people agree that AR feature would help in their furniture buying experience, however most of the people are not taking advantage of this new technology. In this project I faced many challenges in usability testing of AR feature. It was hard to convey AR features on wireframe prototype that was not fully developed. I had to ask users to visualize this as fully functional app.

SARAH KHALID
Designed and Developed by Sarah Khalid