JC Penney - Spiralyze

http://www.jcpenney.com/ Apparel 3-Page 109 seconds

JCPenney implements a three-step checkout process and successfully removes a few distractions (navigation bar and extra information) from the checkout. Forms are very well layered reducing percieved effort.

Improvements could still be made by converting to a single-page checkout, using responsive buttons, making the gift card option less prominent, and by making the guest checkout option default.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 83% Layout: 83% Usability: 63% Usability: 63% Data Input: 64% Data Input: 64% Cart Conversion Loss -5.1%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The JC Penny Desktop Checkout complies with 70% of our recommended best practices.

Single-Page Checkout

JCPenney implemented a three-step checkout, with separate pages for shipping, payment, and reviewing the order.

Reduce Perceived Form Length

JCPenney layers elements very well, keeping individual accordion fields short and reducing the perceived effort.

Intuitive Layout

Form ordering is mostly intuitive, except for the country field which opens the form.

Simplify Multi-Page Checkout

JCPenney 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

Only the logo and a bag icon remain as exit mechanisms.

Browser and Device Compatibility

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

Make Progress Obvious

A clearly labeled progress bar makes progress obvious.

Guest Checkout Default

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

Buttons Provide Feedback

The main buttons do not react to user hover.

Highlight the Active Field

Fails to highlight the active field in any manner.

Validate Correct Responses Inline

JCPenney only error corrects on some fields (not including street address, state, or phone) and identifies correct fields.

Auto-Format Numerical Fields

Numbers are auto-formatted.

Limit Data Inputs

Only CVV and zip code form fields accept punctuation, spaces, and other non-numerical characters as valid characters.

Auto-Fill Compatibility

Form is autofill compatible.

Offer Help Prominently

JCPenney Chat popup window opens as the customer fills out the checkout, making the offer of help very clear.

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

Autopopulates all aspects of the address (i.e. city and state from the zip code).

Clear Shipping Options

Shipping information is given, stated clearly at the shipping step itself; however, carrier name is not provided.

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

Zip code not saved from shipping calculator.

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

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

The gift card option is hidden behind a checkbox, but it is the first option available in payment therefore making it stand out more.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2


Step 3


Step 4