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.
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.
* * * * *
Research & Results
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.
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.
" People spoke far more positive words about their Warby Parker experience than other companies "
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
* * * * *
Our team went through a session of informed brainstorming. We settled down on 3 ideas to further explore.
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.
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.
An Interactive Mirror would be present at the Warby Parker Store, where users could let the mirror help them choose what eyeglasses to buy.
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.
Sending photos to Phone
Eyeglass frame recognition on-screen
Customizing Photo Borders
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.
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.
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.
* * * * *
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.
* * * * *
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.
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.
* * * * *
After this project was completed, I assessed our team's final design & my role within the team -
Being able to test the system in an actual Warby Parker store setting would be really helpful in ironing out the smaller details.
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.
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.
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!