Smart Mirror

Backstory: Once upon a time, there were three students - Ethan, Lois and Klevan who faced a hard time deciding on eyeglasses at Warby Parker store

Impact: Improving Warby Parker’s in store eyeglasses purchasing experience by providing an interactive way for users to select eyeglasses


My Role: UX Research, UX Design, Prototyping


Timeline: August 2017 - December 2017

Team Members: Ishaani | Agrim Chandra | Meijia Jiang | Yuyan Duan

Impact: Improving Warby Parker’s in store eyeglasses purchasing experience by providing an interactive way for users to select eyeglasses


My Role: UX Research, UX Design, Prototyping


Timeline: August 2017 - December 2017

Team Members: Ishaani | Agrim Chandra | Meijia Jiang | Yuyan Duan

Overview



Features

  • Login using code provided by store assistant to protect privacy
  • Login using face recognition for subsequent usage of the mirror in the same day
  • Clicking pictures so that users can view them in an album
  • Comparing pictures so that users can see how different eyeglasses look on them
  • Sending pictures to phone to get second opinions from friend/family
  • Viewing recommendations to get better assistance in selection process
  • Deleting all pictures manually to provide sense of authority to the user
  • Deleting all pictures automatically after 24hours of inactivity to protect privacy


My Role

  • Performed contextual inquiry and majority of the interviews
  • Conducted in-store observations
  • Created survey
  • Performed Task Analysis and took part in affinity diagram mapping
  • Actively took part in brainstorming session
  • Created paper mockups and hi-fidelity mockups
  • Conducted several feedback sessions at various stages of the project
  • Created evaluation plans for users as well as experts
  • Conducted expert evaluation sessions


Process


Following figure shows different methods used at different stages of the project. The stages are divided based on their focus.Initially, the focus was to understand what the goals of our product should be, which depended heavily on user research and analysis. Once, we determined the goals of the product, we shifted our focus on features which could accomplish those goals. This included the ideation, brainstorming and evaluation phase of the project.


Go to top of this section

Research


What is the eyeglasses purchasing process and various components involved?

Our first aim was to understand the eyeglasses purchasing process in United States. For this we did online and offline store purchasing process research. Next, we carried out literature review to understand what wearing eyeglasses in today's day and age mean. Since, the aim of this project was to pick a company whose User Experience we aimed to improve, we conducted extensive competitive analysis. We carried out surveys and interviews in two phases.

Research Questions

Phase I

The first phase of surveys and interview focused on general purchasing experience regardless of the company.
1
What are the factors involved in purchasing new eyeglasses?
2
What kind of knowledge gap, if any, leads to issues while purchasing eyeglasses?
3
Do users prefer buying glasses online or offline and why?


Phase II

The second phase of surveys and interviews focused extensively on the purchasing experience at Warby Parker Physical store.
1
What kind of research/preparation do users do before visiting Warby Parker store?
2
What aspects of physical store influence purchasing patterns and how?
3
What are the various decision making points while purchasing eyeglasses at the store?



User Participation

Contextual Inquiries
Interviews
Survey Respondents


HIGHER LEVEL INFORMATION GOALS

1. Customer: What are the reasons and preferences for buying new eyeglasses?
2. Physical Store: What is the layout and organization of eyeglasses in the store?
3. Store Assistants: How many and how are they trained to interact with the user?
4. Purchasing Goals and Behaviour: What are the reasons user chose Warby Parker over other brands? What is their selection and comparison process?
5. Staff service touch points: What role do store assistants suggestions play in the purchase?
6. Service Methods and Technology: What are the in-store technologies used by users or store assitants to ease the purchasing process?
7. Eyeglasses purchasing experience: What are the users satisfaction and pain points during the purchase process?
Figure: Information Goals

Figure: User Store Navigation Path
Figure: Warby Parker Store Layout


Figure: Warby Parker Entrance
Figure: User Picking Eyeglasses
Figure: User Clicking Picture
Figure: Checkout Process

Go to top of this section

Analysis


What problems did users face?

In this phase, we transformed our research into user needs, behaviors and pain points. We found user needs through affinity mapping and task analysis and identified user pain points. We saw that there are three types of users (Customers, people visiting with customers and store assistants) involved in the complete transaction of buying eyeglasses. These needs saw a few emerging behaviors amongst users, which were represented using Personas. These behaviors were categorized into groups of Ethan, Lois and Klevon. We then generated customer journey maps to aid design decisions.

Identification of User Pain Points

We discovered user needs through affinity mapping and task analysis.
1
Users have difficulty finding frames they want
2
Users spend more time than expected in the store
3
Users looked to go with someone to the store to get second opinions
4
Users took pictures in store to get second opinions
5
Users felt pressured to try recommendations given by store assistants
6
Users thought that store assistants aren't qualified enough to give recommendations


Figure: Warby Parker Word Cloud

Figure: Affinity Diagram

Figure: Task Analysis


Representation of User Behavior


Figure: Personas

Figure: Customer Journey


Go to top of this section

Ideation/Design


How could their problems be solved?

Once, we discovered user pain points, we conducted informed brainstorming session to come up with various ideas.
Figure: Brainstorming concepts


Figure: Discussion of ideas
We analyzed and combined the concepts into three main concepts based on the different technology platforms. The first one being iterative mirror, the second one being AR technology and the last being combination of website and app. While all these concepts focused on improving the in-store experience, interactive mirror focused on users who come into the store without doing prior research about different glasses available at store, whereas AR camera and a connection between online and offline experience focused more on users who have done some sort of prior research before coming to the physical store.


Idea 1: AR APP




Idea 2: Website + App Connection




Idea 3: Interactive Mirror



USER FEEDBACK I

To decide on which idea to go by, we conducted
  • pilot evaluation with all team members present to get everyone on the same page
  • within subject evaluation to understand the relative ranking and acceptance of the three concepts
  • between subject evaluation to explore feature-level feedback to combine ideas later on

Pilot In-Person Moderated User
Between Subjects In-Person Moderated Users
Within Subjects In-Person Moderated Users
In within subject evaluation, generic questions were asked however in between subject evaluation, more idea specific questions were asked.

Generic Questions

1
What do you like about this concept?
2
What is the most confusing part of this system?
3
How likely are you to use this system?
4
What changes would you like to make in this system?


USER FEEDBACK I RESULT

Figure: User Attitude Towards Concepts
Figure: User Likeliness to use the system


FEATURE LEVEL DECISION

After the feedback session, we decided to take feature level decision as we didn't want to discard features just because people did not like how the way feature was presented and decided to go with interactive mirror option.


Recommendation
Share/Sending Pictures to Phone
Comparison
Gallery/Album
Glass recognition and showing info on the screen
Call Assistant
Picture frames
Notification on entering store
Usage of mirror without code
Eye Sizing


SPECIAL DESIGN CONSIDERATIONS

Since the user group interacting with the system would have diminished visual skills while clicking pictures with the system, making the system accessible was one of the top priority.
1
Large Button Area following Fitts' Law
2
Simpler interactions - using only tap instead of elaborate gestures
3
Camera countdown timer to give cue about picture being clicked
4
Automatic interactive region height adjustment for users with different heights


USER FEEDBACK II

We created hi-fi mockups and simulated Warby Parker's physical store layout to collect feature level feedback.
Figure: Warby Parker Store Layout
Figure: Simulated Store Setup 1


Figure: Simulated Store Setup 2
Figure: Welcome user to the store
Figure: User interacting to the system
Figure: Team member flipping the pages to simulate interactions


USER FEEDBACK II RESULT


TAKEAWAY 1: Users found the icons without text to be confusing. The recommendation icon with stars made users feel that it was more of a review system than a recommendation system.


TAKEAWAY 2: Users found the method of faceId login confusing when they used the mirror the second time. Introducing faceID and writing instructions explaining when to use faceID will make users familiar with the concept of faceID. Also, making the faceID login process optional provides user more control.


TAKEAWAY 3: Users were skeptical of photo storage. Providing them written assurance that there images will be deleted as well as providing a mechanism to delete all the pictures manually puts user in more control and increases the confidence in the system.


HI-FI MOCKUPS



Go to top of this section

Evaluation


How well does Smart Mirror resolve their problems?


Tasks
Evaluation Experts
In Person Moderated Users


TASKS

"Add five eyeglasses to the compare list"
Scenario: You have entered stored and shortlisted five eyeglasses while browsing the collection
"Send three pictures clicked to your phone"
Scenario: You want to share the pictures with your friends
"Delete all pictures"
Scenario: You decided to pick more eyeglasses in the store before deleting the pictures
" View recommended eyeglasses"
Scenario: You didn't like any of the eyeglasses picked earlier and now want to get recommendations


COGNITIVE WALKTHROUGH

Before evaluating our system with the user, we conducted 6 cognitive walkthroughs where each expert was given two tasks assigned at random. Each task was accompanied by steps to carry out the task and experts were asked set of four questions at each step in the task. However, since we did not find any major issue design wise, we decided to conduct user evalautions without iterating through the design.


Figure: Cognitive Walkthrough Steps Description


Figure: Cognitive Walkthrough Data Analysis


DESIGN IMPLICATIONS FROM THINK ALOUD

1
Add a state change to indicate picture selection
2
Redesign the icon of Recommendation
3
Disable the compare button when images aren't selected


SYSTEM USABILITY SCALE COMPARISON

Figure: Comparison of SUS score from previous iteration

Go to top of this section

Reflections


What were my reflections from this project?

UCD Process is extremely fun and rewarding
Coming from a software development and engineering background in general, I have had a very different perspective of approaching a project. However, as I explored the User Centered Design process more, my decision to pursue HCI strengthened and I have thoroughly enjoyed following the whole process. Working on a project which was truly solving a need from ground up was very rewarding.
You only get one chance to get a survey right
We made two surveys as part of this project. Our first survey was focused on getting a general overview about eyeglasses purchasing experience across various companies. However, we released an immature survey which led to a lot of insignificant and un-actionable data. But, we learnt from our mistakes and I created a table to help come up with questions and removed all the questions which didn't provide us any value. The table focused on writing the high-level research goal, questions that helped achieve the research goal, and how data obtained could be used to get actionable insights. Spending more time on structured data meant that we were able to significantly reduce the number of questions asked in the survey and got actionable data.
Conducting pilot session is extremely useful
Due to disagreement amongst the team on how we should conduct our evaluation session, I recommended that we do a pilot test just to see that everyone knows how to conduct a session and at the same time test if team members were able to conduct the session. This was extremely helpful as we were able to point out things that went well and things which didn't go well. This session also helped us further refine our evaluation questions as well as see that we didn't go over the set time.

Go to top of this section