Macy's - Spiralyze

http://www.macys.com Home Goods Vertical Accordion 139 seconds

Macy's two-panel, vertical accordion checkout initially seemingly foreshadows a rapid experience. However, due to poor layering and unnecessary repetition - the entirety of the billing address field, which could match shipping by default - the long individual panels unnecessarily lengthen the checkout experience.

Macy's fails to accelerate with any optimizations like type-ahead address completion, and under-utilizes a summary sidebar, leaving it devoid of attractive cart pictures. As a result, the process feels long, bulky, and text-laden, creating a sub-optimal checkout.

By cleaning up the individual forms and ridding the checkout of repeated inputs, Macy's could speed up their checkout and take advantage of an otherwise quick accordion checkout.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 67% Layout: 67% Usability: 63% Usability: 63% Data Input: 32% Data Input: 32% Cart Conversion Loss -7.9%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Macy's Desktop Checkout complies with 54% of our recommended best practices.

Single-Page Checkout

Macy's implements a two panel (address and payment) vertical accordion style checkout, a quasi-single-page experience. However, separate pages for login and actually submitting the order sandwich the main steps, lengthening the process.

Reduce Perceived Form Length

By using only one column and poor layering - security code ends up on its own line - Macy's increases form length.

Intuitive Layout

Macy's form is mostly intuitive. However, contact information currently offered in the payment page, like phone number and email, belongs in the address section alongside the rest of the personal details.

Simplify Multi-Page Checkout

Macy's features prominent "Continue" buttons, a visible step summary, and an easy way to access previous steps with large "Edit" buttons.

Standardize Look and Feel

Macy's font and red accent choices thematically mirror its main website.

Suppress Store Navigation

Macy's suppresses the default menu bar and unlinks its logo, restricting ways to exit the checkout.

Browser and Device Compatibility

Macy's website resizes dynamically for all browser sizes.

Make Progress Obvious

Macy's long accordion panels make the entirety of the checkout difficult to see at a glance, restricting the customer's awareness about his relative position in the process.

Guest Checkout Default

Macy's allows for a guest checkout, but fails to make it the default option.

Buttons Provide Feedback

The checkout's "Continue" buttons do not respond to hover.

Highlight the Active Field

Macy's subtly highlights the current field with a gray background.

Validate Correct Responses Inline

Macy's provides no positive feedback for legal form responses.

Auto-Format Numerical Fields

Macy's autoformats phone number but not credit card.

Limit Data Inputs

Security code, credit card number, and phone number all discard illegal characters.

Auto-Fill Compatibility

Fully compatible.

Offer Help Prominently

Phone and chat help only offered in the page footer, a less visible location.

Display Clear Error Messages

The checkout offers inline, descriptive, and comprehensible error messages.

Match Shipping and Billing by Default

Shipping and billing not matched by default.

Trim Unnecessary Form Fields

No unnecessary fields.

Auto-Populate Address

No autopopulation features.

Clear Shipping Options

Shipping provider not listed, but times and costs expressed clearly.

Abandonment Emails

No cart abandonment email sent despite forced email entry in the checkout.

Store Zip Code from Shipping Calculator

Zip code from store locator forgotten in checkout.

Provide Cost Breakdown

Clear cost breakdown always displayed in right sidebar.

Emphasize Free Things

Macy's highlights its free shipping as well as the amount saved from store promotions.

Detect Card Type

Customers forced to select their card type.

Provide Prozac

No reassurance accompanies the "Place Order" button.

Suppress Coupon Field

Gift and reward card option hidden behind button in the payment section.

Checkout Walkthrough

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

Step 1

Login

Step 2

Address

Step 3

Payment

Step 4

Submit Order

[]
[]