Kano
Augmented Reality for Interior Design
Project Overview
Background
Kano is a new interior design app with a large catalog of furniture from some of the top furniture stores in the U.S. Kano wants to offer their customers an immersive and interactive furniture shopping experience through their AR feature. Through this feature users are able to try out furniture in their space, interact with it, one item at a time, or even design a whole room. Not only that, but after trying out the 3D life-size furniture in their space, users are able purchase these items directly through the app.
Challenge
Kano’s main goals for this project are:
Learn more about their target audience.
What their problems and needs are when designing their space and be able to solve them through the app’s augmented reality feature and furniture catalog.
Establish their brand identity.
Solution
Design a cross-platform e-commerce app from end-to-end.
Design an immersive AR experience, within the app, that allows users to view and interact with multiple items at a time in their space.
Develop Kano’s brand and visual identity.
Project Scope
Cross-platform (iOS & Android) app, AR feature, logo and branding design.
Tools
Sketch, Craft, InVision, Airtable, Whimsical, Procreate, Trello, Paper and Pencil.
Role
UX Designer (Research, Visual Design, Interaction Design, User Testing) with guidance and feedback from Mentor and peers.
Duration
80 hours over a 4 week period.
01. Empathize
Market Research
Before conducting research, I created a Research Plan where I put together my research goals and objectives.
I conducted research to gain a better understanding of the furniture industry, what AR (Augmented Reality) is, how it is used to shop for furniture and who is the current online furniture shopper demographic. This research helped learn about the expectations users have regarding the use of AR when shopping for furniture and come up with questions for my user interviews.
Furniture Industry in the United States
Furniture and home furnishings e-commerce revenue amounted 65.12 billion U.S. dollars in 2018, with forecast that by 2022 the industry will be generating revenues of 99.87 billion U.S. dollars.
What it means for retailers: Your products need to be online, and you need to have all kinds of relevant, accurate information available about each product to capture those shoppers who are doing their research on the ‘net.
AR Technology & Online Shopping
Augmented reality (AR) apps might sound futuristic, but consumers are catching onto the trend. About 60 percent of them prefer stores that have AR as part of the experience and 40 percent would pay more for your wares after experiencing it through AR.
According to Interactions Marketing, 77% of shoppers want to use augmented reality to see product differences such as a change in color or style.
Demographic
The prime demographic for furniture buyers are between the ages of 32-45 years old and predominantly female.
According to Accenture, millennials spend about $600 billion each year and are projected to spend $1.4 trillion annually while representing 30% of retail sales in 2020.
Competitive Analysis
To see how Kano could position itself against current furniture e-commerce apps on the market, I conducted a competitive analysis. I focused on each competitor's AR app feature capabilities that allow users to try furniture in their space. Through this analysis, I learned what features are most common amongst furniture apps and how these apps aim to provide their users with an immersive experience. Kano will need to provide a similar experience to their users in order to be successful.
Low-Fidelity Wireframes (User Interviews)
Before conducting discovery research during user interviews, I created a few low-fidelity wireframes of the app Kano that include a few basic features, just as filter and sort, and a few AR screens. Including these low-fidelity wireframes during my interviews will help me learn from participants how they expect these features to work, how they expect to interact with them and what they would like to achieve with them.
User Interviews
To help guide me through user interviews I created an Interview Guide. In my interviews I spoke, through Zoom, with 5 participants that have experience with purchasing furniture online. By asking participants open-ended questions about their shopping experience and what they expect to achieve with the features found in the AR screens, allowed me to involve target users in the design of the AR screens to better address their expectations and pain points.
Interview notes can be found here.
“If you're looking for a nightstand and want to see how it looks with a lamp, you want to be able to add them both to the AR screen to see the full picture.”
Participant #1
“I recently purchased furniture online and what I appreciated was the good quality photos of the furniture and the categories which made the entire process seem smooth.”
Participant #2
“We used AR with the couch for the living room, because this living room is so small, to get a general idea of how the couch is going to look and how much space it would take.”
Participant #3
Database Analysis
To help me properly synthesize the extensive descriptive data gathered through the user interviews, I created a Database Analysis. By using the database analysis I was able to analyze and synthesize the data into 4 common themes (patterns) that reflect the participant’s needs, motivations, frustrations and important decisions when purchasing furniture through an app.
Insights
Participants use AR after taking measurements of their space and viewing the measurements of the product, to verify that the furniture they want to purchase will fit in size in their space.
Participants always check in-depth reviews to verify that the product they are interested in, is of good quality before they add the item to their cart.
Participants always compare different store prices of the furniture they are interested in to make sure they get the best deal.
Participants want to easily compare similar products while designing furniture sets for their homes.
02. Define
User Persona
With all of the data and research gathered thus far, I created a user persona that represents Kano’s target audience, their needs, goals, motivations and frustrations. By creating this realistic representation of Kano’s user, Charlotte, I am able to better empathize with our user through the design process.
POV Statements and HMW Questions
After defining Kano’s target user, Charlotte, it was important to understand her problems from her point of view before trying to solve them. To do that, I used the insights and needs gathered and crafted Point Of View Statements and How Might We Questions to help me clarify and confirm the user’s needs in a human centered manner. I will use the HMW Questions during the ideation phase to help me brainstorm and uncover ideas on how I can help solve Charlotte’s problems.
03. Ideate
Brainstorming
Now, by using the How Might We Questions I did a brainstorming exercise to quickly jot down ideas on how to solve Charlotte’s problems. For each HMW question I used the mind mapping technique where I spent 2-3 minutes writing down as many ideas as possible. This exercise helped me to quickly come up with a range of different possibilities to help solve Charlotte’s problems such as, including a dimensions icon in the AR feature.
Sitemap
Before creating the Sitemap, I put together a Product Features Roadmap to help me prioritize the features, chosen from the brainstorming exercise, that would be built and implemented. I then studied the information architecture of content within various competitor apps while referencing the roadmap and user persona created. This tool helped me visualize the best way to structure the information within the Kano app to make navigation as intuitive as possible for Charlotte.
Task Flow + User Flow
Now, I moved on to creating a combination of a Task and User Flow. Here I focused on one task where Charlotte is looking to find two chairs for her living room for the lowest price possible. The purpose of this flow was to help me think about all of the different gestures the user would use and actions the user would take to complete the task within the AR feature, as well as the pages that will need to be created during the wireframing process.
Mid-Fidelity Wireframes
Using the previous tools created, low-fidelity wireframes and competitor apps as a guide, I created Kano’s mid-fidelity wireframes. Below are some of the navigational and AR screens. The purpose was to illustrate the information architecture, features and interactive states of elements within the app and workout possible gaps before adding the branding elements (The only pages where imagery was used was in the AR feature screens to help visualize the way the AR would work).
Branding
Before creating the high-fidelity wireframes I needed to establish Kano’s brand identity by focusing on their brand attributes. For Kano’s Logo, I started by sketching out potential ideas, digitized the top 3 logos in Sketch and then settled on the logo that I felt strongly embodied Kano’s brand attributes. I then moved on to creating a style tile consisting of the typography, color palette, logo and imagery that will serve for the foundation of the app’s interface design. This document will serve me as a guide and visual reference while creating the high-fidelity wireframes.
High-Fidelity Wireframes
Now that I have revised the mid-fidelity wireframes and established the brand identity for Kano, I am able to create the high-fidelity wireframes by applying product imagery and the branding elements from the style tile. These high-fidelity wireframes will serve to put together the prototype for usability testing, where users will be able to find and test out accent chairs in their living room through AR.
04. Prototype
Prototype
By using the high-fidelity wireframes, I created an interactive mobile prototype with Sketch and uploaded it to InVision. The goal of the prototype is to help me gather usability feedback from users during testing, to see what elements and interactions can be improved on.
05. Test
Usability Testing
To conduct usability testing, I used the Kano prototype and put together a Usability Test Plan. I then recruited participants that shop for furniture online and through apps. The main focus was to gather usability feedback from participants, uncover, identify and diagnose issues they run into and understand what in the design caused them.
Overview
Conducted a moderated remote usability test through Zoom. Acted as a moderator and encouraged users to think aloud during the testing process. This allowed me to learn more about their thoughts, behaviors, goals and motivations as they performed each task.
Participants
Number of participants: 5.
Age range: 30-35.
Gender: 3 Female and 2 Male.
06. Iterate
Affinity Map
To help me further empathize with the users, synthesize the information gathered and uncover the recommendations for the next iterations, I created an Affinity Map. Through it, I was able to identify the most common themes within the user feedback written on the sticky notes. Through those patterns I was able to uncover the insights that were then synthesized into recommendations.
Insights
Issue 1
All of the participants expressed wanting the ability to tap on the “Accent Chair” text that appeared on the search results page, so they could navigate to the results right away.
Issue 2
4-5 participants were confused that after they made their sort selection, the sort page did not disappear right away or have a “confirm” button that allowed them to confirm their choice and see the results right away.
Issue 3
4-5 participants were confused when interacting with the Scan Your Room screen, as they expected the chair to appear right away on the screen. Due to that they wanted to use the Add button to add the chair to the AR screen.
Recommendations
Fix 1
Allow users to tap on search results text to navigate directly to the page that they want to shop from, in this case the “Accent Chairs” page.
Fix 2
Add a confirmation CTA button to apply the sort selection that allows users to verify and confirm their sort choice before the results are shown. This should help with error prevention.
Fix 3
Rewrite the helper text found in the first AR scan screen to let users know that they are scanning the area for a flat surface before the item can appear and removing the second scan screen, which is not needed.
Priority Revisions
Based on the recommendation found through the affinity map, the priority revisions to the high-fidelity wireframes and prototype were made to insure a positive and useful user experience.
UI Kit
Now that iterations have been made, I put together a well-labeled UI Kit that includes all of the UI elements and design patterns found in Kano’s app. This document will be shared with developers and designers that collaborate to the design of Kano and it will continue to be updated as changes are made in the future.
Reflection
This was my first time working on the end-to-end design of an e-commerce app that includes an AR feature. Due to this, Kano was a big challenge for me to take on and required a steep learning curve regarding augmented reality.
Understanding Augmented Reality
Once I decided to take on the challenge of designing an e-commerce app with augmented reality capabilities, I knew that I needed to learn in-depth about what AR is, how it is used and how it is being implemented in competitor apps to allow users view furniture in their space. I learned that AR is a growing technology that not all customers are familiar with. Due to that, part of the challenge was learning about what capabilities currently exist in AR and figure out how to best bring forth an AR experience that is useful and solves the needs of its users. I believe I was able to successfully create an immersive AR experience that will allow users to see value in this feature, feel comfortable using it and allow them to achieve their goals.
Next Steps
Design Implementation & Hand-off
Build the remaining wireframes for the other features.
Expand upon the app’s AR functionality.
Continue to gather usability testing data from target users.
Discuss challenges with engineers regarding the AR capabilities.
Continue to iterate using the design thinking process.
Continue organizing deliverables for handoff.
