TIMELINE
6 Weeks.
August 2024
TEAM
Design Manager,
Web Developer
CONTRIBUTION
Ideation, Wireframing & Prototyping, UI/UX, Testing & Handoff
WHERE DID I USE AI?
Asset Generation,
Prototyping
TL;DR
Razorpay powers payments for over 8 million businesses across India. Their annual Sprint event is the highest-visibility moment to show merchants what's new. In 2024, we had 70+ product updates to communicate, 8 product teams with competing priorities, and 6 weeks to build something from scratch that couldn't afford to lose a busy CEO after 30 seconds of scrolling.
IMPACT
12.5
avg. minutes spent, 8x above B2B page benchmarks
13.7K
organic views with zero paid promotion
143K
LinkedIn impressions from a single launch post
WHAT DID I DO
Led creative direction for the product showcase, aligned 8 product managers, 1 engineer, and 2 marketers around a single cohesive narrative across a 6-week sprint
Explored 12-15 storytelling directions through rapid ideation, converging on a non-linear navigation model that lets merchants choose what they want to know more about
Owned end-to-end information architecture, content hierarchy, and interaction design from brief to final handoff
TOOLS USED
PROBLEM REFRAMING
The brief: To showcase 70+ Razorpay product updates from 2024. After speaking with users, I realised the real challenge wasn't presenting every update, but helping them quickly find the ones relevant to their business.
The tension: Razorpay needed comprehensive coverage, while merchants needed speed and relevance. Balancing both required rethinking the information architecture rather than simply displaying every feature.
How might we help merchnants discover the two or three updates that matter most to them in under two minutes, while still showcasing 70+ product launches?
WHAT RESEARCH REVEALED
I studied how Stripe, Shopify, and Apple communicate product updates at scale, and found these common patterns.
One-size-fits-all:
Product updates were presented in a fixed manner, regardless of who the user was or what they cared about.
Focus on IA:
Merchants had to scroll through dozens of irrelevant updates before finding the few that mattered.
Relevance:
The experience needed to help users quickly discover updates relevant to their business while remaining engaging.
Design principle extracted: Structure first, storytelling second. The architecture of how updates are organized matters more.
KEY DESIGN DECISIONS
Non-Linear Experience: While testing wireframes, I realized merchants searched by business needs, not the product journey. This led to a linear product story, which was a category-first experience with a sticky mega menu.
Dynamic Storytelling System: Based on the competition analysis, I decided to use animations to bring feature updates to life. I also created a scalable storytelling system aligned with Razorpay’s brand across the event experience.
INFORMATION ARCHITECTURE
I prioritized hierarchy over equal representation, surfacing the highest-impact updates first while organizing the remaining features into structured secondary sections. This made the experience easy to scan without sacrificing the breadth of the product story.
Trade-off: Not every feature received equal visual prominence. While this required stakeholder alignment, the hierarchy helped merchants quickly discover relevant updates.
MAJOR CHANGE AFTER TESTING
7 out of 10 users struggled to distinguish between sections due to the similar structure. So I introduced subtle background gradients to strengthen the visual hierarchy and making the page easier to scan.
FEATURE ANIMATIONS
PROTOTYPING & DEVELOPER HAND-OFF
I first built an interactive prototype in Bolt so engineers could experience the intended interactions, identify technical limitations early, and align on implementation. This was followed by a comprehensive handoff with detailed specifications, responsive layouts, interaction documentation, and reusable components to ensure accurate and efficient development.
WHAT WE SHIPPED
A gateway-inspired loading animation welcomed users, while the keynote video subtly expanded on scroll to build anticipation and encourage exploration.
A subtle gradient system differentiated each section, creating a smooth visual flow. Each section began with an introductory video to quickly communicate the product story, followed by feature highlights and clear CTAs that guided users from discovery to action.
IMPACT
12.5
avg. minutes spent, 8x above B2B page benchmarks
13.7K
organic views with zero paid promotion
143K
LinkedIn impressions from a single launch post
WHAT STAYED WITH ME
01
8 PMs meant 8 different opinions on how their product should be represented. I learned that alignment isn't about consensus, it's about making a reasoned decision and bringing stakeholders along with you.
02
A feature I'd designed around hadn't shipped. I introduced a content freeze checkpoint, mandatory PM sign-off before any section entered high fidelity. It caught two more instances before launch. A formal checkpoint creates accountability a Slack confirmation never does.
You reached the end! Have an AI-generated cookie.
Unfortunately, AI still can't replicate the taste. If you'd rather have a real one, let's grab cookies and talk design. Just send me an email. (Click the cookie to eat it.)