Gap - Spiralyze Apparel Vertical Accordion 128 seconds

Gap implements a vertical accordion checkout that has few distractions, but poorly designed forms.

The most noticeable aspect of Gap's checkout is that it bears little aesthetic resemblance to the main website. Aside from the small logo in the header, it barely feels like the same website.

While progress is made clear by virtue of the accordion design, the checkout is lengthened by adding separate steps for gift options, non-default guest checkout, and a final review step. It is also made longer by putting each field on it's own row.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 67% Layout: 67% Usability: 56% Usability: 56% Data Input: 55% Data Input: 55% Cart Conversion Loss -6.9%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Gap Desktop Checkout complies with 59% of our recommended best practices.

Single-Page Checkout

Gap implements a five-step accordion style checkout, with stages for sign in, shipping, gift oftions, payment & promotions, and place order.

Reduce Perceived Form Length

By implementing a vertical accordion, not layering fields, and labelling form fields above, Gap forces the customer to scroll often, increasing the perception of effort.

Intuitive Layout

Mostly adheres to convention; Gap includes a "Gift" option in the middle of the accordion checkout itself, which might throw off customers.

Simplify Multi-Page Checkout

With an always-visible summary, easy traversal between steps, and prominent & consistent action buttons, Gap eases the accordion experience.

Standardize Look and Feel

Looks like a much uglier version of the main site.

Suppress Store Navigation

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

Browser and Device Compatibility

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

Make Progress Obvious

Gap makes progress obvious with a clearly-labeled accordion checkout format.

Guest Checkout Default

Gap makes customers select the guest checkout option themselves.

Buttons Provide Feedback

The main buttons do not react to user hover.

Highlight the Active Field

Active field highlighted with an orange glow.

Validate Correct Responses Inline

Gap gives no indication of either correct or incorrect form inputs.

Auto-Format Numerical Fields

No numbers, including dates, are auto-formatted.

Limit Data Inputs

Zip code and phone number fields accept illegal characters; however, credit card, security code, and expiration date restrict access.

Offer Help Prominently

Prominent offer of help present in top right via a phone service line available 18 hours/day.

Display Clear Error Messages

Error is explained clearly, and incorrect fields are highlighted

Match Shipping and Billing by Default

Asks users to confirm that billing and shipping address match automatically in an intermediate step.

Trim Unnecessary Form Fields

Includes no unnecessary form fields.

Auto-Populate Address

Fails to autopopulate 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

No specific abandonment email sent.

Provide Cost Breakdown

Indicates clear breakdown from the first step.

Emphasize Free Things

Nike writes free shipping as "FREE" in the order summary, rather than "$0.00$".

Detect Card Type

Captures and displays the card type automatically.

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

Gift card portion is tucked away in the payment stage of the accordion, and must be actively selected to display fully.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2


Step 3