Product Designer
App-Redesign-Thumbnail.png

1-800 Contacts App Redesign

    

    

    

 

 

 

 

 

 

 

  

     

   

 

 

1-800 CONTACTS APP

 

PROJECT

August 2015

For over 20 years, 1-800 Contacts has prided itself in providing its customers with the easiest and fastest way to order contacts. Their app, launched in 2012, focuses on just that–streamlining the ordering process by providing features that help make the whole experience fast and easy. With over 1 million app downloads and orders, the app had seen great success; but the team wanted an improved and even more user-friendly design. I was brought on as the lead ux designer for this project and together with the app development team, we began our collaboration. 

Before:

Observations:
– App felt busy and hard to scan at times
– Research previously done showed that customers more quickly found their box by viewing a picture of their box instead of the actual name–and images felt really small. 

Possible Solutions:
– Improve layout and readability by using more white space and use a grid to ensure elements line up nicely. 
– Show bigger images of products. 

 

 

PROCESS

I started out by sketching out ideas and possible solutions. Each week I would present my designs to our team which consisted of myself, art directors and lead developers. Each chunk of flow in the app would go through about 2-3 iterations. 

 

 

FINAL DESIGNS

 
All previous distractions were removed from the home page so that the user is focused on selecting one of the two options. 

All previous distractions were removed from the home page so that the user is focused on selecting one of the two options. 

In order to help our users find their box faster, the ability to use a filter was added and product images were made bigger.

In order to help our users find their box faster, the ability to use a filter was added and product images were made bigger.

Dropdown menus for prescription values were made bigger and spaced out so that this page didn't feel so crowded. The screen was also split down the middle so that you can focus on each eye at a time and see the values side by side.  

Dropdown menus for prescription values were made bigger and spaced out so that this page didn't feel so crowded. The screen was also split down the middle so that you can focus on each eye at a time and see the values side by side.  

In addition to allowing users to select how many boxes they wanted to order, supply-specific quantities were added so that users had a clear understanding of how long their lenses would last them. 

In addition to allowing users to select how many boxes they wanted to order, supply-specific quantities were added so that users had a clear understanding of how long their lenses would last them. 

Layout for this page was improved by spacing out elements more so that results were easier to scan. Each doctor/eye clinic information was broken down into 3 lines so that all of their information would be visible at first glance. 

Layout for this page was improved by spacing out elements more so that results were easier to scan. Each doctor/eye clinic information was broken down into 3 lines so that all of their information would be visible at first glance. 

Another busy page, the cart was given a lot more white space so that it didn't feel so heavy. Instead of just listing the products, I organized them by person so that a user with contacts for multiple people could easily see who they were getting contacts for.

Another busy page, the cart was given a lot more white space so that it didn't feel so heavy. Instead of just listing the products, I organized them by person so that a user with contacts for multiple people could easily see who they were getting contacts for.

Apple Pay was added for iOS users and Google Wallet was added for Android users.

Apple Pay was added for iOS users and Google Wallet was added for Android users.

If Apple Pay/Google Wallet wasn't available or used by the user, then other options were provided like scanning your card or paying with Paypal.

If Apple Pay/Google Wallet wasn't available or used by the user, then other options were provided like scanning your card or paying with Paypal.

When manually entering a card for payment, I took advantage of a feature that would automatically move the user through the form fields instead of having them tap into the next form field. (i.e. when the app recognized that 16 digits were entered for the card number, it automatically moved them to the expiration date field). An image of the user's type of card is also shown after the first 4 digits are entered.

When manually entering a card for payment, I took advantage of a feature that would automatically move the user through the form fields instead of having them tap into the next form field. (i.e. when the app recognized that 16 digits were entered for the card number, it automatically moved them to the expiration date field). An image of the user's type of card is also shown after the first 4 digits are entered.

Asking for the user's zip code before state or city takes advantage of a feature that is able to automatically populate the city and state based on the zip code. This allows the user to skip 2 form fields, thus moving them through the flow much faster. 

Asking for the user's zip code before state or city takes advantage of a feature that is able to automatically populate the city and state based on the zip code. This allows the user to skip 2 form fields, thus moving them through the flow much faster. 

The Thank You page was divided up so that the content would be easier to consume. I also added the "What about my rebate?" section so that users wouldn't be left in the dark as to what to do concerning their rebate. 

The Thank You page was divided up so that the content would be easier to consume. I also added the "What about my rebate?" section so that users wouldn't be left in the dark as to what to do concerning their rebate. 

The old app logo tried to fit the entire 1-800 Contacts logo into the square but it was getting lost in the midst of all surrounding apps once on the screen. The logo was simplified to just the "8" in the 1-800 Contacts logo which also resembles a contact lens case.

The old app logo tried to fit the entire 1-800 Contacts logo into the square but it was getting lost in the midst of all surrounding apps once on the screen. The logo was simplified to just the "8" in the 1-800 Contacts logo which also resembles a contact lens case.

 

RESULTS

 

The app team prides itself in being able to provide an app with a user flow and features that move the user quickly through the app. I believe this is what has given the app a 5-star rating on the Apple App Store and a 4.7-star rating on the Google Play Store. Our user reviews are constantly raving about how easy and fast it is to order. 

From the time the redesign was released in early 2015, through the end of Q4 2016, the app had a 111% increase in orders and a 174% increase in revenue. In September 2016 the app broke its own record with $1.1 million in revenue in a single day. 


 

COMMERCIAL

 

Several commercials have been created for the 1-800 Contacts app, all focusing on how easy and fast it is. Here is one of them: