Client: Sephora
Role: Sr Director of UX
Size: 2 Designers/ 2 PMs
Duration: 4 months

Sephora Checkout Redesign

Though beauty chain Sephora is widely viewed as a disruptor when it comes to digital retailing, one place where they lagged behind other eCommerce sites was in the poorly designed, badly architected and overall confusing checkout flow. I lead the UX design team’s efforts to research user pain points, understand best practices, conduct benchmark studies of our competitors’ checkout flow, and work closely with product management to ideate and iterate on solutions.

The results were fantastic.

After the redesign, according to the Baymard Institute’s Benchmark Study on eCommerce Checkout flows,

  • We ranked #10 out of 50 sites they studied
  • Our overall score increased by 43%
  • We earned ‘State of the Art’ designations in 5 categories
  • Our new checkout flow adhered to 74 usability guidelines established by Baymard Institute

The Problem

Sephora’s Checkout UX scored an overall performance of 251 on the Baymard Institute’s cart and checkout benchmark in 2012.

Some of Sephora’s biggest checkout usability issues were due to

  • Poor Layout
  • Broken Focus
  • Broken Data Input
250
Baymard score before redesign
Sephora Checkout 2012

The Result

After the redesign, our newly UXed checkout architecture and flow scored 575 with a State of the Art score in 5 categories.

State of the Art
  • Order Review
  • User Attention & Interactions
  • Form Design & Features
  • Field Design & Features
  • Default Values & Autocomplete
575
Baymard score after redesign

Industry Comparison: Health & Beauty

Overall Sephora ranks 10 when comparing their checkout UX performance against the 49 other major US e-commerce sites in the benchmark.

Sephora is the best performing site in the Health & Beauty industry.

Sephora Checkout Flow

Methodology

Overview

We specifically looked at how Sephora could improve the shopping cart and checkout flow to ensure fewer users abandon their purchase. Our research included areas such the shopping cart, users privacy concerns, form field usability, gifting features, the flow and layout of checkout pages, 3rd party payments, validation errors, etc.

  • Conducted benchmark studies of checkout flows from Macy’s, Nordstroms, Crate & Barrel and Walgreens and startups like Warby Parker to analyze which features were working and which were not.
  • Used research by Baymard Institute to understand typical HCI among customers in checkout and cutting-edge best practices.
  • Analyzed our analytics data for drop-offs and abandoned carts to focus our redesign attention on those significant problem spots.
  • Iterated and tested wires and prototypes to validate design decisions, resulting in an IA and UX that we were confident would increase customer conversion.
  • My team worked closely with product management and the business stakeholders to ensure that we were balancing user desires with business goals.

 Usability Testing

One part of this research was based on usability testing with 75 subjects and a clickable (but not fully functional prototype) following the “Think Aloud” protocol. The usability study tasked users to complete a purchase for multiple different types of products from “shopping cart” to “completed sale”.

The duration of each subject’s test session was ~ 1 hour long.

The aim was to examine the full breadth of the user’s checkout behavior, and present the issues which are most likely to cause checkout abandonments. And as importantly, to present the solutions and validate checkout design patterns that during testing were verified to cause a high performing checkout flow.

Benchmarking

The other part of this research was a comprehensive usability benchmark of Sephora’s main competitors, along with examination of non-competitors who were pushing the envelope in Checkout flow redesign.

Using the 134 checkout usability guidelines from the large-scale Baymard usability tests as the review heuristics and scoring parameters, we noted those areas where Sephora’s flow was sub-par. This gave us our game plan for the first iteration of the redesign.

Quantitative

We conducted 3 rounds of A/B testing with actual Sephora customers:

  • Two different versions of ‘checkout billing/shipping’ designs
  • Three alternate ‘Captcha’ versions
  • Two different versions of ‘cart’ designs

We also analyzed quantitative data collected by Google Analytics.

Sephora Checkout Flow

Get the Full Case Study

CASE STUDY

Strong Process

Though it may be counterintuitive, process is the key to creative thinking. When the design team understands the stages a design will travel as it is researched, ideated, conceptualized, tested and iterated, they are free to expand their creativity within those boundaries.

Excellent Results

The results of my efforts built a team of 7 designers who handle the entirety of the Sephora digital product design. The processes ensured effective ideation through delivery to engineering. It has ensured a world-wide brand is known for it’s digital forward thinking.