Case Study
Checkout Revamp
A full rebuild of the checkout experience for a subscription SaaS product, focused on eliminating friction at every step of the funnel.
Problem
The existing checkout had a 4-step flow with redundant fields, unclear error states, and no visible progress indicator. Analytics showed a 68% abandonment rate at step 2. Users were dropping off due to cognitive load and confusion — not lack of intent.
Approach
Analysed the funnel data to pinpoint exactly where users stopped. Redesigned the flow by collapsing 4 steps into 2 using progressive disclosure. Reduced required fields to the minimum, added inline validation on blur, and ensured the CTA was always visible on mobile.
Architecture
- Frontend: Vue 3 SPA embedded within an existing product shell
- Form state: Reactive composable with field-level validation logic
- Payment: Stripe Elements integration
- Analytics: Custom event tracking on each step transition and error state
Key Decisions
Progressive disclosure over a full form
Showing all fields at once increased perceived complexity. Splitting into two logical stages — identity, then payment — matched the user's mental model and reduced cognitive load at the critical drop-off point.
Inline validation over submit-time errors
Errors shown only on submit forced users to re-scan the entire form. Real-time validation on blur gave immediate feedback, cutting error-related abandonment significantly.
Sticky CTA on mobile
The original submit button was below the fold on small screens. Pinning it to the bottom ensured it was always accessible without requiring the user to scroll.
Result
Checkout conversion increased by 22% within 30 days of launch. Step-2 abandonment dropped from 68% to 41%. Average time-to-complete decreased by 35 seconds. No regression in payment failure rate.
Tech Stack
What I'd Improve
- A/B test single-page vs. two-step layout to validate the assumption at scale
- Add address autocomplete to further reduce manual input