J Crew - Spiralyze

http://www.jcrew.com Apparel 5-Page 117 seconds

J Crew implements a five-page checkout, with pages for login, address, shipping address, shipping and gifts, billing, and review. This gives them one of the longer checkouts, appearing more effort intensive to the user. Both the login and review pages are unnecessary. They also continue to display the full navigation bar through the entire checkout, distracting users from their purchase and leading to increased cart abandonments.

On each individual page, however, J Crew does well at making progress obvious and designing each form to be intuitive, and to feel fluid and frictionless to use. This is thanks to implementations such as clear error messaging, matching billing and shipping by default, and intuitive form layouts. However, not all forms accept data as robustly as they could - for example, letters and punctuation can all be typed into numerical fields such as ZIP codes and card number fields.

This leaves J Crew with a 2.7% conversion loss. A high-impact increase in conversions could be achieved by making guest checkout the default, removing the review page, and implementing more robust form fields.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 50% Layout: 50% Usability: 63% Usability: 63% Data Input: 59% Data Input: 59% Cart Conversion Loss -7.3%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The J Crew Desktop Checkout complies with 57% of our recommended best practices.

Single-Page Checkout

J Crew implements a five-page checkout, with pages for login, address, shipping address, shipping and gifts, billing, and review.

Reduce Perceived Form Length

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

Intuitive Layout

Mostly conventional; company in the address field interrupts the normal flow from name to address.

Simplify Multi-Page Checkout

All features implemented except an easy view of the item summary as the checkout goes on.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

J Crew displays the full navigation bar throughout the entire checkout process.

Browser and Device Compatibility

Responds well to all but shrunk desktop browser window.

Make Progress Obvious

Clearly laid out navigation at top makes progress obvious.

Guest Checkout Default

J.Crew allows customers to guest checkout, but fails to make it the default option.

Buttons Provide Feedback

Buttons respond to hover by darkening their colors.

Highlight the Active Field

Fields highlighted minimally by default browser settings.

Validate Correct Responses Inline

Only negative validation provided.

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

Customer service options are prominent next to purchase summary

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

Fails to autopopulate address, but autofills city and state from the zip code.

Clear Shipping Options

Shipping information provided extremely clearly with cost and carriers.

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

If a customer makes use of the shipping calculator, the zip code field is autopopulated by his input.

Provide Cost Breakdown

J Crew displays a relatively complete price breakdown at all stages; the tax estimate is added after address information.

Emphasize Free Things

Does not highlight the discount or the free items in any way, leaving free items as "$0.00."

Detect Card Type

Automatically detects and displays card type.

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

Gift card option hidden behind a dropdown button located in the main price breakdown section; unnecessarily more visible than if it were only in payment.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2

Shipping Address

Step 3

Shipping Selection

Step 4

Biling Info

Step 5