UX Optimization – Cart & Checkout

The client's cart experience included a promotional offer for their branded credit card, which allowed users to save an additional 20% off their order if they applied for the card and used it to make a purchase. However, the placement and design of this offer caused confusion, leading some users to mistakenly believe their order total was lower than it actually was.

To address this issue, an experiment was conducted to redesign the promotional content, aiming to clarify the card offer and eliminate misunderstandings about the order total. Three design variants were created:

• Variant 1: Highlighted the savings amount with a toggle to collapse additional details by default.
• Variant 2: Focused on the post-discount order total, incorporating a redesigned layout for the savings calculation to distinguish it from the main order summary.
• Variant 3: Removed the estimated total content entirely to simplify the presentation.

Variants 1 and 2 were tested alongside the original (control) experience. Both variants outperformed the control, with Variant 1 showing the greatest increase in engagement, thanks to its clearer emphasis on the total amount saved by using the card.

The original experience used a layout and position that placed the promotional total closest to the purchase CTA leading to confusion.

Variant 1 (winner): By default, shows the amount that can be saved with the potential new total hidden by a toggle.

Variant 2: By default, shows the revised total amount when using the card. The savings and total are hidden by a toggle and the layout of the new total is changed from that of the actual order total.

Variant 3:

A luxury clothing retailer experienced significant abandonment rates during their mobile checkout process. The original (control) design featured the default site header, which included links for search, cart, store locator, and full-site navigation, as well as a promotional banner. This layout made it easy for users to exit the checkout flow, contributing to drop-offs.

The design hypothesis proposed removing all distracting elements from the header—including links, navigation, and the promotional banner—to create a cleaner, more focused checkout experience and keep users in the purchase funnel. Two design variants were developed and tested against the control:

• Variant 1: Eliminated all header links and added a progress indicator in the header space to guide users through the checkout process.
• Variant 2: Incorporated the changes from Variant 1, plus a breadcrumb link back to the cart and an expandable content block displaying the order summary.

The results showed that removing header distractions reduced checkout abandonment in both variants. Variant 2 emerged as the clear winner, delivering an improved user experience that led to an estimated $368k+ increase in annual revenue for the client.

The original experience contained multiple exit points including the menu, allowing the user to easily navigate away from checkout.

Variant 1: Menu, search, cart, location, and promo banner have been removed and a progress indicator has been added at the top of the page.

Variant 2 (winner): In addition to the changes made for V1, this version also adds a "Back to Cart" link and an expandable order summary.

This project explored a feature allowing users to select shipping options on an item-by-item basis, enabling them to customize delivery timing based on cost and availability.

Desktop and mobile prototypes were created and tested through unmoderated usability sessions. While users valued the concept of customizing delivery for multiple items, the interface was found to be overly complex and difficult to navigate for most participants.

The control used a standard shipping selection interface located in the buy-stack.

Variant 1: Each item in the cart contains a content block that can be toggled open or closed to edit the shipping options individually.

Variant 2: Simplified variation of V1 without the toggle to show/hide the shipping options.

Variant 3: Shipping options aligned to the right of each cart item with radio button selections.

Mobile design detail

The client's checkout process required users to choose between checking out as a guest, creating an account, or logging into an existing account before proceeding—introducing an unnecessary step that disrupted the flow from cart to checkout.

The redesigned solution streamlined the experience by defaulting users into the guest checkout flow, allowing them to proceed seamlessly. Options to log in or create an account remained available throughout the checkout process for added flexibility. The improved flow resulted in increased checkout completions.

Control: Users are required to make a selection before proceeding with checkout.

Control: Creating an account before being taken to checkout introduced a barrier that saw many users abandon the checkout process.

V1: Users are now taken directly to the checkout process without the need to make a selection. If the user wishes to proceed as a guest, they do not need to take any further action.

V1: Users can easily sign in at any point in the checkout flow.

V1: User also have the option to create a new account without leaving checkout. This leads to an increase in new accounts created.