My Contribution:
Research, Ideation, Wireframes & Prototype, UI-UX, Testing, Developer Hand-off
Team:
Designer Manager
Web Developer
Timeline:
July 2024 - August 2024
Razorpay Sprint 2024
I designed a unified digital showcase for Razorpay, a platform powering payments for over 8 million businesses across India, to create a single, cohesive experience where all product feature updates could be documented and showcased in one place, built from scratch in 6 weeks, with 70+ features to highlight and 8 product managers to align.
Impact:
13.7k
Organic views
12.55
Average minutes spent
143.4k
Impressions on LinkedIn
What did I do:
8 PMs, 1 Engineer, 2 Marketers
Partnered across functions to align on goals, synthesize inputs, and define a clear creative direction for the showcase from the ground up.
70+ Product Updates, 6 Weeks
Structured complex product information while establishing clear content hierarchy and navigation across the entire experience.
12-15 Design Concepts
Explored a wide range of layouts, hierarchies, and storytelling approaches through rapid ideation, narrowed to one cohesive direction.
Design Process ✦
The Problem
How might we help merchants quickly identify which of Razorpay's 70+ product updates are relevant to their business, without losing them to the complexity of a long-form page?
Why it matters: With 70+ product updates to communicate, losing attention midway meant the entire product story would fall flat.
Target Audience
Dynamic founders, CEOs, and financial leaders driving India’s most disruptive companies. Decisive and forward-thinking, they embrace agility and technology to simplify complexity, fuel innovation, and focus on strategic growth.
Discovery:
For Razorpay’s Sprint 2024 event website, we looked beyond fintech, studying how top brands across industries present product updates in engaging, interactive ways. This cross-industry research revealed how storytelling and motion can make complex information feel intuitive and exciting.
✔ Updates are categorized by product area, making scanning effortless
✔ Short, jargon-free descriptions make technical updates accessible to all merchants
✘ No personalization, every merchant sees the same updates regardless of business type
Shopify
✔ Strong visual storytelling pairs product updates with clean UI previews
✔ Filtering by product category helps users find what's relevant quickly
✘ Heavy on technical language, making it harder for non-technical users to grasp value
✘ Long page with minimal hierarchy breaks makes sustained reading fatiguing
Stripe
Design Opportunities:
Interactive Long-Form Experience
Creating an interactive, engaging long-form page to minimize drop-offs, ensuring users remained engaged for an optimal experience.
Visual Storytelling with Animations
Presenting feature updates visually, with animations to maintain interest and effectively convey each update, ensuring a compelling user experience.
Scalable and Cohesive Identity
Develop a scalable visual identity for the event that is unique while aligning with Razorpay’s brand, ensuring cohesion within the company’s broader initiative.
-
A sticky top navigation bar to facilitate seamless navigation.
-
Highlighted important features using visually engaging card layouts.
-
Presented basic features in a clear list format for easy accessibility.
Wireframe 1
-
Utilized a horizontal slider to display the eight sections for intuitive navigation.
-
Emphasized visuals while presenting features in a concise list format.
-
Showcased basic features with accompanying icons for quick recognition.
Wireframe 2
Wireframe 1 for the winner
We moved forward with this direction because the sticky navigation let merchants jump directly to what was relevant to their business, eliminating the need to scroll through 70+ updates linearly. Cards created visual emphasis for high-priority features while the list format kept supporting updates clean and scannable, giving the page a clear hierarchy without overwhelming the reader.
Experimenting with the UI:
Design Language System:
We brought the design to life using Razorpay’s Blade DSL, translating ideas into functional interfaces quickly and consistently. Leveraging its component library ensured visual harmony, faster development, and a familiar experience that felt intuitively Razorpay.
.png)
Fixing Colour Balance:
Feature Animation:
We created the animations using Jitter, leveraging its intuitive motion design tools to enhance our visuals with dynamic, fluid movements. This allowed us to bring key design elements to life, add personality to the interface, and communicate interactions more effectively through motion.
Usability Testing:
During testing, 4 out of 5 users struggled to distinguish between feature sections due to similar card colors.
We introduced subtle background gradients at the start of each section, and in a follow-up round all 5 users navigated between sections without hesitation.
Insights
Incorporating Testing Insights:
Users were greeted with a loading animation that felt like a gateway opening, inviting them into the next generation of commerce.
As they scrolled, the keynote video subtly expanded, naturally drawing their attention and building anticipation, turning the journey through the site into an experience of discovery and excitement.
Users appreciated the addition of a mega menu on the second fold, which offered a clear overview of all sections and made navigating the site effortless.
The progress bar and dropdown menu in the navigation further enhanced their sense of orientation—giving them confidence and control as they explored, without ever feeling lost.
A subtle color gradient distinguished each section, creating a smooth visual rhythm as users navigated the site.
Every section opened with an introductory video, helping users quickly grasp the product’s story before diving deeper.
This was followed by detailed feature highlights and a clear sign-up call-to-action, guiding users seamlessly from understanding to engagement.
Project Outcomes:
Users and internal reviewers appreciated the site’s clear visual storytelling and cohesive design, noting how easily they could navigate and understand complex product updates. They felt engaged and guided throughout the experience.
Feedback also highlighted opportunities to simplify some interactive elements and improve load times, which users felt would make the journey even smoother and more enjoyable. The recognition at the company’s internal design showcase reinforced the sense of achievement and pride in creating an experience that resonated both emotionally and functionally.
Impact:
13.7k
Organic views
12.55
Average minutes spent
143.4k
Impressions on LinkedIn
