Optimized the online checkout experience to reduce checkout abandonment
PROBLEM TO BE SOLVED
17% of online customers on the Home Depot website abandon their orders because of the lengthy and complicated checkout process.
MY ROLE
Product Strategy, Information Hierarchy, Interaction Design, Visual Design, User Testing.
SOLUTION & IMPACT
We redesigned the checkout journey as follows:
Simplified checkout by eliminating redundant form fields and unnecessary data.
Reduced fulfillment categories from 7 to 2, decreasing complexity.
Minimized checkout abandonment by adding delivery scheduling and store selection in cart.
Enhanced the visibility of the order total and organized the summary intuitively for mobile, reducing excessive scrolling
Usability testing with 24 users showed a 46% decrease in checkout time, from 4.1 to 2.2 minutes. Users gave a rating of 4.8/5 for the new checkout experience
RESEARCH & SCOPE
17% of cart abandonment was a concerning statistic that prompted us to conduct multiple rounds of research, including moderated interviews, competitor analysis and review of best practices in literature.
Through moderated testing with frequent online shoppers on the current checkout experience and by analyzing competitor websites, we uncovered key insights
Existing Checkout design
We interviewed 16 online shoppers, through Moderated Interviews, about their decision-making and checkout experiences, uncovering key insights:
74% of orders were placed by guest users, avoiding account creation due to perceived lack of benefits.
45.7% of customers found the mobile checkout slow and frustrating, specially for scheduling, citing excessive scrolling compared to competitors like Wayfair, Lowe’s, Amazon, and IKEA.
We analyzed 18 retail/e-commerce brands, focusing on page layout, information architecture, design patterns, fulfillment options, guest vs. signed-in checkout, account creation, and cart display. Key learnings from competitor analysis include:
Retailers used three checkout layouts: full one-page, accordion-style, or multi-step with focused form details
Over half streamlined forms to reduce redundancy and simplify interaction.
All retailers displayed finalized purchase items and avoided distracting calls to action.
Less than half allowed store selection and pickup/delivery scheduling, which improved UX.
Most retailers users Guest Vs Signed in checkout as an intermediate step between cart and checkout.
Product info varied from minimal to detailed displays.
Few had a clear visual hierarchy with icons, imagery, and spacing.
Mobile experiences were often lengthy, but multistep layouts offered a more streamlined process.
After our primary research phase, we mapped out the scope of the project into the following:
1. Intermediate Sign-in - transition from shopping cart to checkout
2. Guest Checkout Experience - with single fulfillment
3. Guest Checkout Experience - with multiple fulfillment scenarios and services installation
4. Signed-In user experience
5. Merge Cart Situation - what happens when a user signs in at checkout and there are older items added to checkout
6. Local Pro Service installation selection
7. Delayed account creation
SPRINT 0 - CONCEPT SKETCHING
To improve the checkout experience, I recommended the following:
Multi-step Checkout journey: Based on competitor analysis and Baymard, I broke the process into key steps: Sign-in, Fulfillment options (Pickup/Delivery), Payment, and Review, improving focus and auto-filling details.
Page Layout: I kept forms and product details in the left column and the order summary in the right. I consolidated 7 fulfillment categories into 2 (Delivery/Pickup) and included estimated delivery dates to simplify choices.
Reusable components/Widgets: I reused the side panel for the date calendar and store selector, reducing UI clutter and improving usability across devices.
Simplifying Payment: I replaced tabs with radio buttons to show all payment options upfront, making choices more visible.
Signed In users: Pre-populated data for signed-in users, enabling them to review and make quick edits before completing the purchase.
Keeping order total always visible: I kept the order summary visible at all times, with the total at the top on mobile, based on user feedback that it’s frequently referenced during checkout.
Voted features:
After reviewing ideas and discussing benefits and risks, we voted on the following directions for our checkout solution:
Include an intermediate sign-in page.
Use an accordion layout to align with the existing experience, as multi-step checkout did not show significant benefits due to the minimal form fields for common fulfillment options.
Allow customers to change the pickup store to reduce abandonment.
Allow customers to change the pickup store to reduce abandonment
Reduce redundant form fields and collaborate with the product team to identify mandatory data.
INSIGHTS FROM CONCEPT TESTING
We assessed the cart-to-checkout journey, including the intermediate sign-in page, capturing user reactions, evaluating checkout layout clarity and usability, and gathering feedback on missing elements and unmet expectations.
Key insights from our concept testing that will guide further development:
Clarity of the intermediate sign-in page: Users easily understood the page's purpose, with guest checkout prioritized as the main option.
Expectations for a detailed cart view: Users wanted a clear cart summary, so we reintroduced a minimal version in the checkout flow.
Visual design alignment: We identified the need to refine the checkout page's design to align with the website's overall style, to be tested in future user research.
KEY DESIGN MILESTONES
What problem we solved & why
Users often found complex terminology, particularly related to fulfillment, confusing throughout their online shopping journey. Despite the need for extensive updates across multiple touchpoints, I used UX research and design workshops to showcase industry practices and advocate to simplify user comprehension.
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
Most users easily understood the grouping of forms and products by estimated delivery dates and pickup dates.
Most users appreciated organizing information by recency of dates in cart summary
We also got compliments for the minimal aesthetics.
What problem we solved & why
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
Most users found it intuitive on both desktop and mobile to view alternative store options with the product in stock.
Some users mentioned that the flexibility to select different stores for In-store and Ship to Store Products was helpful.
The cart summary clearly organized items by store and pickup date, making it easy for most users to comprehend.
Some users appreciated the the date picker being easily accessible compared to a standard calendar widget
Most users liked the summary view of the Pickup sections, where their selections were clearly displayed
What problem we solved & why
Mobile users faced excessive scrolling to view product details, review forms, and access the order summary during checkout. This created friction and slowed down the purchase process or checkout abandonment. Simplifying the mobile experience with the revised architecture was the first step to validating the overall design and reducing card abandonment.
How we solved it
We revamped the form architecture by streamlining the number of input fields, consolidating fulfillments into Pickup and Delivery and showing relevant products here, introducing a collapsible cart, and adding a sticky order summary that users could interact with for more information.
What users thought
Most users easily understood how to expand the cart to view product details grouped by estimated delivery dates.
Most users appreciated the interactive sticky order total at the bottom for quick access to the order summary.
Some users took time to grasp the Delivery fulfillment section, as it only displayed products requiring delivery dates to be scheduled.
Most users successfully interpreted the combined "Review and Pay" section
The clean, simplified checkout process was well-received, especially by Home Depot customers who preferred it over the existing experience.
RESULTS
We conducted a usability test with 24 customers who had previously shopped on the Home Depot Canada website and were familiar with online shopping on other platforms.
Key aspects tested included:
How much we reduced the number of users leaving the checkout to return to the cart.
How clear users were about the difference between signing in and using guest checkout.
User feedback on the simplified fulfillment process and their experience with form completion.
Whether users were patient and willing to complete all tasks during the checkout process.
Average checkout time was reduced from 4.1 minutes to 2.2 minutes, a 46% improvement. Users gave a rating of 4.8/5 for the new checkout experience.After implementing the new checkout flow, cart abandonment rates dropped by 29%, and form completion increased by 55%.From a business impact standpoint, we anticipated a15% increase in sales during the first quarter.
The new checkout feels faster and more intuitive compared to the previous version. - users during moderated interviews
