Streamlined Web Checkout
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.
The 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.
Role:
Product Designer
Platform:
Responsive Web
Collaborators:
Basket/Checkout squad
Tools:
Figma, UXTweak, AI Tools
Status:
In development
Problem Analysis: 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.
Competitor Benchmarking: Analysed industry leaders to define "best-in-class" one-page checkout patterns (Shopify, Nike, Amazon etc.)
Unmoderated User Testing: Partnered with a User Researcher to observe customers navigating the legacy flow. We identified significant cognitive load during form transitions and "hidden" summaries.
Data Validation: Together with PM, audited checkout abandonment rates, confirming that the multi-page structure was the primary driver of drop-offs compared to the streamlined app experience.
The Strategy - Adaptive Checkout Logic
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 Users (One-Page Flow): Leveraged known data (saved addresses and payments) to create an "Express" one-page experience, reducing the path to purchase to just a few clicks.
Guest Users (Streamlined Multi-Step): Preserved a clear, step-by-step journey for new customers. This ensured guest users weren't overwhelmed by long forms while still benefiting from the updated, high-speed "Composer" 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
By removing redundant page loads and form friction, I successfully eliminated a critical step from the guest checkout flow. This optimisation transformed a disjointed legacy process into a higher-velocity path to purchase, directly reducing the time-to-conversion for new users.
Signed-in checkout optimisation
For authenticated users, I cut two full steps by condensing the journey into a one-page "Express" flow. By leveraging saved preferences and removing unnecessary intermediate screens, I created a frictionless experience that allows returning customers to move from product discovery to order confirmation in seconds.
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.