Task
Web UX,
Visual Design,
Illustration,
Motion Design,
Research,
Planning
Platform
Website
Figma, Lottie, Usertesting,
Illustrator,
After Effects
Tools
6 months,
Aug 2021 - Jan2022
Timeline
Rohit-
Visual Designer
Harshit -
Product Manager
Deepak-
Engineering
Team & Role
Shipped
Status
Instant Settlements
for Marketplace
Research
Learnings
Compiled by the Razorpay Capital design team, this document served as a repository of key research findings from user interviews, surveys, and market analysis. It outlined user preferences, pain points, and behaviors, providing stakeholders with valuable insights to guide decisions.
My role was to manage and update the document as new insights and findings were added.
Design a cohesive and user-friendly interface that Explains the settlement process while fostering trust, clarity, and ease of use for marketplace sellers.
As a first in market product for Razorpay, the goal was to create an intuitive and visually appealing experience that empowers sellers to manage their finances.
Objective
Context
What is Razorpay Capital?
Line of Credit
Capital
Working Capital Loan
Instant settlements for Marketplace
Corporate Cards
Razorpay Capital is the Lending arm of the Razorpay family.
It powers small businesses to small to medium business through working capital loans, Line of Credit and Instant Settlements.
Current seller scenario
Marketplace sellers often face cash flow challenges due to the 7-14 day settlement cycle, delaying access to their earnings. This can affect bill payments, vendor payments, staff salaries, and inventory management, making it harder to sustain growth and respond to business needs.
Offering: Instant Settlements
Instant Settlements enable Amazon sellers to access their funds immediately after a sale is completed, eliminating the typical revenue delay and providing instant access to their earnings.
Design Challenges and Scoping
Challenge
Scope
This is a first in India market product. Therefore building trust through design by ensuring clarity, transparency, and reliability in presenting financial information and settlement processes.
Understanding Marketplace Sellers:
Understand Amazon seller stories and pain points.
Compete Study and Analysis:
Studying their existing website and analysing it on the basis of Information(Offerings), UI/UX
Communication Strategy:
Strategy that addresses how the product’s features and advantages will be communicated to the sellers.
Creating a compelling narrative using visual elements to effectively engage users and communicate the product's benefits.
Visual Design:
Develop a captivating visual identity that resonates with the TG.
Branding Consistency:
Following and building on the branding guidelines.
Design Redlines:
This encompasses dimensions (width, height), typography, and colour choices.
Keeping designs fresh and innovative while also aligning with current trends without compromising usability or becoming overly complex.
User Experience Design:
Design intuitive Website that guide sellers through the process of initiating, tracking, and managing instant settlements.
Explaining the Steps
Dedicated time to exploring various styles for this section. It was open for experimentation, whether it be parallax, a standard horizontal scroll, or simply a static image.
Interaction
Price Section
Selected
Design is rarely a linear process. Embracing iterations and feedback loops helps refine and improve designs continually.
Designing within technical constraints ensures cost-effective and timely execution.
Striking a balance between visual appeal and usability is crucial. A beautiful design that isn't functional won't serve its purpose.
Feedback from the pilot
Users struggled with horizontal scrolling, hindering easy access to content beyond this fold.
Call-to-Action (CTA) buttons placed at every section effectively captured user attention and met anticipated outcomes.
Over 5k users were onboarded within 2 months and exceeded the expectation
Additions to version 2
Testimonial section was added to show the impact and to increase the confidence for potential customers.
The Pricing section underwent fluctuations due to its evolving nature.
An inquiry section was incorporated due to increased interest from businesses operating on other marketplaces like Flipkart and Shopify.
Technical Feasibility in consideration
Platform Compatibility
The website functions seamlessly across all browsers, operating systems, and devices.
Integration
Evaluating the feasibility of integrating tools, databases, and APIs.
Scalability
Designing the website to scale efficiently without performance issues.
Cost and Resources
Feasible designs align with timelines and budgets, preventing delays and costly rework.
Performance
Optimizing loading times and responsiveness to enhance user experience.
UX & Storytelling
Whether for the website or promotional materials, the narrative centered around three core elements:
Describing pain points and illustrating how Razorpay addresses them.
The Razorpay offering
1
Informing users about the effortless and hassle-free withdrawal process.
Easy withdrawal process flow
2
Instructing users on a simple but important 3-step process to get started.
Easy application process
3
Razorpay’s vibrant and modern branding required a design approach aligned with current trends. Key aspects I considered include:
Approach: Parallax movements on scroll interactions
Concept 1 (Selected)
How easy is it?
Animation and the pointers help users understand the easy process to withdraw
3 steps:
How to get started and start your smooth settlements.
Last sell:
A nudge to the users to get started on the journey with a CTA
The story starts with sellers accepting Amazon orders, explained through visuals and text. As users scroll, parallax effects show the 14-day payment cycle. Next, challenges like cash flow and bill payments are highlighted visually. Razorpay then emerges as the solution, with its icon becoming the focal point, symbolizing its role in addressing these seller challenges.
The story starts with sellers accepting Amazon orders, explained through visuals and text. As users scroll, parallax effects show the 14-day payment cycle. Next, challenges like cash flow and bill payments are highlighted visually. Razorpay then emerges as the solution, with its icon becoming the focal point, symbolizing its role in addressing these seller challenges.
Concept 2
The animation starts with a full-screen illustration of people placing orders, with a central title and text providing context. As users scroll, parallax effects reveal new layers, highlighting the delay in sellers receiving payments. While the background shifts, fixed text outlines challenges like cash flow, bill payments, and inventory management, with new visuals illustrating these seller difficulties.
Mobile Web
The Pilot: Site version 1
Market Analysis Insights
Amazon lending helped the US sellers reach their goals and help them with financial crunch. This was missing in India.
Amazon aimed to support sellers throughout the pandemic and beyond by implementing key measures, including fee waivers for selling on the platform and refunds on returns.
Amazon sellers still had to wait for weeks for the payout even after making sales on daily basis.
Analysed websites (Competes-Indirect) for their layout and visual style
Footer section
Visual Design
Illustration and Motion Design
Colour and Type
The 60-30-10 rule in web design is a guideline often used to create a balanced and visually appealing colour scheme.
Razorpay brand colours
Mulish was chosen as the default font for all Razorpay Capital websites and this project to uphold a unified visual identity and design consistency.
This initial sketch was created to comprehend the product’s offerings and how Razorpay is addressing the underlying issue.
The components included in the animation were a seller, a marketplace, Razorpay, and the remaining background elements.
Mood-board
Seller
Sketches were created to depict a shop, considering the diverse range of sellers in India, varying from small businesses to medium-sized enterprises.
Selected Style
Marketplace
Initially, my concept depicted these marketplaces as buildings, akin to corporate structures.
User interactions changed my perspective.
Selected Style
At regular intervals, the elements and the background will be combined to ensure their harmony.
Selected Style
Mobile
Explorations were specifically centred around the elements that the target audience could relate to
Selected Style
Get in touch!
I hope you enjoyed what you saw! If you have any feedback, want to chat about a project, or share similar interests, I’d love to hear from you!
Designed in Figma, Built on Framer by Rohit Pawar © 2025
Ease of Use
This series of UI screens was required to create an accompanying animation/gif for a 3-step process.
Mobile
A subtle thematic link connects the first three sections, weaving them into a coherent narrative.