UX / UI Case Study · 2026

Paytm
Redesigned.

A complete overhaul of India's leading fintech super-app — reducing cognitive load, surfacing the QR code, and introducing a modern dark/light design system.

RoleUX / UI Designer
ToolFigma
Year2026
TypeApp Redesign
Paytm Redesign — All Screens
Scroll
330M+
Registered Paytm users in India
30+
Icons on the original home screen
4 taps
To reach QR code in original app
0 taps
QR code now lives on the home screen
01 — Problem Statement

Why Did Paytm
Need a Redesign?

Despite serving hundreds of millions of users, Paytm's interface had become cluttered, visually inconsistent, and hard to navigate — especially for new and occasional users.

Design Opportunity: Users don't need fewer features — they need a clearer path to the ones they already use. This redesign focuses on progressive disclosure, visual hierarchy, and a consistent design system that scales across all of Paytm's services.

🔴

Information Overload

The original home screen displays 30+ icons simultaneously with no grouping, overwhelming users and burying primary actions.

🔴

Inconsistent Visual Language

Mixed icon styles, varied colors, and no unified typography created a fragmented experience with no clear brand identity.

🟡

Buried Navigation

Critical features like QR payments required 4+ taps to reach, hidden beneath promotional banners and secondary content.

🟡

No Dark Mode

No official dark mode despite growing demand, causing eye strain for nighttime users — extremely common for a payments app in India.

🟢

Strong Core Functionality Worth Preserving

Users genuinely valued Paytm's breadth of services. The redesign goal was to surface this value more clearly — not reduce features, but organise them with clarity and intent.

02 — User Personas

Who Uses Paytm?

Three primary user archetypes, each with distinct goals and frustrations that shaped every redesign decision.

👨‍💼
Rahul, 28
Urban Professional · Daily UPI User

Goals

  • Split bills with friends instantly
  • Pay for metro & cabs seamlessly
  • Track monthly spending

Pain Points

  • Home screen too cluttered to find QR quickly
  • Promotional banners distract from core tasks
  • No quick-access to recent contacts
"I just want to pay fast. I don't need 40 services on screen every time."
👩
Priya, 35
Small Business Owner · Merchant

Goals

  • Accept payments via QR instantly
  • View transaction history easily
  • Manage merchant features

Pain Points

  • Hard to separate merchant vs personal features
  • QR code takes too many taps to display
  • Settings buried and confusing
"Customers are at my counter. I need that QR code in one tap."
👴
Suresh, 55
First-time Digital Payments User

Goals

  • Send money to family safely
  • Pay utility bills
  • Understand account balance easily

Pain Points

  • Too many icons with no clear labels
  • Navigation not intuitive for older users
  • Error messages not helpful
"There are too many things on screen. I get confused about which button to press."
03 — Design Decisions

Key Changes Made

Six major design decisions, each directly solving a user problem identified in research.

01

Dark Mode & Light Mode Design System

ProblemPaytm only offered a light theme by default and the toggle button to change it was hidden very deep within the settings, causing eye strain at night and missing modern user expectations.
SolutionFull dark mode using deep navy (#0F3460) with accessible contrast ratios, and easy to notice toggle button in the homescreen. Both modes share a unified design token system.
Reduces eye strain · Modern feel · WCAG AA compliance
02

Simplified Home Screen with Clear Hierarchy

ProblemOriginal home crammed 30+ service icons into one undifferentiated view, causing cognitive overload.
SolutionReorganised into focused sections: UPI Transfer at top, Recent Payments, 'Do More with Paytm' for discovery.
Reduced cognitive load · Faster task completion · Better discoverability
03

QR Code Elevated to Home Screen

ProblemReceiving payments via QR required 4+ taps — a critical friction point for merchants and frequent users.
SolutionQR code accessible directly from home via a persistent Scan QR button. One tap shows your QR with a Share option.
4 taps → 0 taps · Game-changer for merchant users
04

Categorised Services Grid

ProblemAll 30+ services shown in a flat grid making it hard to find travel, finance, or utilities without scanning everything.
SolutionServices grouped into Recharges, Travel & Tickets, Businesses, Pay Bills — each with clear section headers.
Faster feature discovery · Reduced search time · Cleaner layout
05

Redesigned Profile & Settings

ProblemProfile and settings buried in a hamburger menu with no visual hierarchy. Avatar and UPI ID hard to find.
SolutionDedicated profile screen: avatar card, name, UPI ID at top, Autopay status badge, logically grouped settings with icons.
Cleaner account management · Better settings discoverability
06

Unified Visual Language & Typography

ProblemInconsistent icon styles, varied color usage, and no cohesive visual identity across the app.
SolutionFull design system: Paytm Blue (#0F3460) primary, cyan accent (#00C6E0), consistent rounded icons, clean type scale.
Brand consistency · Professional appearance · User trust
04 — Prototype Screens

All Redesigned Screens

Every screen in both dark and light mode — the full Figma prototype across all major user flows.

05 — Before & After

Screen-by-Screen
Comparison

What changed in each major screen, and why it matters for real users.

Home Screen
▲ Before
Cluttered grid of 30+ icons with no visual grouping. Promotional banners dominate. QR code buried 4 taps deep.
✓ After
Clean hierarchy: UPI Transfer leads, Recent Payments surfaces contacts, QR accessible from bottom bar. Dark/light toggle on home.
Profile & Settings
▲ Before
Hidden inside a hamburger menu. Flat list with no grouping. Avatar and UPI ID hard to find.
✓ After
Dedicated screen with avatar card, name, UPI ID at top. Settings logically grouped — Account, Support, Danger Zone.
QR Code Access
▲ Before
Required 4+ steps: Home → More → UPI → Receive → QR. Daily friction point for merchants.
✓ After
Persistent Scan QR button on home. One tap shows your QR with a Share option instantly.
Services Discovery
▲ Before
All 30+ services in one flat icon grid. Finding travel or utilities meant scanning the entire screen.
✓ After
Split into Recharges, Travel & Tickets, Businesses, Pay Bills — each with a header and Explore shortcut.
Visual Design
▲ Before
Inconsistent icon library, mixed colors, no type scale. No dark mode. Heavy promotional styling.
✓ After
Unified design system: Paytm Blue primary, cyan accent, consistent icons, clean type hierarchy. Full dark & light mode.
Navigation
▲ Before
Hamburger menu as primary nav. No persistent bar. Must return to home to switch sections.
✓ After
Bottom navigation bar always visible. One tap to switch between Home, Payments, Services, and Profile.
06 — Outcomes

Results & Reflection

Projected UX improvements and the key insight that drove every decision in this redesign.

MetricBeforeAfter Redesign
Primary actions visible on home screen30+ icons~8 focused actions
Taps to access QR code4+ taps0 (on home screen)
Design system consistencyFragmentedUnified token system
Accessibility — contrast compliancePartialWCAG AA compliant
Theme supportLight onlyDark + Light modes
Navigation patternHamburger menuPersistent bottom nav bar
Services discoverabilitySingle flat grid4 categorised sections

Key Learning: Super-apps like Paytm face a unique challenge — serving power users who want quick access to everything, while welcoming first-timers who need clear guidance. The answer is progressive disclosure: show what matters most upfront, make everything else discoverable without friction. A cleaner UI doesn't mean fewer features — it means organising them with clarity and intent.