Since COVID-19, the in-person experience has shifted towards a virtual one, prompting companies to use technology to adapt and evolve their online business.
Warby Parker, the eyewear retailer who disrupted the market in 2010 with designer lenses at an affordable price, once again surprises and delights their online customers with an affordable and convenient new feature: the Warby Parker Vision Testing App.
Heuristics, Competitive & Comparative Analysis, Secondary Research, User Interviews, Affinity Map, User Persona, User Flow, Problem Statement, Sketching & Design Studio, Prototyping & Iterating, Usability Testing
Since Warby Parker closing all 120 stores in March 2020, Warby Parker wanted to provide a convenient way for customers to test their eyesight and fulfill all their vision needs - all in one app. Our team was tasked with the ambitious project of redesigning the Warby Parker app and including a new feature: the online vision test.
These are concept designs for our student project during a User Experience Design Fully Immersive program at General Assembly.
From the on-set of the project, our goal was to help users to test their vision online. What we learned from users during the project was that we also needed to gain their trust in the online vision test’s accuracy. Our team worked diligently to provide a solution that allows users test their vision, shop for frames, and add their updated prescription, so that they can conveniently and confidently purchase the right lenses.
Based on our last round of testing, we had earned the trust and confidence from users that we had hoped for; users scored our app an average 9.0 ease of use rating and an 8.5 trustworthiness rating.
Warby Parker has always stood out from their competitors by offering two major selling points: convenience and cost. Now, their vision test also offers the same level of convenience that Warby Parker customers have come to expect. We created a more unified experience that allows users to test their eyesight, shop for lenses, and add their prescription - all in one place.
Here’s what the redesigned Warby Parker app included:
My team and I knew that we needed to build trust from the user, and decided to start this from the moment the user chooses to take the online vision test. I created opportunities within the design that reassure the user and communicate what they can expect, how it works, how long it will take, and what they’ll need. I also used Warby Parker’s signature friendly and quirky illustration style to make it engaging and welcoming.
We had conducted extensive secondary research to better understand what the different screenings test for, and just how it works. With this information, we used the four screenings most commonly featured. Since we learned from users that this process can be tedious, I added a progress bar on each step of the exam to keep the user updated on their status, and incorporated a pause button so they can take a break at any time.
While Warby Parker’s existing shopping app did many things well, we chose to address a few confusing areas. Since their existing home screen had an overwhelming amount of product tabs, I simplified the tab structure by placing their products at the bottom of the page in a carousel. Warby Parker’s frame size measurement feature was also hard to find, so I relocated it to work in tandem with the virtual try-on. Now, users can virtually try-on frames and learn if the frames will fit their face shape and size - all in one place.
After the user has selected the frames and specifications they’d like to purchase, they can also choose to upload the results of their latest vision test. Since prescription results can be difficult to understand, I kept the design simple and easily digestible by indicating if their prescription has increased or decreased since their previous one. Here, the user can purchase their official prescription document if they want to take their prescription to another retailer, submit their prescription, or upload their previous prescription.
My team and I were able to help Warby Parker customers feel confident while testing their vision, updating their prescription, and ordering lenses - but how exactly did we get there?
Read more about our research process 👇
Although the target user was given to us as part of the challenge, we did some independent reseaerch to understand more about the Warby Parker customer and their motivations behind purchasing Warby Parker products.
Here’s what we learned:
We interviewed 3 users who matched our target demographic (millennials) to learn how they currently get their vision tested, what pain points they’ve encountered along the way, and what could help make the in-app vision test process easier and more approachable.
After synthesizing the trends in the feedback, we learned that users said:
Based on what we’d learned from our users and all of our generative research, we were eager to dive in - but first we needed to make sure that we understood the problem. Furthermore, we needed to ensure that the user goals and business goals aligned.
The user needs a way to test their vision online, update their prescription, and order lenses so that they can conveniently and confidently purchase the right lenses.
We looked to our competitors to better understand what features were offered in the eyewear and vision testing market. We wanted to learn what users had become accustomed to, particularly when taking an online vision test.
To learn about how users felt about our designs, my team and I went through two rounds of testing - each with 3 users. We were surprised by what we heard from users. There were some major areas where users didn’t feel in control, which contributed to their hesitation and lack of trust around the online vision test. We knew we would need to double down on this as we continued to develop the designs.
This project was my first group project during this class. I was accustomed to working on my own schedule, and adjusting to working in a group setting was a big learning experience for me. Here are the lessons I learned that I’m grateful for:
We were a team that was very excited and passionate about the success of this project. Naturally, we didn’t always see eye to eye on how to best accomplish this. I learned that it’s okay to disagree, and talk through those disagreements. We ended up each bringing up very insightful and valid points that ultimately made us think through our designs more.
We only had two weeks to turn around a big scope, so there were a lot of late nights. I learned that while it’s great to push through and put in the “man hours”, taking a step back and letting your mind marinate on things is often more helpful. When we took a step back and let ourselves reflect back on the work we created, we came up with better solutions.
Special thanks to my amazing teammates Connor Dahlman, Erin Naylor, and Matthew Marcel, who made this project a great learning experience and a ton of fun.