Razorpay Sprint 2024
Sprint 2024 is Razorpay's inaugural online event, created to provide merchants with an exclusive, comprehensive look at the latest features and updates launched across Razorpay’s suite of products in the past six months.
Objective:
To build an engaging event website that highlights these updates, enabling merchants to easily explore new features and understand their impact.
My Contribution:
Research
Ideation
Wireframes & Prototype
UI-UX
Testing
Developer Hand-off
Team:
Designer Manager
Web Developer
Timeline:
July 2024 - August 2024
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.
Research Summary:
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.
Using these insights, we designed a clear, dynamic experience that guided users through 70+ product updates seamlessly—positioning Razorpay as an innovative, user-focused leader in financial solutions.
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
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.
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, users found it difficult to distinguish between feature sections due to similar card colors.
To improve clarity, we added subtle background gradients at the start of each section, helping users easily recognize where one set of updates ended and another began.
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
Like any project, this one presented unique challenges, with cross-functional collaboration being the most demanding aspect. Coordinating with eight different product managers across sections required attention to ensure the accuracy of both data and visuals.
A key learning was refining the data visualization of each product feature—ensuring that the UI not only presented information effectively but also conveyed the contextual relevance of each feature.