All Works

Available

mobile POS Case Study

UX CASE STUDY

Razorpay POS

Framework

Intuitive and Scalable Design with a Dynamic Design System for Seamless Merchant Experience

Introduction & Project Brief

Redesigning the mPOS-X Framework

This case study covers the redesign of mPOS-X, a mobile point-of-sale solution built by Ezetap (now Razorpay POS).

The goal was to improve the user experience, simplify payment processing, and make the system ready for new payment technologies and VAS features by banks.

By applying UX best practices and aligning with both user and business needs, the redesigned framework became a more versatile and user-friendly app – helping merchants accept payments smoothly and efficiently.

Client:

Ezetap (Now Razorpay POS)

Year & Duration:

2020

6 Months

Platform:

Android Mobile App

Design Team:

Sachin Thumbarathy (Lead)

Kalyani Pawar

Industry

Fin-Tech | PoS | Merchant

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 mPOS-X app stemmed from a crucial realization:

The earlier version of the mPOS-X app was built without much focus on UX, which led to a poor user experience.

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.

Process

Addressing the Challenges

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.

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

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.

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.

Process

Target Users

Banks

55%

Retail Merchants

Enterprises

30%

Enterprise Employees

Government

10%

Government Employees

Others

5%

Others

Owner/Manager of Retail Store (Tech savvy)

They integrate POS devices with their store tills, mainly for payments and business tools.

Retail store Employees - (Non Tech savvy)

They focus on daily tasks like processing sales and managing stock, using POS devices and P2P soundboxes for fast UPI transactions.

Enterprise Employees

They integrate their apps with the payment POS devices, using them for regular payments while assisting customers with EMIs, brand deals, and special offers.

Pharmacies, restaurants, hospitality & others

They integrate their store tills with POS devices, primarily using them for payments, valuing trust, accuracy, transaction history, and receipts.

Traffic Police/Govt employees

They primarily use the device for payments, while also utilising some of Ezetap’s additional features.

End users

Prefers quick payments and a fast checkout experience, but appreciates being informed about the best deals and offers available.

Understanding User Needs:

The device is used by different personas across varying roles in businesses, healthcare, education, and the government. In addition to our direct customers, even our customers' customers (end-users) fall under our user pool.

Design Goals & Objectives

The redesign aimed to achieve the following objectives

Easy Navigation

Make it simple for users to move through the app and find what they need.

Future-Ready

Build a flexible framework that can adapt to new payment technologies and upcoming features.

Smooth Experience

Streamline key flows so that payments feel quick and effortless.

Bank Branding Support

Allow banks to bring in their own branding while keeping the merchant and customer experience consistent.

Process

Information Architecture

We studied competitor apps like Pinelabs, Mosambee, and Paytm for Business to understand their strengths and gaps.

These insights helped shape the structure of the mPOS app, ensuring it offered unique features and a clear, user-friendly flow that stood out in the market.

A clear information architecture laid the foundation for a smooth user journey.

Balancing Functionality and Innovation

Home Screen Redesign

The Home Screen of the mPOS app serves two primary purposes: facilitating sale transactions and providing access to other features. However, the redesign process faced specific challenges that required careful consideration and thoughtful solutions.

Balancing Functionality and Innovation

Home Screen Redesign

The home screen presented unique challenges that required innovative solutions!

Home / Problem 1

Striking the
Right Balance

The previous Home Screen design had a singular focus on sales transactions, overshadowing other vital features.

This imbalance limited opportunities for innovation and hindered the integration of new functionalities.

As Ezetap’s client base grew across sectors like retail, banking, and government, the Android POS app, while functional, began to fall short. It got the job done but wasn’t the most convenient or enjoyable for merchants.

On the other hand, banks (our biggest clients) weren’t seeing the desired profitability from other VAS features.

Home / Problem 1

Solution

To address this issue, we've transformed the Home Screen into a live dashboard.

This strategic redesign prioritised a holistic view of all features, empowering merchants with an "at a glance" experience.

Intuitive
Sales
flow

Intuitive Sales flow

While we wanted the sales flow to remain prominent and a priority one, we also aimed for an intuitive yet mellow user experience

Widgets
on Home
Screen

Widgets on Home Screen

We introduced widgets that offered a snapshot of vital merchant activities and account status.

Tons and tons of

Iterations

100+ layout iterations just on home screen alone

Home / Problem 2

Lack of Hierarchy & Unintuitive Information Placement

Previously, the application was hampered by its poor organization and perplexing disposition of details.

For instance, the prominence given to the Khaata (credit) feature, despite its infrequent use, led to cognitive overload and hindered user understanding.

Home / Problem 2

Solution

Clear Prioritisation & Visual Differentiation of elements based on Heuristic Analysis

By enabling users to switch between flows seamlessly and distinguishing between them visually, we enhanced user understanding and navigation.

Dynamic
Button for
Sales flow

Dynamic Button for Sales flow

During Khaata mode activation, the button's colour and text information adapt to reflect the present choice.

Home / Problem 3

Designing a Dynamic Interface for Varying Feature Sets

The SAAS model leads to variations in the available features and interfaces for each user/bank.

The mPOS functions uses a SAAS infrastructure, incorporating a broad scope of capabilities and additional valued solutions and facilities, tailored for assorted banks/non-banking financial companies and traders.

Home / Problem 3

Solution

Through numerous revisions and evaluations, we crafted an adaptive UI that highlights relevant functionalities without sacrificing user engagement.

Variants of activated services section

Based on number of services is active, the button's colour, font style, container colour, title etc changes based on predefined variants.

Activated Services:

01

Title:

No

Activated Services:

02

Title:

No

Activated Services:

03+

Title:

Yes

By creating a modular design that dynamically adjusts based on activated features, we provided a scalable solution that caters to varying requirements.

Home / Problem 4

Other Use Cases:
P2P and Soundbox Integration

Inclusion of Push 2 Pay (P2P) and Soundbox use cases required disabling manual amount entry, necessitating a redesign of the "Amount Entry" button.

The prominent "Amount Entry" button needed to be replaced with an effective solution that maintained usability while accommodating the new functionalities.

Home / Problem 4

Solution

We tackled this challenge by repurposing the "Amount Entry" button's space to convey essential information about Push 2 Pay (P2P) and Soundbox.

Clear visuals and concise text were integrated to swiftly guide users through these functionalities.

Push 2 Pay

Facilitating sophisticated payments via Ezetap POS devices from centralized Terminal POS systems.

SoundBox

A unique solution, where merchants receive voice and visual alerts when a customer pays via UPI QR Code.

The updated UI effectively dealt with varying functionalities without bombarding the users.

With this approach, we made sure that the structure was ready for future enhancements and could be expanded.

Dynamic
Bank Branding

The need to effectively communicate new offers or deals to merchants and customers prompted the creation of a dedicated Promo Section within the mPOS app.

Balancing branding elements while preserving a clean interface presented a significant challenge.

Home / Problem 4

Solution

Through a detailed analysis, we identified primary and secondary colors unique to each bank's identity. This insight guided our approach to strategically assign colors 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

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 dark themed 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

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 impeccably assimilated unique banking aesthetics, preserving design simplicity.

Now, banking institutions can align their branding with the application's interface, bolstering the Software as a Service model and providing a uniformed, customised experience to each banks brand identity.

Enhancing UX and Support Efficiency

Account
& Settings

The Account section of the mPOS-X Framework revamp focuses on improving merchant and device details presentation, enhancing user self-diagnosis, and facilitating efficient support.

Account /Problem

Disorganized Merchant & Device Details

Support calls from merchants regarding device-related issues were common, requiring essential info like device & account details.

The previous app lacked structured presentation of these details, leading to confusion.

Solution

By studying various requirements from all departments and user feedback, we solved the problem by having a heuristic analysis considering following:

"At a Glance"
Experience

+

Segmentation &
Prioritization

+

Detailed Device
Diagnostics

Account

Details Segmentation

Important static details like MID, TID, and app versions were displayed directly on the Account screen.

Account

Details Segmentation

Important static details like MID, TID, and app versions were displayed directly on the Account screen.

Device Status

Detailed Device Diagnostics

The diagnostic screen’s design incorporated large icons and colour-coded indicators for clear status visibility.

Device Status

Detailed Device Diagnostics

The diagnostic screen’s design incorporated large icons and colour-coded indicators for clear status visibility.

Help & Support

Customer Care

The help and support section encompasses logging support tickets and requesting callbacks.

Help & Support

Customer Care

The help and support section encompasses logging support tickets and requesting callbacks.

Simplified 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.

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.

History

Filters & Summary

With advanced filters, a summary overview, and a detailed transaction view, users can effortlessly track and access their transaction data.

Payment SDK Case Study

Click here for a detailed case study of Omni-Channel Payment acceptance solution.

View Case Study

EMI Calculator

My Khaata

My Rewards

NCMC | qSPARC

Alerts

Other Screens

Value Added Features and Misc Screens

Other Sections

This application contains numerous interfaces. It also offers diverse functionalities and bonus offerings. Incorporating them in this case study could result in excessive length.