Forever 21 - Spiralyze

http://www.forever21.com/ Apparel Vertical Accordion 190 seconds

Forever 21 implements what sort of resembles an accordion checkout, but has some unique - and high-friction - design choices.

While more or less an accordion-style checkout, Forever 21 uses pop-out forms for shipping and billing info. This, combined with the lack of any progress bar, makes the checkout feel longer and higher-effort for users.

Additionally, there are some distracting elements, including a navigation present throughout the checkout, that may lead users off the path of giving their money.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 50% Layout: 50% Usability: 38% Usability: 38% Data Input: 55% Data Input: 55% Cart Conversion Loss -9%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Forever 21 Desktop Checkout complies with 47% of our recommended best practices.

Single-Page Checkout

Forever21 implemented a multi-step accordion style checkout.

Reduce Perceived Form Length

Good layering, but labelling above and including many extra items in the checkout increases the perceived length.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

Forever21's succint accordion style checkout follows multi page principles.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Forever 21 does not suppress its default menu in the checkout.

Browser and Device Compatibility

Responds well to all but shrunk desktop browser window.

Make Progress Obvious

Forever 21 offers no navigation or indication of future steps until the current step has been completed.

Guest Checkout Default

Forever 21 requires customers to create an account.

Buttons Provide Feedback

Buttons do not respond to user interaction.

Highlight the Active Field

Active field highlighted with a darker border.

Validate Correct Responses Inline

Forever 21 does not validate customer form responses.

Auto-Format Numerical Fields

No numbers are auto-formatted.

Limit Data Inputs

Credit card and phone number fields restrict illegal character access.

Auto-Fill Compatibility

Somewhat compatible; state must be selected separately.

Offer Help Prominently

No prominent offer of help present in Forever 21's checkout.

Display Clear Error Messages

Error is only noticed if field is empty, or on address validation pop-up.

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.

Clear Shipping Options

Shipping information is given clearly in the corresponding section; however, carrier name is not provided.

Abandonment Emails

No post-purchase email was received.

Store Zip Code from Shipping Calculator

Zip code not saved from store selector.

Provide Cost Breakdown

Displays the full price breakdown from the first step.

Emphasize Free Things

Emphasizes discounts and free items in different colored, capitalized fonts.

Detect Card Type

Captures card type, but fails to indicate which type immediately; only visible after user finishes filling out payment information.

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

Hides gift code area outside of the payment section behind a link.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2

Shipping Info

Step 3

Payment

[]
[]
[]