E-Commerce Checkout UX Revamp
Transformed a three-step popup checkout into a seamless single-page experience, boosting conversion rates by 12% YoY through strategic UX improvements and A/B testing.
The Challenge
Our three-step popup checkout was bleeding customers at every step, with sharp drop-off rates after the first step and stagnating conversion rates.
Sharp Drop-off Rate
Customers abandoned checkout after the first step, creating a conversion funnel bottleneck
Stagnating Conversion
Conversion rates plateaued despite marketing efforts and traffic growth
Three-Step Friction
Multiple steps in a popup created cognitive load and increased abandonment
The Solution
I led the frontend transformation from a fragmented popup to a single-page checkout, building real-time features and coordinating cross-functional rollout.
Single-Page Design
Eliminated multi-step friction with integrated payment flow and smart form design
Real-time Tax Calculation
Instant tax updates via Node.js API with debounced validation, reducing checkout surprises
A/B Testing with Statsig
Data-driven optimization with systematic adoption rate monitoring
Before vs. After
Visual transformation from a multi-step popup to single-page experience
Three-Step Popup
- • Multi-step process with high cognitive load
- • Payment separated from main flow
- • Add-on prompts before payment
- • High abandonment after step 1
Single-Page Flow
- • Unified checkout experience
- • Integrated payment within main page
- • Add-ons positioned after payment input
- • Real-time tax calculation
My Role
I spearheaded both frontend development and cross-functional collaboration, navigating time constraints and legacy code to deliver a successful revamp.
Lead Frontend Development
- Built real-time tax calculation with debounced validation and Node.js API integration
- Shipped redesign in legacy React class components using strategic refactoring and feature flags for safe rollout
- Optimized form performance with lazy loading and improved keyboard navigation for screen reader accessibility
Cross-Functional Collaboration
- Partnered with designer on iterative design changes, shipping incrementally without hi-fi prototypes
- Built backend API endpoints to support real-time UX features and checkout flow requirements
- Coordinated with stakeholders to launch feature safely using Statsig for phased rollout monitoring
How It Works
A strategic blend of frontend optimization, backend API enhancement, and data-driven experimentation to maximize conversion rates.
Tech Stack
- React Frontend – class components with legacy architecture
- Node.js Backend – API endpoints for tax calculation
- Statsig – A/B testing platform for adoption monitoring
- Legacy APIs – integrated existing backend services
Strategic Trade-offs
- Working with legacy class components and technical debt for faster launch
- Prioritized manual testing over unit tests to accelerate launch velocity and validate with real user feedback
- Launched without affecting original checkout flow for risk mitigation
The Impact
Biggest checkout transformation in company history proved successful.
"I don't say this enough. This UI is amazing, Annie did awesome work!"
Looking Back
Reflections on the development process and improvements for future projects.
Add Planning Phase
Invest time in stakeholder alignment and technical discovery before coding to prevent costly pivots and unnecessary tech debts.
Prioritize MVP Features
Define core success metrics and ruthlessly prioritize MVP features early to avoid scope creep when working under tight deadlines.
Isolate Feature Launches
Separate feature launches from experiments to reduce complexity in measuring individual component impact.
Explore more case studies and technical projects