Checkout had evolved through years of reactive fixes, creating inconsistent experiences and rigid fulfilment flows. The goal was to reduce friction and drop-offs, improve conversion, and create a more flexible, scalable checkout. A key challenge was aligning App and Web while supporting the different needs of food and non-food orders.
Mapping the Complexity
I reviewed checkout across App, Web, new and returning customers, and different order types to identify where we could create consistency without compromising fulfilment needs. This surfaced five priorities: reduce friction, align platforms, support different fulfilment needs, improve efficiency, and create a foundation for future experimentation.
Designing One Experience Across Many Journeys
I redesigned checkout as a connected journey, focusing on simplifying the cart with clearer structure, pricing and actions; reducing cognitive load through progressive disclosure; accelerating returning-user checkout with a streamlined path and one-click checkout; aligning App and Web through shared patterns, messaging and visual language; and building for scale with flexible patterns that support different fulfilment scenarios and future capabilities.
Cart Improvements
Research and usability testing made it clear: users needed better control over their baskets. I redesigned the cart layout to prioritise basket management, making it easier to review, update, or remove items. Pricing was also made more transparent with clear breakdowns of costs, discounts, and delivery fees.
Rethinking the Checkout Flow
The previous accordion-style checkout overwhelmed users with too much information at once. I introduced a progressive disclosure model that broke the process into smaller, more manageable steps. This reduced cognitive load and helped users stay focused.
“One-Click” for Returning Users
For returning customers, I designed a streamlined checkout that reused saved addresses, payment methods, and preferences—removing unnecessary friction and speeding up the path to purchase.
Fulfilment-Specific Flows
Checkout needs differ depending on what’s being ordered. I created tailored flows for food vs. fashion/home products, aligning layouts and logic with user expectations and operational requirements.
Validate & Refine
We usability tested the proposed journeys with 11 customers — 6 food shoppers and 5 fashion, beauty and home shoppers using remote, one-on-one sessions.
The direction tested strongly:
11/11 liked the overall checkout design
8.5/10 average satisfaction
91% completed the tasks without assistance
Testing also exposed important friction. 9/11 participants struggled with address handling, while other findings highlighted opportunities around delivery options, promotions and payment clarity.
These findings informed further refinement — including making non-essential address fields optional, improving visibility of delivery timeslots, distinguishing collection from delivery more clearly, and reducing visual clutter in payment.
I aligned layouts, flows, interactions and messaging across Web, App and Mobile Web, while adapting interactions to each platform. A responsive design system ensured consistent content and fulfilment logic across devices without compromising platform-specific usability.