Cart and Checkout
Customers were missing critical delivery options during checkout and only discovering them after contacting support. This redesign focused on restructuring the experience to make key decisions visible and easier to act on.
The Problem
The checkout flow was shaped by layout constraints, not how customers actually make decisions. Important options like special delivery were easy to miss, often only discovered after customers reached out to support to ask what was actually available.
The Strategy
I redesigned the checkout journey by restructuring how decisions were presented across the flow.
Instead of consolidating multiple decisions into dense pages, I introduced a step-based structure that distributed complexity across focused stages.
While this increased the number of steps, it reduced the amount of information users needed to process at each stage, making decisions clearer and easier to complete.
The Results
The design focuses on improving checkout efficiency and reliability by minimizing cognitive load and handling key edge cases, with the goal of increasing completion rate and reducing drop-off.
Research & Insights
Key insights
To understand the issues in checkout, I conducted an experience audit using Baymard research and heuristic evaluation, alongside reviewing over 30 ecommerce checkout flows.
A clear pattern emerged. Many checkouts prioritized layout efficiency, often consolidating the entire experience into a single page. While this worked well for simpler purchasing flows, it relied on having relatively few decisions and limited variability.
In more complex scenarios like ours, this approach led to dense pages where critical options were easy to miss. This was reflected in our own experience, where customers often overlooked delivery options and only discovered services like delivery with assembly after contacting support.
Old Checkout
Fewer steps, but dense pages that required users to process multiple decisions at once.
New Checkout
Restructured into focused steps that reduce cognitive load and make key decisions easier to understand.
Designs
Restructuring checkout for clarity
The checkout experience was restructured from two dense pages into a series of focused steps that group related decisions. This made key actions easier to locate and reduced the cognitive load of processing multiple inputs at once.
The comparison below highlights how separating decisions into distinct steps improves clarity at critical moments in the flow.
Additionally, key bypass sections were introduced for information that is typically prefilled or not editable, helping reduce unnecessary interaction and user confusion.
Before
After
Dense, multi-purpose pages where multiple decisions competed for attention.
Focused steps that separate decisions, making key actions easier to find and understand.
Extending the system
The same principles were applied across the rest of the checkout experience, ensuring consistency in layout, information grouping, and decision clarity at each step.
Add to cart
Cart
Payment
Review
Special Delivery
Addressing the highest friction point
Special delivery was the primary source of customer confusion and a key trigger for redesigning the checkout experience.
Customers often overlooked available delivery options and associated fees, only discovering them after contacting support. This was driven by poor content grouping and unclear relationships between delivery choices and their impact.
Impact
How did this solve customer pain poits?
The checkout experience was restructured from a single-page flow into a multi-step process to reduce cognitive load and improve clarity at each stage. By distributing complex inputs across focused steps, the design makes the flow easier to understand, reduces the likelihood of user errors, and provides a more guided purchasing experience.
While this increases the total number of steps, it improves overall usability by allowing users to complete smaller, more manageable tasks with greater confidence.
Success will be evaluated through checkout completion rate, step-level drop-off, time to purchase, and error rate across the flow.
Due to an ongoing data migration, these metrics are not yet available. Performance tracking will be enabled post-migration to validate the impact of the redesign.
What this enabled
By restructuring the checkout into focused steps, the experience became easier to extend and maintain.
New delivery options, pricing rules, and edge cases could be introduced without increasing complexity for users.
Learnings
Designing for complex systems required prioritizing clarity over efficiency. Increasing the number of steps improved the experience by reducing the amount of information users needed to process at each stage.
Aligning structure with how users make decisions had a greater impact than optimizing individual components.
Constraints & Contributions
Contributing to the design system
This work was shaped by a highly complex B2B environment, requiring solutions that extended beyond individual screens and contributed to the broader system.
This work also contributed to the development of shared components within the design system.
Patterns such as delivery selection, progressive question flows, and order summaries were standardized to support reuse across other checkout experiences.
This helped ensure consistency while making it easier to scale and maintain complex flows over time.
Working in Complexity
The project was shaped by a highly customizable B2B environment, where pricing, delivery options, and workflows varied across customers.
This introduced a large number of edge cases that required balancing flexibility with clarity, ensuring the experience remained understandable without oversimplifying the underlying logic.
Non-linear process
The design process was iterative and non-linear, requiring continuous refinement as new edge cases and business requirements emerged.
Rather than following a fixed sequence, solutions were revisited and adjusted to ensure consistency across the broader checkout system.
Structuring the experience around how users make decisions proved more impactful than optimizing individual components.