Before/After: A fintech app reworks its payments flow to halve checkout drop-off

Design · 6 min read

Before the redesign, users on the payments screen saw a dense form with multiple payment options, verbose legal text, and an order summary below the fold. Usability testing revealed three pain points: users couldn't quickly find their default card, promo codes were hard to locate and apply, and the confirm button felt risky because it lacked a clear finality state.

The after version introduced a single-line expandable payment selector that surfaced the default card and last-used method, moved promo code entry inline with clear feedback, and transformed the confirm action into a progressive affordance with a micro-confirmation modal showing estimated deposit time and a single frictionless undo action.

A 30-day A/B test showed checkout completion jump from 52% to 78%, average time on task drop by 45%, and customer support tickets about accidental payments decreased by 70%. The design team credited the win to focusing on hierarchy and reversible actions—reducing fear of committing—and to moving secondary actions into inline, contextual locations rather than leaving them as static peripherals.