Etsy - Spiralyze

http://www.etsy.com General Retail 3-Page 109 seconds

Etsy has one of the better checkouts we looked at, with room for improvement by adding a guest checkout option and converting to a true single-page checkout.

Etsy currently uses a smoothly designed 3-page checkout. Forms are designed effectively and intuitively - for example, the address forms are laid out in the same way we would see it written on an envelope. The checkout contains few distractions and no unnecessary fields.

Improvements could still be made - and conversions gained - by adding a guest checkout option. Currently, forced account creation is the single greatest source of friction for Etsy.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 83% Layout: 83% Usability: 75% Usability: 75% Data Input: 45% Data Input: 45% Cart Conversion Loss -5.5%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Etsy Desktop Checkout complies with 68% of our recommended best practices.

Single-Page Checkout

Etsy uses a 3-page checkout including shipping, payment, a review.

Reduce Perceived Form Length

Good use of space. Short fields, such as zip code and CVV, are placed on the same line as other fields, reducing the length of the form and, consequentially, the perceived effort. Held back by multi-page format.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

Etsy follows multi-page checkout principles, with prominent "Continue" buttons, simple navigation, and an always-visible step summary.

Standardize Look and Feel

Design fits thematically with the rest of the Etsy website.

Suppress Store Navigation

Etsy hides its entire navigation, leaving only its linked logo as a means of cart access.

Browser and Device Compatibility

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

Make Progress Obvious

Through a navigation graphic highlighting the current step, Etsy immediately informs the customer about his position in the checkout.

Guest Checkout Default

Etsy prompts customers to create an account as a means of checking out.

Buttons Provide Feedback

Main "Continue" buttons change when hovered over.

Highlight the Active Field

Active fields display a black border rather than the default gray, a clear signal.

Validate Correct Responses Inline

Etsy displays error messages corresponding to incorrect fields, but neglects validating correct responses.

Auto-Format Numerical Fields

Etsy auto-formats phone and credit card numbers.

Limit Data Inputs

Only credit card accepts data robustly.

Offer Help Prominently

No prominent offer of customer assistance.

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

No unncecessary form fields.

Auto-Populate Address

Fails to autopopulate address.

Clear Shipping Options

Shipping options not clearly presented until the end of the checkout and even then only little information is given other than cost.

Abandonment Emails

Sends specific abandonment email with clear call to action and relevant related products.

Store Zip Code from Shipping Calculator

Zip code not saved from shipping calculator.

Provide Cost Breakdown

Cost breakdown presented for the first time in the review stage at the tail-end of the checkout.

Emphasize Free Things

Does not even have an order summary present at all steps to properly indicate savings.

Detect Card Type

Recognizes card type automatically.

Provide Prozac

No reassurance before final "Submit Order" button.

Suppress Coupon Field

Gift card field is hidden behind a button in the payment section.

Checkout Walkthrough

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

Step 1

Login/Account Creation

Step 2

Shipping

Step 3

Payment

Step 4

Review

[]
[]