Before/After: Mobile Checkout Redesign That Reduced Drop-Off at Payment Stage

Tech · 4 min read

Shoply's original mobile checkout was a multi-screen form with separate pages for shipping, billing, and payment method, and validation errors only surfaced after submission. Heatmaps and funnel analysis showed a large drop-off on the payment screen and many users abandoning during retyping of credit card details.

The redesign collapsed the flow into a single scrollable checkout, applied inline validation with clear microcopy for common errors, and introduced platform-native payment options (Apple Pay, Google Pay) plus a secure one-tap 'save card' toggle. Form fields were optimized using address auto-complete and card number masking with real-time BIN detection to reduce confusion about supported cards.

After rolling out the new checkout to a randomized cohort, Shoply saw payment-stage abandonment fall by 29%, mobile conversion rise by 18%, and average order value increase by 6% due to faster upsell acceptance during checkout. The work underscored the importance of immediate feedback and platform-native affordances in payment experiences.