REI - Spiralyze

https://www.rei.com/ Specialty/Other Vertical Accordion 125 seconds

REI uses a multi-step accordion checkout that appears well organized and quick for users.

Most room for improvement is in the individual fields, There is no live validation of responses, and no numerical inputs are auto-formatted. Credit card, phone number, zip code, and CVV form fields all accept punctuation and spaces as valid characters, making actual data input a sub-optimal experience.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 78% Layout: 78% Usability: 56% Usability: 56% Data Input: 45% Data Input: 45% Cart Conversion Loss -6.8%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The REI Desktop Checkout complies with 60% of our recommended best practices.

Single-Page Checkout

REI implemented a multi-step accordion style checkout.

Reduce Perceived Form Length

REI layers fields well, but labels them above, forcing a user to scroll.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

REI simplifies the multi-stage checkout with prominent continue buttons, a simple navigation, and an always-visible step summary.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

REI leaves no clickable way back to the cart, suppressing all menus.

Browser and Device Compatibility

Adapts well to mobile browsers and stretched-out desktop browsers.

Make Progress Obvious

REI uses an accordion checkout, but the length of the form and the very subtle separation between accordion stages makes it difficult to see progress.

Guest Checkout Default

REI prompts customers to choose between creating an account or checking out as a guest, rather simply than preselecting the latter.

Buttons Provide Feedback

Buttons respond to hover by softening their colors.

Highlight the Active Field

Fields highlighted minimally by default browser settings.

Validate Correct Responses Inline

No validation of responses whatsoever.

Auto-Format Numerical Fields

No numbers are auto-formatted.

Limit Data Inputs

Credit card, phone number, zip code, and CVV form fields all accept punctuation and spaces as valid characters.

Offer Help Prominently

Live chat and helpline are prominent in footer.

Display Clear Error Messages

Error is explained clearly, and incorrect fields are highlighted

Match Shipping and Billing by Default

Matches shipping and billing addresses only by prompting user to select "Use this address for billing".

Trim Unnecessary Form Fields

Includes the unnecessary middle initial field.

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

Zip code not saved from store selector.

Provide Cost Breakdown

Indicates full price breakdown, with estimates for tax and shipping, throughout the entirety of the checkout.

Emphasize Free Things

Writes "Free" and mentions the discount.

Detect Card Type

Automatically detects and displays card type.

Provide Prozac

Includes blurb about guaranteed satisfaction and generous year-long returns policy; could be positioned more strategically to correlate with the "Submit order" button.

Suppress Coupon Field

Presents gift card and coupon code fields very blatantly as the first items in the payment section with the fields already visible.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2

Shipping Address

Step 3

Shipping Method

Step 4

Billing Address

Step 5

Payment

Step 6

Review/Submit