Staples - Spiralyze

http://www.staples.com/ Electronics Vertical Accordion 79 seconds

Staples has implemented one of the fastest checkouts we bench-marked, doing many things right.

The two-stage accordion has no extra fields or distractions, and is well organized with appropriately layered fields - for example, the address is organized the same way we see it written on an envelope. Progress is made clear by virtue of the layout.

The only source of significant friction is the separate page for login/guest selection. Making guest checkout the default would eliminate that friction and further improve the Staples checkout.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 83% Layout: 83% Usability: 75% Usability: 75% Data Input: 73% Data Input: 73% Cart Conversion Loss -3.9%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Staples Desktop Checkout complies with 77% of our recommended best practices.

Single-Page Checkout

Staples implements a 2-panel accordion style checkout, with stages for address information and payment & billing information.

Reduce Perceived Form Length

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

Intuitive Layout

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

Simplify Multi-Page Checkout

Staples 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

Staples supresses its entire default menu, leaving only its logo as a link back.

Browser and Device Compatibility

Responds well to all but shrunk desktop browser window.

Make Progress Obvious

Staples' two-step accordion is fast and inherently makes progress obvious.

Guest Checkout Default

Staples 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.

Highlight the Active Field

Fields highlighted minimally by default browser settings.

Validate Correct Responses Inline

Staples only error corrects on some fields (email and phone), and never validates correct responses.

Auto-Format Numerical Fields

Credit card and phone number autoformatted.

Limit Data Inputs

Zip code, phone number, credit card, and CVV fields only accept valid characters, and restrict the number of characters if appropriate.

Auto-Fill Compatibility

Somewhat compatible; address must be autofilled separately, and phone number is autofilled incorrectly.

Offer Help Prominently

Clear live chat option glued onto the right side of the screen.

Display Clear Error Messages

Error is explained clearly, 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

Google autopopulation features present.

Clear Shipping Options

Shipping options not clearly presented to the customer at any phase of the checkout.

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

Zip code not saved from store selector.

Provide Cost Breakdown

Cost breakdown indicated in the right sidebar at all steps.

Emphasize Free Things

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

Detect Card Type

Automatically detects and displays card type.

Provide Prozac

Staples includes reassuring text with the order: "Checkout is secure" accompanied by a lock icon.

Suppress Coupon Field

Coupon code is not even present in the payment tab; it is located in a completely different place (making it harder to find), and hidden behind a link. Overall, the coupon area does not draw attention to itself.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2

Shipping

Step 3

Payment

[]
[]
[]