Rebuilding Checkout for Faster Completion: Home Depot Canada

Redesigned the checkout experience by improving fulfillment options and form information hierarchy —resulting in a 47% reduction in drop-offs and 46% faster checkout completion.

IN BRIEF

The Problem

Why do 38% of our customers drop off at checkout ?

  • lengthy checkout experience

  • no fulfillment selection

  • friction in account creation

  • mobile experience overload

  • legacy-driven performance issues

The Goal

Modernize the checkout platform by replacing legacy code, delivering a best-in-class UX that reduces abandonment and time to completion.

Solution and Impact

01
Eliminated redundant form fields and unnecessary data requirements

03
Reduced the reasons to abandon checkout, by allowing delivery scheduling and store selection in cart

Measured Impact

02
Reduced the number of fulfillment categories from 7 to 2, cutting down on complexity

04
Enhanced the visibility of the order total and organized the summary intuitively for mobile, reducing the need for excessive scrolling

THE FULL STORY

Project Goal

Modernize the checkout platform by replacing legacy code, delivering a best-in-class UX that reduces abandonment and time to completion.

Process

01 Unmoderated and Moderated Research

02 Concept Sketching

03 User Testing

04 Scope Revisions

01

Learnings from Research

Concept Sketches and User Insights

01 Intermediate Sign-in

02 Delivery/Pickup

03 Absence of Cart

04 Review State

Revised Approach

  • Through moderated interviews with 16+ users, we uncovered several key insights around:

    • how users reviewed information

    • how users felt about filling different types of forms

    • how users felt about making decisions

    • how retracting from their journey felt

    • Checkout layouts: full one-page, accordion-style, or multi-step

    • Simplified forms

    • UX trends of Store selection and pickup/delivery scheduling

    • Guest Vs Signed in checkout

    • Trends in Mobile experience

    • Summary of information

    • Best practices to making changes on checkout

  • “I wanted to change my store but I was taken back to cart”

    “I wanted to create an account but I was taken off my journey”

    “I’m constantly jumping around the page trying to find the info I need”

“ I was ready to buy, but the time spent of filling forms made me second guess it”

  • Intermediate Sign in Page - Users were clear on the Guest Vs Sign In journey

    Simplified Fulfillments - Clear comprehension
    on Pickup and Delivery

    Summary of Information - Users liked showing relevant products next to form

    Fulfillment decisions - Users liked making time and location related fulfillment decisions at checkout

  • Cart Display required - Users preferred a unified cart view to easily confirm products and tally costs.

    Users do a final review before placing order - Users expected to double check products right before placing order

  • Visual Design - To add visual design into next round of testing

    Form Design - Refine form fields across the checkout

Mobile First Experience

Mobile users faced excessive scrolling to view product details, forms, and order summaries, slowing checkout and driving abandonment. Simplifying the mobile experience was the first step toward validating the revised architecture and reducing checkout drop-off.

How we solved it

We revamped the form architecture by streamlining the number of input fields, consolidating fulfillments, introducing a collapsible cart, and adding a sticky order summary

What users thought

  • Easy-to-expand cart with delivery-date grouping.

  • Sticky order total enabled quick summary access.

  • Delivery section needed more clarity.

  • Review & Pay was easily understood.

  • Simplified checkout was strongly preferred.

Inconsistent fulfillment terminology caused confusion across the shopping journey. Using research and design workshops, I advocated for simpler, consistent language across key touchpoints for fulfillment related terminology.

How we solved it

We simplified all delivery fulfillment options by removing terms like scheduled delivery, express delivery, and standard shipping, and instead presenting details as Delivery items based solely on delivery dates. We also merged ship-to-store and store-pickup into a single Pickup category. The UX copywriting team crafted verbiage that resonated well, which helped secure stakeholder buy-in across teams and led to a commitment to implement these changes at every level.

What users thought

  • Clear grouping by delivery and pickup dates.

  • Date-based cart summary improved clarity.

  • Minimal aesthetic was well-received.

On Page Store Selection

Users often abandon the checkout process to change their pick-up store due to the lack of an on-page option. To resolve this, we introduced a feature to change within the checkout flow, eliminating the need to redirect them back to the cart as was previously required.

How we solved it

We repurposed the slide-in panel component to showcase nearby stores, including their addresses, that have the product in stock. Users can select a new store, and the update will seamlessly reflect in the checkout process.

What users thought

  • Intuitive store alternatives across desktop and mobile.

  • Flexible store selection was helpful.

  • Clear cart summary by store and pickup date.

  • Accessible date picker was preferred.

  • Pickup summary clearly displayed selections..

Information Hierarchy

Expanded to Desktop

Usability Results

Usability test with 27 HD customers who were familiar with online shopping on other platforms.

Previous

Bulk Purchasing | Audible