Kohl's - Spiralyze

http://www.kohls.com/ Apparel 3-Page 138 seconds

Kohl's implements a mostly straightforward 3-page checkout that does some things well and some things poorly.

Some distractions are removed - the navigation is gone, and promo codes are smartly hidden behind a button. On the other hand, the payment page is topped by a Gift Card field, and the user is forced to select their own payment method. The default card choice is actually a Kohl's Charge card, which is a break from convention sure to increase friction.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 67% Layout: 67% Usability: 44% Usability: 44% Data Input: 50% Data Input: 50% Cart Conversion Loss -7.9%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Kohl's Desktop Checkout complies with 53% of our recommended best practices.

Single-Page Checkout

Kohl's implements a three page checkout process, with separate webpages for shipping information, payment information, and reviewing & placing the order.

Reduce Perceived Form Length

Kohls layers elements well (like putting city, state, and zip on their own line), but crowds the page with many elements, increasing the perceived form length.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

With obvious continue buttons, an easy navigation, and a one-click way to hop between checkout stages, Kohl's wins at multi-page usability.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Kohl's suppresses its main menu, but leaves a text "Continue Shopping" option - less subtle than an icon or linked logo.

Browser and Device Compatibility

Good mobile site and desktop is good for all but small/low-res browser windows

Make Progress Obvious

A top navigation bar indicating the current and remaining checkout steps makes progress obvious.

Guest Checkout Default

Kohl's allows for a recognizable guest checkout option, but forces customers to actively choose it.

Buttons Provide Feedback

Kohl's "Continue" buttons do not react to user hover.

Highlight the Active Field

Fails to highlight the active field in any manner.

Validate Correct Responses Inline

Kohl's neither informs about correct fields nor missing, incorrect ones.

Auto-Format Numerical Fields

Only formats phone number automatically, not credit card.

Limit Data Inputs

Form field automatically discards unnecessary spaces/punctuation.

Auto-Fill Compatibility

Somewhat compatible; customers must autofill some fields (address and zip) separately as they are not linked to the entire form. Phone number is not autofillable.

Offer Help Prominently

Kohls offers a small link ("Questions?") in the top left as help. Though somewhat prominent, customers are forced to go to another page to obtain phone number/chat information.

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.

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 clear breakdown from the first step.

Emphasize Free Things

Emphasized free shipping by coloring it green and displaying "FREE"; also clearly pointed out savings.

Detect Card Type

Users must select their card type from a dropdown.

Provide Prozac

Kohl's fails to reassure the customer when they press the "Place Order" button, instead asking customers to review the final page again.

Suppress Coupon Field

Hides all discount code entry behind an "Apply" button where the entry field remains hidden,

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2


Step 3


Step 4