Tackling Cart Abandonment for Builder Depot

Product: E-Commerce platform

My role in the project: UX Designer

My tasks:

Research
A/B Testing
Wireframing
UI Design

Check out the website

Background

Builder Depot, a leading UK retailer for construction materials, faced a recurring problem in their current e-commerce platform: a large number of users were abandoning their shopping carts during checkout. However, the exact reasons behind this behavior were unclear. As a part of my job at Vaimo, I was tasked with conducting UX research to uncover the root causes of cart abandonment and redesigning the checkout flow to address these issues effectively.

The Challenge

The primary objectives of the project were to:

Understanding the Root Causes of Cart Abandonment:
Through UX research identify pain points and user frustrations throughout the checkout experience.
Redesigning the Checkout Process:
Creating a user-friendly and frictionless checkout flow that addressed the key issues identified through research and reduce cart abandonment rates.
Optimizing for Mobile and Desktop Experiences:
Ensuring the checkout process was intuitive and efficient across all platforms, particularly mobile, where abandonment rates were highest.

Research Process

The project began with workshops involving Builder Depot stakeholders to align on goals and explore potential hypotheses for cart abandonment. These sessions revealed a few assumptions, such as:
- Users might be dropping off due to unclear pricing.
- Delivery options could be causing confusion, particularly for items requiring in-store pickup.
- Mobile usability might be suboptimal.
These assumptions, while helpful, required validation through user research.
I analyzed heatmaps and analytics data from Builder Depot’s website, which revealed:
- A significant drop-off at the delivery selection step.
- High abandonment rates on mobile devices compared to desktop.
- Frequent re-visits to the cart page, suggesting uncertainty before completing purchases.
This data informed the focus areas for user interviews.
To uncover the underlying reasons for cart abandonment, I conducted five user interviews with Builder Depot’s target audience, including DIY enthusiasts and construction professionals. The interviews were structured to understand their decision-making process and pain points during checkout.
Key findings included:
1. Unclear Pricing: Users were often surprised by additional fees, such as delivery charges or taxes, that only appeared late in the checkout process.
2. Confusing Delivery Options: Many users were frustrated when items weren’t eligible for door delivery or had unclear pickup instructions.
3. Mobile Frustrations: On mobile devices, users reported difficulties navigating the checkout flow due to small buttons and cluttered layouts.
4. Receipt Tracking: Professionals needed easy access to receipts for business expenses but struggled to locate them post-purchase.
These findings provided a clear roadmap for redesigning the checkout flow.

Design Process

1. Mapping the Current Flow

I created a detailed user journey map of the existing checkout process, pinpointing where users experienced friction (e.g., the lack of delivery transparency, pricing inconsistencies). This visualized the key problem areas to address in the redesign.

2. Low-Fidelity Mockups

Based on user research, I sketched low-fidelity wireframes with a focus on:

Pricing Transparency: A persistent cost summary that updates dynamically with each selection.
Clear Delivery Choices: A simplified interface to toggle between delivery and in-store pickup.
Mobile Optimization: Large, tappable buttons and reduced visual clutter.

The wireframes were shared with Builder Depot stakeholders for initial feedback before moving to high-fidelity designs.

3. High-Fidelity Prototypes

Due to Builder depots already existing design system i could quickly design high-fidelity prototypes that incorporated Builder Depot’s branding. Key improvements included:

Dynamic Pricing Display: A real-time cost breakdown, including shipping and taxes, shown throughout the checkout process.
Delivery Information Clarity: A step-by-step flow to guide users in choosing delivery or pickup options, with clear notifications about split orders.
Streamlined Mobile Experience: Simplified layouts optimized for smaller screens, ensuring a smooth experience on all devices.
Enhanced Receipt Management: Automated email receipts with clear instructions for retrieval.

User Testing

Testing Objectives

To validate the new designs, I conducted usability tests with participants from the initial interview pool. Participants were asked to complete tasks such as:

Selecting delivery options for items with varying eligibility (e.g., door delivery vs. in-store pickup).
Reviewing pricing information before finalizing the purchase.
Locating and retrieving their receipts after purchase.

Findings

Reasons for Split Orders Across Multiple Items
Two participants were surprised to find that their orders were split into separate deliveries.
- Implication for Design Change: To address this confusion, I implemented clearer communication within the checkout process to explain why an order is split. This helps users understand the reasoning behind separate deliveries, reducing surprise and frustration.
Difficulties Finding Receipts
One user struggled to locate their receipt after completing the checkout process. The final step did not include a clear message indicating that the receipt would be sent to their email, leading to uncertainty and extra time spent searching on the confirmation page.
- Implication for Design Change: A clear message was added to the final step of the checkout process, informing users that the receipt will be sent to their email. This reduces confusion and saves users time.
Option to Choose Separate Delivery Dates
One participant suggested that, since orders were being split into multiple deliveries, it would be useful to have the option to choose separate delivery dates.
- Implication for Design Change: I included a feature that allows users to select different delivery dates for split orders, improving flexibility and enhancing the user experience for complex deliveries.