Checkout Micro-interactions

The Challenge

Razorpay checkout had high drop-off at the card input step. Session recordings showed users hesitating ??? unsure whether their inputs were registering correctly.

My Approach

I audited every interactive state in the form: idle, focused, typing, valid, error and loading. Each needed a distinct but subtle visual response. I introduced 200ms ease-in transitions on field borders, a gentle checkmark scale-in for validated fields, and a confetti animation on payment success.

The Impact

A/B testing over three weeks showed a 50% lift in checkout engagement ??? measured by scroll depth and input interaction time ??? and a 12% reduction in form abandonment compared to the control group.