Walgreens - Spiralyze

https://www.walgreens.com/ General Retail 4-Page 107 seconds

Walgreens implements a 4-page checkout that avoids making dumb mistakes, but could still improve by reorganizing forms and converting to a single-page checkout.

Each field has a row to it's own, making name and address forms feel longer than necessary. By shortening fields appropriately and converting to a single-page design, Walgreens could gain more conversions from an already decent checkout.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 56% Layout: 56% Usability: 69% Usability: 69% Data Input: 64% Data Input: 64% Cart Conversion Loss -6.3%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Walgreens Desktop Checkout complies with 63% of our recommended best practices.

Single-Page Checkout

Walgreens implements a four-step checkout process, with stages for login, shipping info, payment, and order review.

Reduce Perceived Form Length

Walgreens forces users to scroll by only using one column and labelling form fields above.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

No easy way to go back between steps.

Standardize Look and Feel

Checkout design mostly resembles main site, with a differing font.

Suppress Store Navigation

Walgreens suppresses its menu; however, it offers a text link ("Back to Cart"), which is less subtle than an icon or linked logo.

Browser and Device Compatibility

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

Make Progress Obvious

Walgreens makes progress obvious through its progress bar that highlights the step the user is on.

Guest Checkout Default

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

Buttons Provide Feedback

Buttons are responsive to hovering by turning a light blue.

Highlight the Active Field

Walgreens accentuates the active field with a blue shadow.

Validate Correct Responses Inline

Walgreens immediately notifies a customer of a missing field, but neglects validating correct ones.

Auto-Format Numerical Fields

Neither the phone nor card number are autoformatted.

Limit Data Inputs

Credit card, phone number, zip code, and CVV form fields all accept punctuation and spaces as valid characters.

Offer Help Prominently

Help link and phone number is prominent at the top right corner near the logo.

Display Clear Error Messages

Error is always explained clearly and incorrect fields are highlighted.

Match Shipping and Billing by Default

Matches shipping and billing addresses but forces the user to actively select the addresses to be the same.

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

N/A - No shipping calculator / early zipcode entry opportunity present.

Provide Cost Breakdown

Indicates full price breakdown, with estimates for tax and shipping, throughout the entirety of the checkout.

Emphasize Free Things

Writes "Free" and mentions the discount.

Detect Card Type

Automatically detects and displays card type.

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

N/A Gift card entry area is not an option.

Checkout Walkthrough

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

Step 1

Login/Account Creations

Step 2

Shipping Info

Step 3


Step 4