Projects | Smart Mirror

How can we help users in the eyeglasses selection process at Warby Parker

Overview

Role: UX Researcher + UX Designer  

Tools: Pen & Paper, Balsamiq, Sketch, Invision, Principle  

Duration: Fall 2017  

Details: 4 person team project @ Georgia Tech  


How it works?

Based on the assumption that infrastructure exists to support eyeglasses and face recognition techniques.

An interactive mirror installed on all store mirror panels with adjustable height (for accessibility)

Tell the story of your design

Take pictures


Users can click pictures to see how a particular eyeglass looks on them

Tell the story of your design

Get recommendations


Users can get a recommendation based on recommendation engine based on the face shape, gender and general taste of the user (determined through the kind of eyeglasses tried).

Tell the story of your design

Get second opinions from friends and family


Users can transfer images clicked from the smart mirror to their phones to support sharing with friends and family.

Tell the story of your design

Compare different eyeglasses


Users can compare how various eyeglasses look on their face structure on a big screen to help in better decision making.

Process

Research

Problem Space & Research Questions

In order to understand how users make their eyeglasses selection process decision, we came up with the following research questions.

  • What kind of research/preparation do users do before visiting Warby Parker store?
  • What are the various decision-making points while purchasing eyeglasses?


Defining the problem scope

Affinity Diagram

We used Affinity diagram to synthesize the results from interviews and contextual inquiries.



Persona Creation

From the research, we noticed that three different user groups emerged based on their time dedication, motivation to buy eyeglasses and their personality traits. These profiles were captured as Ethan, Lois & Klevon.


Customer Journey Mapping

Customer Journey Maps helped us visualize the complete process - look at the touchpoints at which Warby Parker interfaced with the customer and the emotional situation of the user at various stages of the process.




Key Findings

  • Bad eyesight makes purchasing process difficult. Almost all respondents found that seeing themselves in new eyeglasses was tough due to their increased glasses power.
  • Style and look value more than lens and material. Nearly 40% of users mentioned purchasing eyeglasses for a change of style. Many users mentioned face shape, skin tone and personal taste to be important factors as well.
  • Users want to try eyeglasses in person before making the final decision.
  • Users spent a lot of time in the comparison, collecting feedback phase of the process.

Design Goals + Usability Criteria

Based on the findings from the research, I proposed the following goals & usability criteria that the product must achieve
  • Provide an easier way for users to compare eyeglasses
  • Provide an easier way for users to collect feedback from various sources like friends & family and representatives at a store

Ideation

What is the current process?



How can we simplify the process for the users?

What was the result of the brainstorming session?



One of the ideas which stood out from our brainstorming session as well as user feedback was that of an interactive mirror and we unanimously wanted to explore this further for the following reasons:

  • Considering the Warby Parker brand in mind and their history of disrupting the eyeglasses industry, it seemed apt to explore a different platform - a mirror as a medium to help users in their decision-making process.
  • It provided us an opportunity to explore in-store technology and move beyond the traditional mobile or web interfaces.

Design

Onboarding of the user to the mirror

I crafted the onboarding flow of the user to the mirror. Since user interaction with the mirror starts once they enter the store, it is important to notify them of this existing feature they can avail to aid their selection process. This flow was iterated based on user feedback.

User Flows

Once decided on the interactive mirror idea, I created user flows. This user flow was created based on assumptions which were then verified and iterated on using user feedback. The resultant user flow was more organized and compact.

Interaction Model

Large Button Areas


Since the user would be standing at a certain distance from the mirror, using Fitt’s law, the further the user is from the point of interaction, the larger the area of interaction is required to provide seamless interaction.

Tap instead of elaborate gestures


Since the mirror will be used in public space with users potentially being surrounded by others, it is important to think about the available user surrounding space, size of the mirror as well as how comfortable would users feel doing gestures around others.

Challenge One: How will users click pictures with reduced eyesight?

Since the user group will have reduced eyesight as they are trying different eyeglasses, it is important to make use of other senses to substitute for reduced eyesight.

We came up with three ideas to resolve this issue. I also created user flows for the above ideas to see how it would fit in the whole ecosystem. Based on user feedback and no. of steps each of the above ideas would add, it was decided that having the countdown timer made the most sense.

Tell the story of your design
Tell the story of your design
Tell the story of your design

Challenge 2: Will the mirror be accessible to people with all age and height?

For a product to be a success, it is important for it to be able to cater to a wide variety of audience and people ofc have varied heights. This means that placement of the mirror for a 6ft tall person would not work the same for a 5ft5inch person.

Also, what about people in a wheelchair?

We designed the concept of the smart mirror with adjustable height. Since I was the only team member with a technical background, I drew the flow diagram explaining how this tech would work.

Tell the story of your design
Tell the story of your design

Challenge 3: How much area is actually reachable?

Tell the story of your design

We did not research this in great depth, but drawing from mobile interfaces and the reachability of different regions on a mobile device, we decided to keep all Call to Action buttons at the bottom for quicker action time.

User Flows of different features

Tell the story of your design
Tell the story of your design
Tell the story of your design
Tell the story of your design

Evaluation

We gave 8 users 4 tasks and made the user scenarios realistic drawing from the user research previously conducted.

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

Reflections

This project helped me explore design in the bigger scheme of things beyond mobile and web interfaces. The project involved imagining the product in an already existing product offering which made the work more interesting as it added an additional layer of constraints. Since the project was based on the success of the technical backbone and only I had a technical CS background, I took the lead to explain unfamiliar technical concepts to my team. I felt happy being trusted with this responsibility and to be the go-to person for any of my teammates' doubts.

If given more time, I would have liked to explore options to test the system in a real life situation at Warby Parker.

Dear UXfolio Official,

Best,