Sephora - Spiralyze Specialty/Other Vertical Accordion 100 seconds

Sephora is another example of a clean accordion-style checkout inhibited by forced account creation.

Forms are well-organized, and aside from a visible promo code field is mostly absent of distractions and necessary fields. But Sephora not only increases friction by forcing account creation, they do it in a distinctly irritating way by putting the account creation step at the end of the checkout.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 83% Layout: 83% Usability: 63% Usability: 63% Data Input: 59% Data Input: 59% Cart Conversion Loss -5.4%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Sephora Desktop Checkout complies with 68% of our recommended best practices.

Single-Page Checkout

Sephora implemented a five-pronged accordion style checkout, with stages for shipping address, shipping options, payment method, account creation, and reviewing the order.

Reduce Perceived Form Length

Sephora layers elements very well and uses subtly colored form fields to reduce the perceived user effort.

Intuitive Layout

Form ordering is mostly intuitive; to facilitate autopopulation, zip is placed ahead of city and state.

Simplify Multi-Page Checkout

Form ordering is mostly intuitive; to facilitate autopopulation, zip is placed ahead of city and state.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Sephora supresses its menu, leaving only its logo as a means of exit.

Browser and Device Compatibility

Adapts well to mobile browsers and all desktop sizes.

Make Progress Obvious

A five-stage accordion process with clearly labeled steps is easily navigable, making progress obvious.

Guest Checkout Default

Sephora mandates account creation.

Buttons Provide Feedback

Buttons react to hover.

Highlight the Active Field

Accentuates the active field with a darker border.

Validate Correct Responses Inline

No validation of responses whatsoever.

Auto-Format Numerical Fields

No validation of responses whatsoever.

Limit Data Inputs

Only the phone number field properly restricts access to illegal characters. Others - zip code, credit card, and CVV, all accept illegal characters.

Offer Help Prominently

The lack of clutter in Sephora's checkout makes its offer of help in the top right (a phone line) extremely clear.

Display Clear Error Messages

Error is not always explained clearly, but incorrect fields are highlighted.

Match Shipping and Billing by Default

Matches shipping and billing addresses by default.

Trim Unnecessary Form Fields

Includes no unnecessary form fields.

Auto-Populate Address

Fails to autopopulate address, but autofills city and state from the zip code.

Clear Shipping Options

Clear shipping options, with cost, exact day and time, carrier, and method presented.

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

Zip code not saved from store selector.

Provide Cost Breakdown

Clearly describes the cost and all associated components from the very first step.

Emphasize Free Things

Writes "Free" and mentions the discount, but does not highlight it enough.

Detect Card Type

Writes "Free" and mentions the discount, but does not highlight it enough.

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

Gift/reward card entry hidden behind a checkbox.

Checkout Walkthrough

Click the thumbnails for an annotated walkthrough of Sephora Desktop Checkout's notable features.

Step 1


Step 2

Shipping Info

Step 3

Shipping Options

Step 4

Payment Method

Step 5

Account Creation

Step 6