Nike - Spiralyze Apparel Vertical Accordion 105 seconds

Nike uses a clean, mostly frictionless accordion-style checkout, with few distractions or unnecessary fields. The navigation is hidden and the gift card/promo code fields are hidden.

On each form, however, there is still room for improvement. The forms can be organized to feel more more intuitive - and thus quicker and lower-effort - by placing short fields (City, State, ZIP) on the same line, or by auto-detecting the credit card type instead of asking the user to select it.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 78% Layout: 78% Usability: 69% Usability: 69% Data Input: 41% Data Input: 41% Cart Conversion Loss -6.4%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Nike Desktop Checkout complies with 62% of our recommended best practices.

Single-Page Checkout

Nike uses a vertical accordion checkout.

Reduce Perceived Form Length

By using a vertical accordion and no interleaving of form fields, Nike forces the user to scroll often, increasing the perception of effort.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

Form ordering is intuitive and expected.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Nike leaves no clickable way back to the cart, suppressing all menus and even unlinking its logo.

Browser and Device Compatibility

Adapts well to mobile browsers and all desktop sizes

Make Progress Obvious

Nike sets apart the headers in the vertical accordion from the actual form, more clearly designating both the current step as well as future steps.

Guest Checkout Default

Nike offers guest checkout, but forces customers to select it rather than presenting it as the default.

Buttons Provide Feedback

The main buttons respond well to hover.

Highlight the Active Field

Selecting a particular field makes its border color darker than that of its counterparts.

Validate Correct Responses Inline

Provides negative feedback for incorrect or empty fields without accompanying positive feedback.

Auto-Format Numerical Fields

Provides negative feedback for incorrect or empty fields without accompanying positive feedback.

Limit Data Inputs

Form data entry is not robust; fields like credit card and zip code accept illegal characters.

Offer Help Prominently

Prominently offers both a phone number and a live chat option in the top right corner.

Display Clear Error Messages

Error is explained when hovering over field, and 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


Clear Shipping Options

Shipping information is given; however, carrier name is not provided.

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

Zip code not saved from shipping calculator.

Provide Cost Breakdown

Indicates clear breakdown from the first step.

Emphasize Free Things

Nike does not emphasize free shipping with the "FREE" label, and fails to inform about discounts.

Detect Card Type

Customer must choose the card type.

Provide Prozac

Nike fails to reassure the customer before the final purchase, instead asking him to once again review the cart.

Suppress Coupon Field

Hides the gift card option behind a box that must be checked to view the field.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2


Step 3


Step 4