Case Study · Conversion

Checkout Redesign: 10 Steps → 3, +80% Transaction Volume

Removing friction from the highest-leverage funnel on the platform.

Role: SDE-III · Stack: Node.js · MySQL · Redis · Payment gateway integrations

Before/after funnel: 10 sequential steps collapsed into 3, with progressive disclosure and deferred validation hiding the work the buyer didn't need to see yet.

The Problem

A 10-step checkout was driving high abandonment and was a frequent source of support tickets. Every step was a chance to lose the buyer — to a confusing field, a slow payment gateway initialisation, or a validation error that felt punitive.

The funnel data showed drop-off was concentrated in two places: the early identity steps (where users felt the form was too long before they'd committed) and the payment step (where gateway script load time and validation friction stacked).

The Solution

Rebuilt the checkout as a 3-step flow — cart, identity, payment — with three principles holding it together:

Progressive disclosure. Optional fields stay hidden until they're relevant. The form looks short because, for most buyers, it is short.
Deferred validation. No mid-typing red errors. Validation runs at the step boundary and surfaces actionable messages, not micro-corrections.
Async-loaded payment options. Gateway scripts initialise off the critical path and don't block the rest of the checkout from rendering.

Worked with product and design on the IA. Owned the backend state machine and the API contracts so the UX changes had a stable foundation to land on.

Tech Stack

Node.js
MySQL
Redis
Payment gateways
REST APIs

My Specific Contribution

Backend state machine. Modelled the checkout as explicit states with allowed transitions; no more boolean flags scattered across the row.
API contracts. Stable, idempotent endpoints for each step boundary; retry-safe by design.
Async payment integration. Off-critical-path script loading; graceful degradation when a gateway is slow.
Cross-functional partnering. Worked with product/design on the IA; reviewed UX edge cases against the state machine.

Impact

+80%

Monthly transaction volume after launch.

10 → 3

Steps in the checkout flow.

↓

Cart abandonment and checkout-related support volume both materially down.

Visuals

The three steps the buyer sees. Optional fields are hidden behind progressive disclosure; validation runs at step boundaries.

Backend checkout state machine — each state has explicit transitions, idempotent APIs, and retry-safe semantics.

Lessons

The hardest part wasn't the redesign — it was the cutover. A checkout is the place where every legacy assumption about a customer comes home to roost. The state machine forced us to make those assumptions explicit; that's where the actual engineering value of this project lived.