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.
Benchmarking: Audited checkout patterns from Shopify, Nike, Amazon etc.
User Testing: Identified high cognitive load and "hidden" summaries in legacy flows.
Data Audit: Confirmed multi-page friction as the primary driver of drop-offs.
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
Reduced Build Time: Engineers can now "drag and drop" widgets from our DS to create new experimental checkout variations in a fraction of the time.
UI Consistency: Guaranteed 100% visual parity across the entire web domain, regardless of which team owns the sub-section.
Future-Proofing: The widgets are built to be theme-able, meaning we can easily adapt the checkout for seasonal events (e.g., Black Friday) without rewriting the core codebase.