LivePerformance

E-Commerce Checkout Redesign

Complete redesign and re-engineering of the checkout flow, reducing abandonment by 34% and cutting load time from 4.2s to 0.8s through code splitting and prefetching strategies.

CompanyRazorpay

RoleSenior Frontend Engineer

Year2022

Tech Stack

Vue 3Nuxt 3Tailwind CSSPiniaStripe SDKLaunchDarkly

Impact

conversion+34% conversion

performance4.2s → 0.8s

abandonment-41% cart abandonment

The Problem

A 4.2-second load time and a 7-step checkout process were causing 68% cart abandonment, costing an estimated $2.4M in monthly lost revenue.

The Solution

Redesigned the checkout to a 3-step process, implemented aggressive code splitting, prefetched critical resources, and used optimistic UI updates to make the experience feel instant.

Architecture

SSR Nuxt app with edge caching, dynamic imports for payment SDKs, and a real-time inventory check API.

Key Challenges

Coordinating payment SDK lazy loading without UX degradation
Running safe A/B tests on checkout flow
Handling network failures gracefully

Results & Impact

Load time: 4.2s → 0.8s (81% improvement)

+34% checkout conversion

-41% cart abandonment

Lighthouse Performance: 42 → 97