Redesigning the UPI QR service to boost adoption

Redesigning the UPI QR service to boost adoption

Led a self-initiated redesign of Pay Nearby's UPI QR flow to address usability barriers hindering retailer adoption. The project focused on simplifying the interface by eliminating cognitive overload and poor error handling. The new design streamlined critical tasks, directly supporting business growth by reducing key points of friction.

ROLE

Product Designer

Visual Designer

SKILLS

UX Research

Product Thinking

Stakeholder Management

Interaction Design

ROLE

Product Designer

Visual Designer

TIMELINE

4 Months

TEAM

Product Manager

Frontend Developer

Backend Developer

INDUSTRY

Fintech

TIMELINE

4 Months

TEAM

Product Manager

Frontend Developer

Backend Developer

SKILLS

UX Research

Product Thinking

Stakeholder Management

Interaction Design

The Context

The Context

Pay Nearby enables retailers in India's tier 2-3 cities to offer financial services and earn commissions. Its UPI QR code service is a vital revenue driver with over 5,00,000+ users.

Core Problem

Core Problem

Based on our findings, we defined our problem statement:

Lack of visual hierarchy and discovery of benefits in UPI QR

Lack of visual hierarchy and discovery of benefits in UPI QR

Pain Points Identified

Pain Points Identified

Action overload

Action overload

EXCESSIVE OPTIONS

EXCESSIVE OPTIONS

NO CLEAR HIERARCHY

NO CLEAR HIERARCHY

The UPI QR main screen presents too many competing actions, creating unnecessary cognitive load.

The UPI QR main screen presents too many competing actions, creating unnecessary cognitive load.

EXCESSIVE OPTIONS

NO CLEAR HIERARCHY

Dead-end. No direction

NO CONTACT DETAILS

LACK OF GUIDANCE

For user trying to increase their limit, absence of context causes confusion and disrupts user flow.

Arbitary infodump

VISUAL NOISE

IRRELEVANT CONTENT

The flow is cluttered with non-essential details that creates visual noise and distracts from the core action.

Poor error handling

BROKEN RECOVERY

SYSTEM FRAGILITY

The system fails to anticipate and gracefully handle common failures resulting in generic failure messages.

Dead-end. No direction

For user trying to increase their limit, absence of context causes confusion and disrupts user flow.

NO CONTACT DETAILS

LACK OF GUIDANCE

Arbitrary infodump

The flow is cluttered with non-essential details that creates visual noise and distracts from the core action.

VISUAL NOISE

IRRELEVANT CONTENT

Poor error handling

The system fails to anticipate and gracefully handle common failures. Errors like session expiration result in generic failure messages.

Broken Recovery

SYSTEM FRAGILITY

Design Principle

Design Principle

Based on pain points we derived the design principle

Progressive Disclosure

Content is revealed as the user progress in their journey

Progressive Disclosure

Content is revealed as the user progress in their journey

Information hierarchy

Focusing on one piece of information at a time

Information hierarchy

Focusing on one piece of information at a time

Relevant Information

Contextual nudges based on users past activities

Relevant Information

Contextual nudges based on users past activities

Solution

Solution

After thorough research and iteration, we landed on a solution that would address our pain points

Solution breakdown

Solution breakdown

Task focused QR screen

Task focused QR screen

The QR screen was redesigned around the retailer’s primary task that is receiving payments. Grouping core actions like share, download, and amount-specific QR reduced cognitive load and sped up decision-making during transactions.

The QR screen was redesigned around the retailer’s primary task that is receiving payments. Grouping core actions like share, download, and amount-specific QR reduced cognitive load and sped up decision-making during transactions.

OLD QR CODE SCREEN

OLD QR CODE SCREEN

NEW QR CODE SCREEN

NEW QR CODE SCREEN

Actionable stacked cards

Actionable stacked cards

Secondary actions like increasing limits are reorganized into stacked, auto-rotating card. This consolidates previously scattered cards into one unit, keeping them visible yet unobstructive allowing the payment task to remain the retailer’s main focus.

Secondary actions like increasing limits are reorganized into stacked, auto-rotating card. This consolidates previously scattered cards into one unit, keeping them visible yet unobstructive allowing the payment task to remain the retailer’s main focus.

Multiple iterations were explored to fine-tune prominence versus distraction.

Multiple iterations were explored to fine-tune prominence versus distraction.

OTHER EXPLORATIONS

OTHER EXPLORATIONS

Driving action through relevant timing

Driving action through relevant timing

Banners and notifications appear at key moments. For instance "Increase Limit" at 75% usage. This is done using smart triggers and auto-dismissal to stay relevant.

Banners and notifications appear at key moments. For instance "Increase Limit" at 75% usage. This is done using smart triggers and auto-dismissal to stay relevant.

Creating urgency for time sensitive action

Creating urgency for time sensitive action

Amount-specific QR codes last 3 minutes with a color-changing timer to show urgency. All user path like completion, mid-exit, or expiry—are clearly supported.

Amount-specific QR codes last 3 minutes with a color-changing timer to show urgency. All user path like completion, mid-exit, or expiry—are clearly supported.

Clear transaction details

Clear transaction details

Key details like date, time, and receipt download were added to the termination screen. This provides users with clear proof of transaction and equips support teams with necessary details for faster issue resolution.

Key details like date, time, and receipt download were added to the termination screen. This provides users with clear proof of transaction and equips support teams with necessary details for faster issue resolution.

OLD TERMINATION SCREEN

OLD TERMINATION SCREEN

NEW TERMINATION SCREEN

NEW TERMINATION SCREEN

Assistive experience

Assistive experience

QR Sticker activation was redesigned with clear visual cues and step-by-step guidance, ensuring retailers could easily link stickers to their account without confusion or errors.

QR Sticker activation was redesigned with clear visual cues and step-by-step guidance, ensuring retailers could easily link stickers to their account without confusion or errors.

Simplifying limit upgrades

Simplifying limit upgrades

Increasing transaction limits is critical for both retailer capacity and business growth. The redesign added a usage tracker, clear communication of new limits and in-app access to associate to simplify the process and motivate action.

Increasing transaction limits is critical for both retailer capacity and business growth. The redesign added a usage tracker, clear communication of new limits and in-app access to associate to simplify the process and motivate action.

LIMIT USAGE OVERVIEW

LIMIT USAGE OVERVIEW

DETAILED INSTRUCTION TO INCREASE LIMIT

DETAILED INSTRUCTION TO INCREASE LIMIT

NOTIFYING THE USER ON INCREASED LIMITS

NOTIFYING THE USER ON INCREASED LIMITS

Strategic messaging for Soundbox

Strategic messaging for Soundbox

Soundbox gives instant voice confirmations, helping retailers build trust and avoid disputes. Clear highlights make its everyday value easy to understand and encourage adoption.

Soundbox gives instant voice confirmations, helping retailers build trust and avoid disputes. Clear highlights make its everyday value easy to understand and encourage adoption.

Thoughtful design details

Thoughtful design details

Small design details that work in harmony to reduce friction and create a more intuitive, efficient onboarding journey

Small design details that work in harmony to reduce friction and create a more intuitive, efficient onboarding journey

Reducing input effort

Reducing input effort

Anticipating mistakes

Anticipating mistakes

Notifying about features

Notifying about features

Challenges faced

Challenges faced

Below are the broad challenges faced throughout the redesign

Driving stakeholder buy-in

Driving stakeholder buy-in

This was a self-initiated project requiring significant engineering resources. Success depended on building a strong case to secure stakeholder buy-in.

This was a self-initiated project requiring significant engineering resources. Success depended on building a strong case to secure stakeholder buy-in.

Balancing creativity with fixed brand visuals

Balancing creativity with fixed brand visuals

Custom illustrations were created to bring delight while staying consistent with existing visual language, despite limited flexibility.

Custom illustrations were created to bring delight while staying consistent with existing visual language, despite limited flexibility.

Navigating technical constraints in banner logic

Navigating technical constraints in banner logic

Implementing dynamic banner prioritization proved infeasible due to backend limitations. We moved to an auto-rotating stack solution, ensuring key messages received visibility despite fixed hierarchy constraints.

Implementing dynamic banner prioritization proved infeasible due to backend limitations. We moved to an auto-rotating stack solution, ensuring key messages received visibility despite fixed hierarchy constraints.

Projected Outcomes

Projected Outcomes

While the redesigned UPI QR flow is still in development, the expected outcomes focus on enhancing both user experience and business efficiency. Key outcomes include higher active users, more limit upgrades, fewer support tickets, and increased purchases of stickers and soundboxes.

While the redesigned UPI QR flow is still in development, the expected outcomes focus on enhancing both user experience and business efficiency. Key outcomes include higher active users, more limit upgrades, fewer support tickets, and increased purchases of stickers and soundboxes.

Ending Note

Ending Note

Curious to know more about the project? If you'd like me to walk you through our process more in depth, feel free to reach out to me

Curious to know more about the project? If you'd like me to walk you through our process more in depth, feel free to reach out to me

Create a free website with Framer, the website builder loved by startups, designers and agencies.