₹500 successfully added!
₹500 successfully added!
5 Feb 2025, 10:56
5 Feb 2025, 10:56
You have added a balance of ₹500. Update the balance to use your card effortlessly in your next ride
You have added a balance of ₹500. Update the balance to use your card effortlessly in your next ride
Raj’s card
Raj’s card
**** **** **** 3456
**** **** **** 3456
₹500.00
₹500.00
₹500 has been added! It will be ready to use after your balance is successfully updated.
₹500 has been added! It will be ready to use after your balance is successfully updated.
Making Travel Balance Clear
Making Travel Balance Clear
Redesigning Bharat Yatra's balance experience to make pending money, card balance, and travel readiness immediately understandable.
Redesigning Bharat Yatra's balance experience to make pending money, card balance, and travel readiness immediately understandable.
ROLE
ROLE
Product Designer
Product Designer
TIMELINE
TIMELINE
2 Weeks
2 Weeks
PLATFORM
PLATFORM
iOS & Android
iOS & Android
01- OVERVIEW
01- OVERVIEW
What was the issue?
What was the issue?
Bharat Yatra uses a physical NFC card, which means a successful recharge doesn't immediately make the money usable for travel. The challenge was to make this invisible system behaviour understandable without adding complexity.
Bharat Yatra uses a physical NFC card, which means a successful recharge doesn't immediately make the money usable for travel. The challenge was to make this invisible system behaviour understandable without adding complexity.
THE CHALLENGE
"Users successfully added money but were confused when the balance was not immediately available on their physical transit card."
SYSTEM FLOW
1
2
3
4
Recharge
Recharge
₹ Credited to account
₹ Credited to account
Online Balance
Online Balance
Funds held digitally
Funds held digitally
Update Balance
Update Balance
NFC tap required gap
NFC tap required gap
Card Balance
Card Balance
Ready for travel
Ready for travel
02- PROBLEM
02- PROBLEM
"Users thought their money was ready when it wasn't."
"Users thought their money was ready when it wasn't."
A recharge successfully added money to the user's online account, but that money still had to be transferred to the physical NFC card before it could be used for travel.
The interface exposed the amount, but not the state of the money. This created a mismatch:
A recharge successfully added money to the user's online account, but that money still had to be transferred to the physical NFC card before it could be used for travel.
The interface exposed the amount, but not the state of the money. This created a mismatch:
What users saw
Recharge
Travel
₹500 successfully added!
₹500 successfully added!
5 Feb 2025, 10:56
5 Feb 2025, 10:56
You have added a balance of ₹500. Update the balance to use your card effortlessly in your next ride
You have added a balance of ₹500. Update the balance to use your card effortlessly in your next ride
Raj’s card
Raj’s card
**** **** **** 3456
**** **** **** 3456
₹500.00
₹500.00
Users assumed that a successful recharge meant their card was ready to use — with no additional steps.
Users assumed that a successful recharge meant their card was ready to use — with no additional steps.
What the system required
Recharge
Online Balance
Update Balance
Travel
Raj’s card
Raj’s card
**** **** **** 3456
**** **** **** 3456
₹500.00
₹500.00
₹500 has been added! It will be ready to use after your balance is successfully updated.
₹500 has been added! It will be ready to use after your balance is successfully updated.
Update card balance
Added balance of ₹500 will be ready to use once it is successfully updated in the card
Update Now
Update Later
Update card balance
Added balance of ₹500 will be ready to use once it is successfully updated in the card
Update Now
Update Later
A two-stage NFC process was invisible to users, leading to failed travel attempts and uncertainty at the gate.
A two-stage NFC process was invisible to users, leading to failed travel attempts and uncertainty at the gate.
The three mental-model gaps
The three mental-model gaps
Balance ≠ Travel-ready:
The displayed amount didn't communicate whether it could be used immediately.
Recharge ≠ Card update:
Users weren't aware that another step was required.
Payment success ≠ Completion:
A successful payment didn't guarantee the card was ready.
03- KEY INSIGHT
03- KEY INSIGHT
"Users didn't struggle with recharge. They struggled with understanding where their money lived — and whether they could use it."
"Users didn't struggle with recharge. They struggled with understanding where their money lived — and whether they could use it."
"Users didn't struggle with recharge. They struggled with understanding where their money lived — and whether they could use it."
TRAVEL-READY
TRAVEL-READY
Card Balance
Money currently stored on the NFC card and available for travel.
Money currently stored on the NFC card and available for travel.
PENDING SYNC
PENDING SYNC
Online Balance
Money credited to the user's account after recharge.
Money credited to the user's account after recharge.
AWAITING NFC
AWAITING NFC
Pending Balance
Money recharged online but not yet transferred to the physical card.
Money recharged online but not yet transferred to the physical card.
The core misunderstanding
The core misunderstanding
Users understood that they had added money, but not that the money could still be unavailable for travel.
Users understood that they had added money, but not that the money could still be unavailable for travel.
04- DESIGN EXPLORATION
04- DESIGN EXPLORATION
The first attempt focused on making the update action more visible. But the deeper problem was how the balance itself was represented. So I explored different ways of communicating the relationship between Account Balance, Pending Balance, and Card Balance.
The first attempt focused on making the update action more visible. But the deeper problem was how the balance itself was represented. So I explored different ways of communicating the relationship between Account Balance, Pending Balance, and Card Balance.
I tested different ways of explaining the balance states.
I tested different ways of explaining the balance states.
V1: Introduce Account Balance
V1: Introduce Account Balance
Learning
Learning
The distinction between Account Balance and Card Balance wasn't obvious.
The distinction between Account Balance and Card Balance wasn't obvious.
V2: Visually separate Balance States
V2: Visually separate Balance States
Learning
Learning
Visibility improved. Meaning didn't.
Visibility improved. Meaning didn't.
V3: Prioritise Card Balance
V3: Prioritise Card Balance
Learning
Learning
Hierarchy helped. Clarity didn't.
Hierarchy helped. Clarity didn't.
V4: Connect the Balance States
V4: Connect the Balance States
Learning
Learning
The relationship became clearer, but the Home screen still felt information-heavy.
The relationship became clearer, but the Home screen still felt information-heavy.
V5: Reduce Cognitive Load
V5: Reduce Cognitive Load
Learning
Learning
The final direction prioritised what users needed first: what's ready to use and what needs action.
The final direction prioritised what users needed first: what's ready to use and what needs action.
The pattern was clear
The pattern was clear
Making individual elements more visible wasn't enough. The experience needed to prioritise travel-ready balance, clearly separate pending money, and surface the next action without overwhelming the Home screen.
Making individual elements more visible wasn't enough. The experience needed to prioritise travel-ready balance, clearly separate pending money, and surface the next action without overwhelming the Home screen.
05- SHIFT
05- SHIFT
The problem wasn't recharge. It was balance clarity.
The problem wasn't recharge. It was balance clarity.
Before
Transactions
One balance, unclear state
One balance, unclear state
After
Balance to be Updated
Clear balance state + action
Clear balance state + action
06- SOLUTION
06- SOLUTION
Designing for how users think
Designing for how users think
The final Home screen prioritises what users need to know first: what's ready to use, what's pending, and what needs action.
The final Home screen prioritises what users need to know first: what's ready to use, what's pending, and what needs action.
1
Card Balance becomes primary
Card Balance becomes primary
2
Pending money is surfaced separately
Pending money is surfaced separately
3
Actions become contextual
Actions become contextual
4
The interface explains the system
The interface explains the system
Travel-ready balance
Travel-ready balance
Always shown first
Always shown first
Balance actions
Balance actions
Read • Update
Read • Update
Pending balance
Pending balance
Waiting for NFC update
Waiting for NFC update
07- IMPACT
07- IMPACT
What changed for the user
What changed for the user
The final Home screen prioritises what users need to know first: what's ready to use, what's pending, and what needs action.
The final Home screen prioritises what users need to know first: what's ready to use, what's pending, and what needs action.
What changed for the user
What changed for the user
01
Clearer balance understanding
Users can tell what's ready to use for travel.
Users can tell what's ready to use for travel.
02
Visible pending state
Pending money is separated from usable balance.
Pending money is separated from usable balance.
03
Clearer next action
The update action appears when needed.
The update action appears when needed.
04
Less system knowledge needed
No need to understand NFC to use the app.
No need to understand NFC to use the app.
08— LEARNINGS
08— LEARNINGS
What Bharat Yatra taught
What Bharat Yatra taught
The most impactful decisions weren't about adding features. They were about reorganising existing information so users could build an accurate mental model of where their money was at any given moment.
The most impactful decisions weren't about adding features. They were about reorganising existing information so users could build an accurate mental model of where their money was at any given moment.
01
People don't build mental models around system architecture. They build them around outcomes.
People don't build mental models around system architecture. They build them around outcomes.
02
Information hierarchy drives trust
Information hierarchy drives trust
03
Designing for mental models creates better experiences.The best UX is invisible because it matches how users already think.
Designing for mental models creates better experiences.The best UX is invisible because it matches how users already think.
04
Clarity beats feature visibility.One clear piece of information outperforms five that create cognitive load.
Clarity beats feature visibility.One clear piece of information outperforms five that create cognitive load.
Next Project
Next Project
B2C
Customer Engagement
Building a Scalable Customer Engagement Framework
Unified multiple reward and campaign types into a single configurable framework, enabling scalable, consistent, and efficient scheme creation.
B2C
Customer Engagement
Building a Scalable Customer Engagement Framework
Unified multiple reward and campaign types into a single configurable framework, enabling scalable, consistent, and efficient scheme creation.
