sephora-lead.jpg

Company: Sephora 

Role: Lead UX Designer

Team: 2 Designers / 2 PMs

Responsibilities: User Research, Ideations, Sketches, User flows, Wireframe, Usability testing, Prototyping, Interaction design.

Sephora checkout redesign

Sephora is an industrial leading beauty chain in the U.S. Although it has a solid amount of customer base, company's mobile app checkout system had been always an issue with its poor design and confusing architecture. I joint the team working closely with product managers and business stakeholders to ideate and iterate on redesigning its checkout flow. 

We interviewed users, studied best practices, completed over 50 benchmark studies of competitors’ checkout flow, and conducted usability testings with Sephora's current customers.  


    The Problem

    score 250 before redesign

    Sephora's online Checkout UX scored an overall performance of 251 on the Baymard Instituted'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
      Baymard Instituted's cart and checkout benchmark in 2012 .

    Baymard Instituted's cart and checkout benchmark in 2012.


    The result

    score 575 after redesign

    The new checkout architecture and flow scored 575 with a State of the Art score in 5 categories:

    • Order Review
    • User Attention & Interactions
    • Form design & Features
    • Field Design & Features
    • Default Values & Autocomplete

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

    • Sephora ranked #10 out of 50 sites 
    • Overall score increased by 43%
    • Sephora earned "State of the Art" designations in 5 categories
    • Sephora's new checkout flow adhered to 74 usability guidelines established by Baymard Institutes
       Baymard Instituted's cart and checkout benchmark (most recent version).

     Baymard Instituted's cart and checkout benchmark (most recent version).

     

    Methodology

    Overview

    We talked with Sephora current customers about their online shopping experiences and their pain points; specifically looked at how they interacted with the native app and mobile web using cart and checkout flow. We looked for solutions to improve Sephora's checkout UX to reduce any shopping cart or checkout abandonment. 

    Our research included areas such as the shopping cart, users privacy concerns, form field usability, gifting features, the content, flow and layout of checkout pages, 3rd party payments and validation errors, etc. 

    We also applied the research from Baymard Institute to understand typical HCI among customers in checkout and cutting-edge best practices, as well as the Baymard's 134 checkout usability guidelines that were used as the scoring parameters. In order to learn more deeply about our customers'  most frustration points during the checkout progress, we sit down with our analytic team to study and analyze the data for drop-offs and abandoned carts. Then used the data to lead the design to focus on those significant problem areas. 

     

    Benchmarking

    We conducted benchmark studies of checkout flow from over 50 industrial leading eCommerce sites such as Macy’s, Nordstroms, JCrew, Gap, Westelm, Crate & Barrel, Target and Walmart and startups like Warby Parker to analyze their shopping cart performance, and list out which features were working well and which were not. 


    Usability testing

    user testing1.png
    user testing2.png

    Our design iterations were based on usability testing with 75 subjects and 2 clickable prototypes. We conducted 3 rounds of A/B testing with 20 actual Sephora customers. We provided our testing group 2 different versions of “checkout billing/shipping” designs (Accordion and Wizard), 3 alternate “Captcha” versions, and 2 different versions of “Cart” designs.

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

    The purpose of the testing was to verify the new checkout design solutions and collect users' feedback. We used the key takeaways from the testing to iterate the design. 

     

    User Group Requirement

    • 12 users in total (4 floaters)
    • New Users for desktop and mobile: 7 (58%)
    • Current Beauty Insider Users for desktop and mobile: 5 (42%)
    • All 12 users should be mobile shoppers within last 6 months
    • All 12 users need to experience shopping online at competitor sites (Ulta, Macy's, etc.)

    Testing Key Takeaways

    Cross-platform Takeaways

    • All alts were "simple" and "expected".
    • All participants stated that a site should allow for guest checkout.
    • Account creation towards the end of checkout is appropriate and expected.
    • All users were familiar, and accepting, of captcha.
    • No one called out the dimmed accordion steps or the progress bar on wizard.
    • New sign in (single email field for all users) was understood and welcomed.
    • Participants realize mobile should be simple fast and easy. Desktop is more for exploring. 
    • Basket card sort activity: priorities were the same for mobile and desktop, however, users expect less content on mobile so that they can focus on checking out quickly. 
     

    Desktop Alts Specific Takeaways

    • Accordion checkout design was the clear winner. The one page design and animation made them feel like they were making progress.

    • Accordion basket with the promo tabs was a clear winner.

    • User didn’t mind being show products in basket (it was expected). But, they all assumed Beauty Grabs is recommended specifically for them (or "use it with” based on items in cart).

    • Users assumed My Loves was based on past purchases or things they loved on the site and recognized that it was different than Beauty Grabs

    • > UX recommended to show past purchases that may need to be re-ordered.

    • Sign in as a Lightbox over basket was preferred by all.

    • When editing an address almost all users preferred showing saved addresses on the screen with an “add new address” CTA vs Clicking to view saved addresses.

    • No one noticed if the right rail basket was showing/hidden. However, when looking at the printouts, they liked the ability to see all items while checking out.

    • > UX recommendation: keep it closed until review step and/or A/B test. When the right rail basket was open users wanted to see to show ALL items vs. having to scroll through them.

    • Live site was thought to have a confusing layout with redundant information.

     

     

     

    • Mobile Alts Mobile Specific Takeaways

    • Both prototype (Accordion and Wizard) alts and production were judged to be the same and therefore there was no preferences of experience.

    • Accordion checkout design was the clear winner. The one page design and animation made them feel like they were making progress.

    • Accordion basket with the promo tabs was a clear winner.

    • User "edit" button instead of a carrot to take them to edit detail page is preferred by all participants.  

    • Users assumed My Loves was based on past purchases or things they loved on the site and recognized that it was different than Beauty Grabs > UX recommended to show past purchases that may need to be re-ordered.


    OTHER Projects