Coastal Contacts Web Redesign

Coastal Contacts Web Redesign

Project Brief

Despite of the increasing popularity of eCommerce, buying eyeglasses online is still a novice concept for many customers. Our research has shown that over 40% of the shoppers are unaware that they can purchase eyeglasses online. Hence, the challenge is to remove those associated barriers for our first time visitors as well as improving experience for our existing customers.

Coastal Contacts has built many shopping tools to reduce the friction of buying eyeglasses online. The tools range from finding the proper fitting frames to recommending frames that are based on customer’s fashion preferences. However, the visibility of the tools is low because they are scattered, which creates an unnecessary barrier for our customers.

Objectives

As the UX designer, I was tasked to lead this project. There are three business objectives:

  1. To prioritize the shopping tools on the homepage (desktop and mobile) by using the User Journey framework
  2. To bring visibility of the existing online eyeglasses shopping tools in a cohesive manner
  3. To emphasize the fitting tools on the product page

Process

Understanding the customers’ shopping process is essential for the marketing team to have a meaningful redesign. Using the User Journey framework  (see below) that I have created, the marketing team is able to identify the five stages of purchasing eyewear. Particularly, we would like to address the concerns and barriers of buying eyewear online for first time visitors. 

UsersJourney_toLookBetter *The detail is blurred out due to NDA.*

The marketing team had an extensive discussion about each stage of the User Journey framework prior to sketching out ideas.
discussion1
By sketching out the ideas, the marketing team was able to quickly iterate various designs and clearly communicate our ideas.
sketch1
This redesign was set to be released in one week prior to the Christmas. The rationale was that the marketing team wanted to emphasize values rather than the sales-driven message for the holiday season. Below is the complete wireframe documentation (desktop and mobile) for the homepage, category homepage, and product page.

 

sample wireframe

 

Result

The redesign is a success because the sales were stable despite removing of all sales promotions. The average order size has also increased 15% due to the redesign.

coastalHPRedesign1

coastalHPRedesign2
mobile_homeHP

 

Visit Site

 

Credits
Billy So in collaboration with Topp Brocales and Natalie Clark.

  • interface design
  • persona
  • user journeys

Related Work