Warby Parker
Vision Test App Design

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.

Role
In a team of 4, my role was the Project Manager and Designer.  I led the design strategy and UI for the grayscale, high fidelity, and final designs. I worked with one other Designer, who assisted setting up screens and prototyping.
Methods Used

Heuristics, Competitive & Comparative Analysis, Secondary Research, User Interviews, Affinity Map, User Persona, User Flow, Problem Statement, Sketching & Design Studio, Prototyping & Iterating, Usability Testing

Tools
Sketchbook App, Figma, Google Surveys, Zoom
Timeline
2-Week Sprint (Mar 2021 - Apr 2021)

Challenge 👀

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.

Outcome 😎

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.

The Solution

I can see clearly now 🤓

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:

View Prototype

Vision Test Onboarding

Onboarding process once the user opens the app and chooses to take an online vision test

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.

Vision Test

Online vision test that includes screenings most commonly featured in typical eye exams

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.

Shopping Experience

Warby Parker’s in-app shopping with minor adjustments made to provide an optimal and convenient shopping experience

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.

Adding Your Prescription

The process the user takes to select their frame specifications and upload the results from their latest vision test.

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 👇

Competitive & Comparative Analysis

A Good Look at the Competition 🧐

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.

Key Findings

Target User & Independent Research

What we’re seeing in users 🥸

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:

Task / Goal Setting & Management
User Interviews & Affinity Map

What do users want? 🙏

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:

"I want to customize my dashboard and analytics"
"I want to manage my event tasks easily."
"I want to track more types of data, primarily:"

Key Takeaways

01
We needed to convince users to shift behavior from in-person to virtual
02
We needed to build trust with the user so they feel confident in their purchase
03
We needed to make the entire process as convenient as possible
Problem Statement

Balancing the user & Warby Parker ⚖️

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.

Problem Statement

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.

Design Studio & Sketches

Seeing eye to eye with design concepts 🤝

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.

Key Concepts

01
Continuously communicating ease of use and accuracy
02
Helping the user feel in control by showing them all their options
03
Personable and playful visual style and written tone
User Feedback & Improvements

Building our vision 🔨

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 feels like an ad

I already forgot the instructions

Where’s the vision test?

Next Steps & Reflection

Hindsight being 20-20 🤔

Next Steps

If I had more time to work on the designs, I’d love to:

01
Add a virtual assistance feature to each page
02
Add an FAQ page
03
Make the style quiz functional

Reflection

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:

It’s okay to disagree

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.

Sleep on it

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.

Next Up

Five to Nine

Combining customization and deeper insights in an events platform

Fragrance Plants

Enriching the online plant shopping experience to grow a boutique plant store's online business