Projects | Smart Mirror

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  



Problem Statement

When people buy eyeglasses in a store, they are more often than not haunted by so many questions. They have so much to consider: Does the frame shape suit me? Does the design speak to my personal style? How do I look? Since the eyeglasses don't come with prescription when you trying them in the store, the users cannot see themselves clearly through the mirror and compare how they look, especially people with poor eyesight.




How Smart Mirror 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)



Take pictures


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




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).




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.




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?


Figure: Research Overview

Defining the problem scope

Affinity Diagram

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

Figure: Affinity Diagram



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.

Figure: Personas

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.


Figure: Customer Journey



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?

Figure: Task Analysis



How can we simplify the process for the users?

Figure: Brainstorming Overview

What was the result of the brainstorming session?


Figure: Idea 1 - AR App

Figure: Idea 2 - Web App

Figure: Idea 3 - Mirror


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.


Figure: Onboarding Flow

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.


Figure: User flow


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.

Figure: Large Button Area




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.

Figure: Tap instead of elaborate gestures



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.


Figure: Blurry vision example



We decided to tackle this by introducing a concept of "countdown timer" which gives user non visual feedback for clicking pictures. The user needs to stand in front of the camera and click the camera icon on the mirror. Once the icon is clicked, the user will get auditory feedback as well as visual feedback (in bigger letters) so that user can determine if the shapes of the numbers are changing and get ready for the photo.



Figure: Countdown timer

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. When the user stands touches any place on the mirror, the eye-recognition part of the interactive mirror gets activated. It slides down to come on level with the user's eye level. Once the eyes are detected, the part of the mirror which is most reachable to the user gets activated for user to interact.

Figure: Accessible Design



Challenge Three: How much area is actually reachable?

The easily accessible region on the mirror is somewhere in the middle. This is because the larger the area is made by the hand and the mirror, the tougher it is to reach the mirror for the user. Hence, all the call to action buttons should be in the most easily accessible region on the mirror.

Figure: Reachable Area



User Flow - On Boarding

Onboarding User Flow


User Flow - Click Image

Figure: Click Image User Flow


User Flow - View Recommendations

Figure: Recommendation User Flow


User Flow - Share pictures

Figure: Send Images User Flow

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.


From evaluating the application with 8 users, we found out that:

  • The usability of the system increased by 7.7 points on the SUS scale between different design iterations
  • Users liked the information displayed for recommended eyeglasses
  • 25% users were confused about the tech involved behind the recommendation engine

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,