Project Details
Client: Heem
Timeline: 4 Weeks
Role: UX Researcher, UX Designer, Interaction Designer, UI Designer
Tools: Adobe Illustrator, Adobe Indesign, Adobe XD, Invision
Deliverables: High-Fidelity Wireframes with added features, App Prototype, UI Kit
Challenges
Heem is a new app for interior design. They have partnerships with a number of top 10 furniture stores. They are hoping to create an Augmented Reality shopping experience in which users should be able to select any type of furniture and see it in augmented reality through their smartphone or tablet app.
My main challenges will be:
To create an experience that fulfills the company’s goals while creating the best experience for the users.
To incorporate the new AR feature into a furniture retail application in a way that enhances the experience for users.
Outcomes
By utilizing data from the research phase I designed an application that used well known design patterns to incorporate AR into the users’ furniture shopping experience.
Goals
My goal for this project was to create an application that addressed the user’s needs and frustrations to create a seamless experience for the user while they shopped for furniture using AR.
Process
Process
1.
Research
2.
Define
3.
Ideate
4.
Design
5.
Prototype
6.
Iterate
Research
Goals: Understand my target audience and what frustrations they are facing
Steps: Market Research - Competitive Analysis - 1:1 User Interviews
Market Research
The research phase started with gathering, reviewing and analyzing information about the furniture and augmented reality markets to understand the demographics I will be designing for.
In 2017, the highest market furniture consumers were between 25-34 years old.
18-24 | 13.2%
25-34 | 29.7%
35-44 | 28.6%
45-54 | 18.1%
55+ | 10.4%
33% of total furniture market revenue will be generated through online sales by 2022 20% of millennials have purchased furniture and home goods via phone.
84% of Americans buy their furniture new Millennials have different shopping habits (more online-centric) than other generations and tend to prioritize more sustainable product purchases.
Furniture is the top product people want to shop with AR (60%).
11x higher likelihood for customers to buy when AR try-on is available.
32% of retailers are already planning to use AR or VR.
32% of consumers use augmented reality, and 73% of mobile AR users reported either high or very high satisfaction with mobile AR experiences.
53% of consumers are interested in using augmented reality in the next three months.
71% of shoppers would prefer to go to stores that offer AR experiences.
88% of Mid-Sized Companies Are Already Using AR in Some Capacity.
Competitive Analysis
My next step in the process was to look at who Heem’s main competitions are and what they are offering.
1:1 User Interviews
I approached strangers and asked them questions about their furniture shopping habits as well as question about their knowledge about AR and using AR. Addressing assumptions I had made to disprove or prove them.
Total Participants Number: 5
Age: 27-46
Gender: 3 female, 2 male
I interview 5 participants who have bought furniture or are trying to buy furniture. Participants were asked questions about their furniture shopping habits as well as some question about their interaction with AR.
Define
Goals: Define frustrations, needs and goals of users based on data that I had gathered.
Steps: Empathy Map - Persona
Empathy Map
Using the information gathered from the user interviews, I built a map by writing out each data point on a post it note. Once those were up, I looked for common themes and grouped them together to understand frustrations that the majority of participants faced.
Insight:
Quality is a top priority when shopping for furniture
Users know what style they want before starting to shop
Price and deals are important to users
Need:
Users need to able to determine the quality of the product
Users need to be able to view furniture by style
Users need to find the best deal for their money
Persona
Using the information gathered from the empathy map and my user interviews I built a persona. This is who I will be designing for during the project.
Ideate
Goals: To use my understanding of the users, based on my research, to find ways to help address my user’s frustrations and find a solution.
Steps: POV Statement - Brainstorming - Application Map - Task Flow - User Flow
POV Statement
Using the insights and needs from the empathy map I constructed Point of View Statements, this helps understand the needs from our persona’s point of view. Using these I could then pose How Might We questions to start brainstorming how to solve the problem.
Brainstorming
Using the How Might We questions based on my persona’s needs and goals, I did a brainstorming session to answer how might we best help the users.
Application Map
After having figured out solutions on how best to address my persona’s needs, I moved on to understanding the architecture of the application.
User Flow
With the knowledge of how the application was going to be organized, I wanted to make sure that the user flow was as direct as possible and I was not making my user jump through any unnecessary hoops.
Using the User Flow already created, I picked the most important tasks and looking into each step I made to insure that the flow was as smooth as possible.
Task Flow
Design
Goals: With the solution in place and with an understanding of how the features would work together, I moved on to sketching out screens.
Steps: Sketches - Mid-Fidelity Wireframes
Sketches
Using the solution that I had brainstormed I sketched each screen that would be involved in accomplishing the main task of the application. Using common design patterns that users will be familiar with to introduce a new feature, AR.
Mid-Fidelity Wireframes
Using the sketches I had developed I moved on to Mid-fidelity wireframes of all the screens that would be needed to test out the main tasks of the application.
Prototype
Goals: To create a prototype to use for usability testing and ensure that I have created a good user experience
Steps: Mid-Fidelity Wireframes Prototyped using Invision
Mid-Fidelity Wireframes
Using Invission, I utilized the mid-fidelity wireframes I had created to prototype Heem’s application.
Iterate
Goals: Refine the wireframes and prototype based on data gathered from usability testing
Steps: Usability Testing - Affinity Map - Prototype Iterations
Usability Testing
Using the prototype I built with the Mid-fidelity wireframes I developed an usability test to understand how users interact with the application and to find any problem areas.
Total Participants Number: 5
Age: 23 - 47
Gender: 2 female, 3 male
Completion Rate: 100%
Error-Free Rate: 75%
Test Objectives
Study how uses interact with the application
Test how long it takes for users to achieve a specific task
Identify any issues or areas of confusion that the user seem to encounter
Task 1
Find the coffee table “Pacific Natural Wood Oval Coffee Table”
Task 2
View the coffee table Pacific Natural Wood Oval Coffee Table in Augmented Reality view. Then add to cart.
Affinity Map
Using each set of data from the usability testing I created a map on the wall with all the information. I then grouped patterns to find where the majority of users seem to be having frustrations with the application. With these groupings I wrote out the insights and my recommendations on how to address them to provide a better user experience.
Insight:
Users don’t want to sign up or login to access the application
Users get confused with directions for the AR screen
Recommendations :
Make continue as guest more prominent on login screen
Give AR directions one at a time instead of all at the beginning, so users don’t have to remember what to do next.
Prototype Revisions
Using the insights from the affinity map, I addressed the problem areas by redesigning some elements and updating a few screens.
UI Design
Goals: Design Heem’s branding and apply it
Steps: Branding - UI Kit - High-Fidelity Wireframes
Since Heem’s was a new company, they had no logo or branding. Using adjectives that describe the company, I developed a logo and branding.
Branding
Using the updated mid-fidelity wireframes, I applied the branding to create high-fidelity wireframes.
High-Fidelity Wireframes
UI Kit
Lastly I updated the UI kit to reflect the any updated done after the usability testing. Making sure that it included all UI elements so that the branding could be kept consistent as the application grows.
Conclusion
Using design patterns that users should be familiar with was key to this design. With the addition of Augmented Reality to the app, it was important to keep the rest of the application consistent with what the users were already familiar with to minimize unfamiliar territory for the customers.
Next Steps
Conduct another round of usability testing to confirm assumptions that problems areas have been fixed and to find any other friction points in the user flow
Update prototype based on new round of usability testing
Update UI kit based on any update to the prototype