SMART MIRROR

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

Overview


Problem Space

Warby Parker has both a physical store as well as an online store. The online experience is highly personalizable, however, the same sort of personalization is missing in a physical store experience. Through this project, we aimed to understand how we could personalize users experience in a physical store.

Solution

An interactive mirror installed on all store mirror panels with adjustable height (for accessibility) to help users in their eyeglasses selection process.

My Role

  • Conducted in-store observations
  • Conducted contextual inquiry and interviews sessions
  • Designed the survey
  • Took part in affinity diagramming session
  • Created low-fidelity and mid-fidelity screens
  • Created evaluation plan
  • Conducted expert evaluation session
  • Conducted usability testing sessions> and feedback sessions
  • Created project presentation and presented in front of the class and external faculty

Timeline

Aug 2017 - Dec 2017

Team

Ishaani
Agrim Chandra
Meijia Jiang
Yuyan Duan





Go to top of this section

Process

Figure: Different methods used at various stages of the project
Go to top of this section

Research

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?


Research Questions - 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?


We deployed the following research methods to answer the above research questions.
Observations
Observed store layout of competitors as well as Warby Parker.
Interviews
8 interviews to understand general as well as specific issues related to eyeglasses purchasing experience.
Contextual Inquiry
2 contextual inquiry to understand user selection process/
Surveys
50+ respondents. Questions based on insights gained from other methods and previous phase surveys.

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

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.

User Pain Points

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: Affinity Diagram
Figure: Task Analysis





User Behavior

Figure: Personas

Figure: Customer Journey



Go to top of this section

Ideation & Design

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
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?

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

We created mid-fidelity prototype without adding colors and asked an expert to review our system. We got two main takeaways from this session.

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




APP FEATURES


Login Screen
Home Screen
Album Screen
Compare Screen


Go to top of this section

Evaluation




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

I thoroughly enjoyed applying the User Centered Designing Process through this project. In the research phase, I learnt that we only get one chance to get a survey right and releasing survey prematurely can lead to insignificant and un-actionable data. I am glad that we were able to include accessible design in our project. During our evaluation phase, we conducted pilot sessions which were extremely helpful to pin point issues with our evaluation script.


Go to top of this section