Dual-Path Checkout Migration
Migrated a fragmented, multi-step checkout to a high-performance "Composer" engine, using reusable Design System widgets to reduce friction and accelerate A/B testing. I implemented a dual-path logic to optimize conversion: a one-page "Express" flow for signed-in users and a streamlined, multi-step journey for guests to ensure clarity and trust.
Role:
Product Designer
Platform:
Responsive Web
Collaborators:
Basket/Checkout squad
Tools:
Figma, UXTweak, Figma Make, AI Tools, Contentsquare
Status:
In development
CHALLENGE
The existing web checkout was a multi-step disjointed journey. It relied on legacy architecture that forced users through multiple page refreshes, leading to high abandonment rates.
The User Pain: Excessive clicks, slow transitions, and a lack of order transparency.
The Design Debt: The web experience lagged significantly behind the mobile app, creating a fragmented brand identity.
The Technical Constraint: Engineers couldn't easily test new UI patterns due to the rigid, hard-coded legacy frontend.
The Goal
Streamline web checkout by replacing a fragmented legacy flow
with a high-performance "Composer" engine and dual-path logic to optimise conversion.
finding the friction
To ensure the migration wasn't just a "lift and shift," I led a discovery phase to identify exactly where users were dropping off.
I first audited checkout patterns from Shopify, Nike, Amazon etc.
To understand the drop-off in checkout, I analysed unmoderated usability tests alongside existing behavioural data.
A key insight was that users experienced uncertainty at each step of the flow, particularly around how many steps remained and what information was required next. This created hesitation and slowed completion.
I also observed that repeated decision points and fragmented layout increased cognitive load, especially for returning users who expected a faster experience.
These insights led me to focus on reducing step complexity and improving visibility of the full checkout process.
SOLUTION
To maximize conversion, we moved away from a "one-size-fits-all" flow, designing two distinct paths based on user intent and data availability:
Signed-in (One-Page): Leveraged saved data for a "few-click" Express checkout.
Guest (Multi-Step): Streamlined new customer journeys with a high-speed, guided UI.
The widget strategy - scalable designs
I partnered with the Design System team to build a library of bespoke checkout widgets (e.g., Triggers, Payment Toggles). This "plug-and-play" system ensured:
Engineering Velocity: Weekly "sync-and-build" sessions eliminated custom CSS and reduced bugs.
Flexibility: Reusable components allowed for near-instant A/B test setups within the Composer engine.
Guest checkout optimisation
Eliminated a redundant guest step, creating a high-velocity path to purchase.
Signed-in checkout optimisation
Condensed the journey into a one-page flow, cutting two full steps for returning users.
Collaborative Impact and Outcomes
Team collaboration and alignment
Product & Research: I translated our unmoderated test findings into actionable UI requirements, ensuring the "One-Page" flow didn't just look good but solved the specific friction points we discovered.
Stakeholder Management: Used the new widget library to rapidly prototype different checkout "flavors," allowing stakeholders to see and feel the future UX months before the full migration was complete.
A foundation for growth
First tests of the redesigned checkout experience showed a ~12% relative uplift in conversion rate, driven by a reduction in friction and clearer progression through the flow.
By simplifying the journey into a single-page experience, users were able to complete purchases more efficiently, particularly in repeat purchase scenarios.
Additionally, the modular approach enabled faster iteration and experimentation, improving team velocity and reducing delivery risk.