SMART MIRROR

 
wp header_2.png
 

Overview

 

What was the problem we set to solve? Why did it matter?

Our team objective was to improve Warby Parker's eyewear purchase process. And explore into their online and offline sales experience.

We decided to tackle this problem as a majority of people were eyeglasses. And we wanted a bit of a challenge. Buying eyeglasses is a complex process

What was our final solution?

Our final solution was a SmartMirror. That simplifies a lot of the existing interactions that a user was doing within the Warby Parker store already. 

How do we know it works?

  • I ensured that we stuck to a detailed design process throughout the project to ensure a high quality end product.

  • The feedback from various academia & professors helped guide us to follow a strong design process.

  • We involved our target users throughout the process ensuring their voices were heard.

My Role

Our team decided to try to split the work as evenly as possible, with certain members being responsible for specific parts. Here are some of my contributions -

  • Performed needs analysis through methods of Contextual Inquiry, Interviews & Market Research.

  • Led most of the 'design thinking' sessions including Brainstorming & Affinity Diagramming

  • Created & revised all high-fidelity screens with Sketch

  • Facilitated most open ended interviews during needs analysis, feedback interview sessions during the ideation phase & concept evaluation interview & surveys at the final evaluation stage.

 

Team

  • Agrim Chandra

  • Yuan Duan

  • Meijia Jiang

  • Ishaani Mittal

*  *  *  *  * 

 

Research & Results

 

 
RM chart.png
 

Contextual Inquiry

IMG_7553.JPG
IMG_7551.JPG
ATL_store.png
  Physical user journey Mapping

Physical user journey Mapping

 

Affinity Diagram

The affinity diagram was constructed with notes & excerpts from various user interviews that our team had conducted. These were then arranged in progressive levels of hierarchy until a larger picture could be gathered from all this individual data points. 

The interview was collected from people whom had previously visited a Warby Parker Store. 

IMG_7296.JPG
IMG_7300.JPG
 

Word Clouds 

To look into what the users were really saying, I tried to analyze their words by building a word cloud. I built two word clouds, one from interviewees whom had gone to the Warby Parker Store. And another, from those that had gone to another eyewear companies' store. 

Screen Shot 2018-01-20 at 11.57.46 PM.png
Screen Shot 2018-01-19 at 10.50.51 PM.png
 
 

" People spoke far more positive words about their Warby Parker experience than other companies "

 
 

Research Insights

  • Users have difficulty finding frames they want

  • Users spend more time than expected in the store

  • Users looked to go with someone to the store to get second opinion

  • Users took pictures in store to get second opinions

 

*  *  *  *  * 

 

Design Process

Personas

Persona-02.jpg

User Journey

customer journey.png

Brainstorming

Our team went through a session of informed brainstorming. We settled down on 3 ideas to further explore. 

Concept brainstroming-01.png

Initial Ideas

  • Our first idea was an AR App where the user can view where specific glasses are kept at the store shelves. When the phone is held over a particular model of eyeglasses, it would give information regarding its price, material & fit.

ar.png
  • An app that helps bridge the gap between the online + offline experience. This app would help the user set optometrist & choose glasses to try on at the store later.

webapp.png
  • An Interactive Mirror would be present at the Warby Parker Store, where users could let the mirror help them choose what eyeglasses to buy.

IMG_7748.JPG
 

Idea Evaluation

wp stats.png
 

Deciding System Features

Looking at the user feedback, it was obvious that the Interactive Mirror was the most well received idea. Our team them decided to go ahead with that idea. Although we had already collectively designed some of the features of the mirror, I still wanted to look into the features of the other solutions, in case the highly received ones could be incorporated into our solution effectively. We then created a singular solution with multiple features.

Approved Features

  • Frame Recommendation

  • Sending photos to Phone

  • Frame Comparison

  • Eyeglass frame recognition on-screen

  • Calling Assistant

Rejected Features

  • Call Assistant

  • Customizing Photo Borders

  • Eye Sizing

  • Store entry notification

 

Special Design Considerations

  • As a user would have removed their eyeglasses for trying on Warby Parker frames, reduced user vision was a problem that we had to address in our design. We designed around this by having a large button area following Fitt's Law.

  • Due to the solution being an atypical mirror, we knew users would not interact with it often. And so the system needed to be based on recognition rather than recall.

  • To Include simple interactions, like only tap based gestures, than long press or elaborate ones. Due to the nature of the screen & reduced learnability.

  • As this solution employed a screen and a camera, we needed to makes sure it could be used by anyone. Accessibility played a big part to inform this solution. To think about users with wheelchairs. Our final solution was one where there would be an automatic interactive region height adjustment for people of different heights.

 

" With these design considerations, our solution wasn't just limited to Accessible design, but followed Universal design "

 

 

*  *  *  *  * 

 

Initial UI & Testing

I then created the initial UI in Sketch. Only the main screens were made initially for the sake of agility in user testing.

quickallscreens.png

To test our initial user interface, we need to get people to use the interface. But it wasn't enough to just make them use the interface. We needed to test it in as realistic setting as possible.

 

How can this solution be accurately tested, without doing so inside the Warby Parker Store?

 

Simulating In-store Experience

To help create a similar environment, I helped our team come up with a mock setup of the Warby Parker Store. We stuck Post-Its on the walls with icons of mirrors and eyeglasses to simulate the spatial setting. I then conduced few test session where I facilitated evaluation sessions and took the users through the UI. A movable flip-book of the UI served as a the mirror, depending on which mirror the user wanted to interact with. 

wp_store.png
setup1.png
IMG_8836.JPG
IMG_8132.JPG
IMG_8135.JPG
IMG_8138.JPG
IMG_8140.JPG

Design Revisions Based On User Feedback 

  • Confusion regarding the 'Recommendation' button was addressed by a redesign. Text was added to all buttons icons.

  • Users found restoring previous session via faceID login confusing. We added instructions explaining how it might be used, making users more informed.  Also made faceID login process optional, providing user greater control.

  • To address concerns regarding photos and privacy, we added a statement at the bottom of the UI. This provided users assurance as well as a suggestive call to action. An option is also given to the user to delete all photos with once click to address thier privacy concern.

di3.png

 

*  *  *  *  * 

 

Final Design

Here are all the screens of the final design. I designed all of these in Sketch & handed them over to my team for making an interactive prototype.

 
all_screens.png
 

App Features

  • Login Screen

  • Home Screen

 

  • Album Screen

ALBUM.png

 

  • Compare Screen

COMPARE.png

 

 

*  *  *  *  * 

 

Design Evaluation

Cognitive Walkthrough

To evaluate our system, we got users to go carry out two tasks on the system. We asked them to think aloud and recorded their process.

CW task senario.png

Think-Aloud Insights

  • Add a state change to indicate picture selection

  • Redesign the icon of Recommendation

  • Disable the compare button when images aren't selected

  • The users tried to select an image by clicking on it instead of selecting the lower yellow or purple button 

SUS Score Comparison

We carried out a System Usability Score (SUS), on the earlier and newer version of the Smart Mirror. We saw a strong overall improvement in the usability.

sus_both.png

 

*  *  *  *  * 

Project Reflections

 

After this project was completed, I assessed our team's final design & my role within the team - 

  1. Being able to test the system in an actual Warby Parker store setting would be really helpful in ironing out the smaller details.

  2. Due time restrictions, we had to send out a survey to multiple people that wasn't thoroughly checked. This led to a lot of insignificant and un-actionable data. We then had to send it out again, after having a few test pilot sessions of users filling in the survey. Spending more time on assessing & strengthening the survey led to a more robust one, with fewer questions and a greater precision in the data we wanted.

  3. I would like to have actually been able to construct a testable mirror prototype that could allow us to conduct a stronger test evaluation session. The current iPad testing session didn't really allow for a lot of the real world issues that occur.

  4. Overall, our team did really well on this project & we were all equally satisfied with the solution. I was personally glad to have been able to learn so much within this project!