UX CASE STUDY
Razorpay POS Payment SDK
Transforming the Payment Acceptance SDK Framework for a Seamless Merchant Experience
Introduction
Redesigning the Payment SDK
Ezetap (now Razorpay POS) set out to redesign its Payment SDK to fix usability issues and prepare for future payment technologies.
This case study covers the key reasons for the redesign, the design goals, and the outcomes — showing how the SDK became more user-friendly, scalable, and future-ready.
Client:
Ezetap (Now Razorpay POS)
Duration:
2019
|
3 Months
Platform:
Android Mobile SDK
Team Members:
Sachin Thumbarathy
(Sole Designer)
Industry
Fin-Tech | Payments | PoS
A Glimpse of Ezetap's Symphony
What is Ezetap?
Ezetap by Razorpay is a smart payments platform built for businesses. With over 5 lakh POS terminals across India and the Middle East, it helps merchants accept payments easily.
Businesses can take all types of payments — whether at retail counters, in-store, or even at the customer’s doorstep.
With a kaleidoscope of payment solutions, ezetap empowers merchants to orchestrate seamless transactions across various channels.
Understanding the need for redesign
Why the Redesign?
The decision to revamp the Payment SDK stemmed from a crucial realization:
The first version of the Payment SDK was built without much focus on UX, which led to a poor experience for both merchants and customers.
The redesign was done to fix this
by following UX best practices, keeping user needs at the center, and improving workflows.
The decision was clear:
Our aim was not just to make the app functional, but to create a modern, scalable, and user-friendly platform that could grow with the changing needs of merchants and clients.
Design Goals & Objectives
The redesign aimed to achieve the following objectives
Simpler User Flows
Make payment acceptance quick and easy for both merchants and customers.
Future-Ready Framework
Build a flexible system that can support new payment technologies and features.
Custom Bank Branding
Allow partners to easily apply their own brand identity while keeping the experience consistent.
Modern Look & Feel
Refresh the app’s design to reflect growth and engage users.
Constraints & Design Considerations
Roadblocks we faced along the way
Addressing challenges like the SDK nature, SaaS model, diverse payment methods, regulations, dual use cases, and varying POS device specifications required a careful balance in design decisions.
SDK Nature
SaaS Personality
Diverse Payment Methods
Regulations & Certification
Bank Branding and Interface Tidiness
Designing for dual use cases
Various Screen Sizes
Managing app size and feature prioritisation.
Need for Redesign
While leadership wanted to refresh the app’s identity, aligning the redesign with actual user needs was essential to ensure its success.e for users to move through the app and find what they need.
User Preferences
Our initial research for previous products revealed that users valued familiarity and ease of use, often resisting complex changes. The redesign had to enhance their experience without overwhelming them with unnecessary complexity.
Diverse User Base
With the app serving a wide range of users, including banks, enterprises, and government officials, whose percentages shifted annually, it was challenging to tailor the redesign for a single user group.
Banks
55%
Retail Merchants
Enterprises
30%
Enterprise Employees
Government
10%
Government Employees
Others
5%
Others
Multiple Device Use Cases
All-in-One Smart POS
(Aka Android POS)
All-in-one powerhouse. Accept payments, print receipts, scan QR and barcodes and more
Eg: PAX A920
DigiPOS
(Aka Mobile POS)
Take your POS anywhere. Transform any tablet or mobile into a powerful payment terminal
Eg: PAX D180 + Android Phone
Process
Information Architecture & User Flows
After a lot of talks with engineering team, analysing competitors and hundreds of iterations, the revamped user-flows for SA-X is finally ready.
To me, this was the most crucial UX design process for a Payment System. Thats why the app’s behaviour was integrated into the Userflows from the groundup.
Simplifying the userflow
I started by sketching diverse layouts and organizing them into a structured Information Architecture (IA). This formed the blueprint for an intuitive user journey.
Revamped the app’s information architecture to prioritise key features and provide easy access to essential functions while ensuring flexibility for future integrations.
Speed in Transaction
Revamping user flows involved fine-tuning from the ground up, removing complexities, and simplifying navigation
Design Process
Sketches & Wireframes
The transformation of the mPOS-X Framework hinged on the meticulous process of wireframing and continuous iteration.
Here’s a concise journey into how I shaped the app’s interface to create a seamless user experience:
Wireframe Prototype
These were iteratively tested and refined based on feedback from internal stakeholders and users.
Visual Identity
Dynamic
Design
System
One of the core objectives of the redesign was to incorporate custom dynamic bank branding, harmonising the app’s appearance with each bank’s unique identity. Balancing branding elements while maintaining a clean interface posed a significant challenge
Firstly, we created a Design System that caters to our specific needs.
Balancing branding elements while preserving a clean interface presented a significant challenge.
Lato
Lato Typography
Lato offers a clean, modern feel that improves readability, which is critical in fintech for clear communication of financial information. It’s also multi-lingual and versatile across headers, body text, and labels. It provides a sense of professionalism and trustworthiness.
Header 1
Lato Heavy - 36pt
Freedom of thought, conscience
Header 2
Lato Regular - 36pt
Freedom of thought, conscience
Title 1
Lato Bold - 32pt
Freedom of thought, conscience
Title 2
Lato Regular - 32pt
Freedom of thought, conscience
Headline 1
Lato Bold - 24pt
Freedom of thought, conscience
Headline 2
Lato Bold - 20pt
Freedom of thought, conscience
Body
Lato Regular - 24pt
Freedom of thought, conscience
Caption
Lato Heavy - 20pt
Freedom of thought, conscience
Dynamic Fields
Primary
#6655E8
Secondary
#F5821E
TitleBarTheme
Light
TitleBar
#FFFFFF
Static Fields
White
#FFFFFF
Black Mirage
#1C202F
Background
#F0F2F5
Container
#F8F8FC
Border 1
#E6E6E6
Border 2
#D6D6D6
Caption 1
#5C7397
Caption 2
#99ABCA
Yellow
#FFC93E
Green
#55A94F
Orange
#F5821E
Red
#C65151
Through a detailed analysis, we identified primary and secondary colors unique to each bank's identity.
This insight guided our approach to strategically assign colours across the app's interface.
Bank
Primary
Secondary
HDFC Bank
ICICI Bank
Kotak Bank
Yes Bank
Network International
SBI Payments
Axis Bank
IDFC First Bank
#004C8F
#004A7F
#003874
#0062A8
#003366
#292075
#AE275F
#9D1D27
#ED232A
#F5821F
#ED1C24
#D71920
#FF6666
#00B5EF
#EB1165
#BD7061
New Fields for Customization
To accommodate bank-specific branding, we introduced new fields. These offered precise control over the app's appearance for each bank.
Primary Color
#0D4A86
Secondary Color
#F37E20
Home Titlebar Color
#232323
Home Titlebar Theme
dark
Specific fields like titlebarColor and titlebarTheme were created to assign colors to non-home screen title bars.
This allowed for a darker bank identity representation on the home screen while maintaining a lighter theme on others.
Minimal Fields, Maximum Impact
To accommodate bank-specific branding, we introduced new fields. These offered precise control over the app's appearance for each bank.
Primary Color
#AE275F
Secondary Color
#EB1165
Titlebar Color
#FFFFFF
Titlebar Theme
light
Home Titlebar Color
#AE275F
Home Titlebar Theme
dark
Unified Design
Customized Branding
The solution seamlessly integrated custom bank branding while maintaining design minimalism. Banks could now harmonise their branding with the app's interface, enhancing the SAAS model and offering a consistent, personalised experience to users.
Pay Mode Icons
On Light TitleBar
On Dark TitleBar
Other Icons
On Light Container
On Dark Container
Icon Style
Our design includes bespoke, realistically styled, colorful icons that echo real-world payment methods and fit a light theme. To match darker titlebars, we also created a collection of monochrome white icons. Their purpose is to facilitate user behaviour guidance and assist with optical navigation.
Icon Guideline
Scalable icons, with standard sizes at 20px, ensuring they are noticeable without overwhelming other elements.
4 px
Small 1
8 px
Small 2
12 px
Small 3
16 px
Medium 1
20 px
Medium 2
24 px
Medium 3
32 px
Large 1
40 px
Large 2
48
Large 3
Layout Spacing
The design employs a 4-point grid schema, enabling uniform, versatile and scalable gaps that ensure balance on all display sizes of POS Devices which has very low resolution and low PPI.
Above example is displaced at xxhdpi resolution
Padding and Margins
Various Buttons
Filled with Primary or Secondary Colors with white text, rounded corners to maintain a modern look. Used for main actions like “Submit,” “Save,” and “Continue.” Subtle animations with slightly darkened shades, providing feedback on interactivity.
Titlebar on various payment modes
Titlebar on various dark themed bank branding
Title Bar
Variations of titlebar on various payment mode screen. Currency symbol (₹/$) is used everywhere instead of currency code (if available)
Other Components
A variety of card templates have been established with different states (conditions). What we refer to as 'card components' may also be seen as templates, given they incorporate multiple base elements. Used alerts to give quick feedback on performed tasks.
Alerts / Toast Messages
150+ unique screens of
UI Designs
Total 500+ screens based on various conditions and solutions
Balancing Functionality and Innovation
Pay with
Screen
Universal Payment Screen or 'Pay with' screen is the screen in which the user chooses the payment mode. This screen also displays additional details about the order and payment offers if available.
Solution
To address this, we revolutionised the Home Screen into a dynamic dashboard.
Universal
Payment Screen
This strategic redesign prioritised a holistic view of all features, empowering merchants with an "at a glance" experience.
Payment Promos
JSON-based
Template Generator
A JSON-based template generator was introduced to enable promo configuration. Banks/NBFCs could easily add text or image promos to the configurations for display on the main screen.
Created a JSON-based template generator allowing banks to configure promos easily.
Payment Offer Promos
Notification Centre
Where merchants receive alerts, triggers, and updates about critical information. Whether it's about their Khaata, rewards, or new features, merchants can effortlessly stay informed and make well-informed decisions.
In-App Messaging
Establishing direct communication between merchants and providers through personalized messages and offers
Promo 2.0
The Promo 2.0 comprising of a powerful Promo generator, IAM & Notification Centre became an integral part of the app, providing an effective way to engage users with offers, deals, and promotions, ultimately enhancing the app's value to both merchants and banks.
Simplified for Diverse Payments
Payment Modes
Various payment options/modes that Ezetap has such as Card, EMI, QR Code, Wallets, etc
The solution included a unified layout, intuitive categories, and detailed transaction views.
Payment Mode
Card Payment
The help and support section encompasses logging support tickets and requesting callbacks.
User Flow (Card Insert)
Basic Card Flow
Initial Sketches
Hi-Fi Wireframes
Service Fee & Cashback
Service Fee
Service Fee
Cashback
Dynamic Currency Conversion
Signature
Payment Mode
Bank based EMIs
Bank Based EMI
Payment Mode
Other Affordabilities
Other affordability options
Payment Mode
UPI & Bharat QR
UPI | Bharat QR
Payment Mode
Payment Link
Payment Link
Payment Mode
Walletware 2.0
Walletware 2.0
Optimised for Diverse Payments
Transaction History
In redesigning the Transaction History section, we tackled the challenge of presenting diverse payment methods cohesively.
Enhanced Transaction History for Diverse Payments
This redesign significantly contributes to providing a streamlined and efficient payment experience for merchants.
An integrated design, logical groupings, and comprehensive transaction insights were the resolution.
Clients can now seamlessly understand their financial activities, whether it's Credit Cards, Wallets, EMIs, Payment Links, or UPI
History
Transaction View
The revamped Transaction History section offers a user-friendly experience tailored to diverse payment methods.
No Cost EMI - Expanded
The revamped Transaction History section offers a user-friendly experience tailored to diverse payment methods.
History
Filters & Summary
With advanced filters, a summary overview, and a detailed transaction view, users can effortlessly track and access their transaction data.
In HDFC Branding
Prototype
XD Prototype of the App branded in HDFC Branding Colors:
What followed after the release!
Outcomes
Our release had a positive impact, attracting new users and pleasing partner banks with enhanced usability and aesthetics.
It brings me immense satisfaction to realize that the solution I assisted in crafting is now aiding millions of merchants via prominent banks in India and the Middle East.
The new user experience and interface have received widespread acclaim from end-users, partner banks, and enterprises, validating the substantial impact our work has made in the fintech solutions landscape.
End of Case Study
Thank you!
Please open Case Studies on Desktop
UX Designer
Design Manager
Motion GFX Animator
No Code Developer
UX Designer
Design Manager
Motion GFX Animator
No Code Developer
UX Designer
Design Manager
Motion GFX Animator
No Code Developer
UX Designer
Design Manager
Motion GFX Animator
No Code Developer
Crafted with ❤️ & Pixel Alchemy
©️ 2025 Sachin Thumbarathy. All rights reserved.