UX/UI Design

Redesigning the Checkout Flow

How a focused UX overhaul reduced drop-off by 38% and increased conversion across all device types.

Role Lead UX Designer
Team 4 People
Case Study Cover

The Problem

Users were abandoning the checkout at an alarming rate — 62% on mobile and 41% on desktop. Analytics showed the biggest drop-off happening between the cart and payment step, with users citing confusion around form layout, unclear error states, and a lack of trust signals as primary pain points.

Wireframe / Discovery Screenshot

Understanding the User

We ran 18 moderated usability sessions, a large-scale survey, and heatmap analysis across 3 months of session recordings. The findings were clear: users didn't trust the flow, couldn't recover from errors gracefully, and felt overwhelmed by the number of steps.

Research Findings
Affinity Map

"I just didn't feel confident entering my card details — the page looked unfinished."

The Solution

We restructured the flow from 5 steps to 3, introduced inline validation with clear recovery paths, added trust badges at critical moments, and rebuilt the mobile layout from scratch with a thumb-friendly interaction model. Every change was backed by a testable hypothesis.

Final UI Design
Before
After

Impact

After a 4-week A/B test against the existing flow, the redesign showed significant improvements across all key metrics. The changes shipped to 100% of users 6 weeks after initial design handoff.

Beyond the numbers, the project established a new component library for forms that has since been adopted across 6 other product areas, reducing design and development time for future form-heavy screens by an estimated 40%.