HDFC
MyCards
HDFC
MyCards
May 2026 - July 2026
May 2026 - July 2026
Spending, EMIs and subscriptions were scattered across sub-menus. I pulled them onto one Overview on the home screen.
Role
Role
Product Designer
Product Designer
Intern
Intern
Duration
Duration
2 Months
2 Months
May-July
May-July
Platform
Platform
My Cards
My Cards
Mobile web app
Mobile web app
Year
Year
2026
2026
(NOTE)
(NOTE)
Note on NDA.
Note on NDA.
This case study has been adapted to respect confidentiality. Final visual designs, internal documentation, research findings and business metrics have been omitted or abstracted. The wireframes shown illustrate my design process rather than the final interface.
This case study has been adapted to respect confidentiality. Final visual designs, internal documentation, research findings and business metrics have been omitted or abstracted. The wireframes shown illustrate my design process rather than the final interface.
(01)
(01)
Project overview.
Project overview.
As a Product Design Intern, I designed a new Overview section on the MyCards home screen, pulling spending and EMIs into one place, and proposing a subscriptions view that didn't exist before.
As a Product Design Intern, I designed a new Overview section on the MyCards home screen, pulling spending and EMIs into one place, and proposing a subscriptions view that didn't exist before.
(02)
(02)
What My Cards is ? .
What My Cards is ? .
A progressive web app where HDFC customers manage their cards. It runs in a phone browser, not as something you download and not on desktop. There is no install, so nothing here can send a push notification either.
A progressive web app where HDFC customers manage their cards. It runs in a phone browser, not as something you download and not on desktop. There is no install, so nothing here can send a push notification either.
(03)
(03)
Understanding the problem.
Understanding the problem.
MyCards is where HDFC customers manage their cards on mobile web. As features grew over time, everyday actions required digging through sub-menus.
MyCards is where HDFC customers manage their cards on mobile web. As features grew over time, everyday actions required digging through sub-menus.
(04)
(04)
My Approach.
My Approach.
To understand the root cause of the problem I studied various directions, one was to analyse the structure of My Cards in depth and map down the key actions and their position in the Information Architecture, studying how the leading competitors are doing the same job and validating whether public cardholder communities reported the same friction points.
To understand the root cause of the problem I studied various directions, one was to analyse the structure of My Cards in depth and map down the key actions and their position in the Information Architecture, studying how the leading competitors are doing the same job and validating whether public cardholder communities reported the same friction points.
The Outside Look
The Outside Look
One pattern held across all of them: Transactions was easy to find and was usually upfront, recurring payments already existed, but under a compliance name like e-mandate or standing instruction, and parked in card settings rather than anywhere near everyday spending.
One pattern held across all of them: Transactions was easy to find and was usually upfront, recurring payments already existed, but under a compliance name like e-mandate or standing instruction, and parked in card settings rather than anywhere near everyday spending.
The Inside Look
The Inside Look
Auditing the existing MyCards navigation showed where the structure was creating friction: transactions sat two taps deep, EMI was split across three separate places, and subscriptions had no home here at all
Auditing the existing MyCards navigation showed where the structure was creating friction: transactions sat two taps deep, EMI was split across three separate places, and subscriptions had no home here at all
From the users eyes
From the users eyes
Before proposing a solution, I checked whether public cardholder communities reported the same friction points.
Before proposing a solution, I checked whether public cardholder communities reported the same friction points.
R/CreditCardsIndia
R/CreditCardsIndia
r/CreditCardsIndia is a community for discussing credit cards in India—rewards, benefits, bank policies, and more. Stay informed and make smarter financial decisions.
306K weekly visitors · 12K weekly contributions
r/CreditCardsIndia is a community for discussing credit cards in India—rewards, benefits, bank policies, and more. Stay informed and make smarter financial decisions.
306K weekly visitors · 12K weekly contributions
(05)
(05)
The friction
The friction
The same three friction points appeared repeatedly across community discussions, reinforcing the patterns identified in the IA audit.
The same three friction points appeared repeatedly across community discussions, reinforcing the patterns identified in the IA audit.
See a recent spend
See a recent spend
currently the process to view your recent spend is not shown upfront in My cards
currently the process to view your recent spend is not shown upfront in My cards
See your EMIs
See your EMIs
currently to view your EMI the option is 3 taps deeper inside My cards
currently to view your EMI the option is 3 taps deeper inside My cards
Check a subscription
Check a subscription
currently the subscription management does not exist.
currently the subscription management does not exist.
THE REAL INSIGHT
THE REAL INSIGHT
The app is a utility to solve an immediate problem, not something they want to spend time in.
The app is a utility to solve an immediate problem, not something they want to spend time in.
According to the SaveSage survey and CRED case study data, people come to credit card apps for transactional needs in the moment, not to browse or plan.
According to the SaveSage survey and CRED case study data, people come to credit card apps for transactional needs in the moment, not to browse or plan.
(06)
(06)
Designing a unified Overview.
Designing a unified Overview.
The Overview section brings everyday answers directly onto the home screen: spending, EMIs, and subscriptions consolidated into a single 3-tab layout below the card.
The Overview section brings everyday answers directly onto the home screen: spending, EMIs, and subscriptions consolidated into a single 3-tab layout below the card.
EMIs
EMIs
Subscriptions
Subscriptions
Transactions
Transactions
Money
Overview
Money
Overview
The Missing Piece
The Missing Piece
Layout Explorations
Layout Explorations
Before settling on tabs I built the alternative, with Transactions, EMIs and Subscriptions stacked as three separate sections.
Before settling on tabs I built the alternative, with Transactions, EMIs and Subscriptions stacked as three separate sections.
Smart EMI
Smart EMI
See All
See All
Amazon Purchase
Amazon Purchase
₹12,000 • 12 Jan
₹12,000 • 12 Jan
Convert to EMI
Convert to EMI
Amazon Purchase
Amazon Purchase
₹12,000 • 12 Jan
₹12,000 • 12 Jan
Convert to EMI
Convert to EMI
Recent Transactions
Recent Transactions
Pantaloons Retail Store Pvt Ltd
Pantaloons Retail Store Pvt Ltd
Shopping
Shopping
₹15,478
₹15,478
Netflix
Netflix
Entertainment
Entertainment
₹149
₹149
Hameera Ram Store
Hameera Ram Store
Grocery
Grocery
₹789
₹789
My Subscriptions
My Subscriptions
Claude
Claude
3 Days left
3 Days left
₹2,200/mo
₹2,200/mo
Auto pay
Auto pay
Netflix
Netflix
18 Days left
18 Days left
₹149/mo
₹149/mo
Amazon Prime
Amazon Prime
18 Days left
18 Days left
₹149/mo
₹149/mo
Jio Hotstar
Jio Hotstar
12 Days left
12 Days left
₹200/mo
₹200/mo
Auto pay
Auto pay
Transactions and Subscription
Transactions and Subscription
Pantaloons Retail Store Pvt Ltd
Pantaloons Retail Store Pvt Ltd
Shopping
Shopping
₹15,478
₹15,478
Netflix
Netflix
18 Days left
18 Days left
₹149/mo
₹149/mo
Hameera Ram Store
Hameera Ram Store
Grocery
Grocery
₹789
₹789
Smart EMI
Smart EMI
See All
See All
Amazon Purchase
Amazon Purchase
₹12,000 • 12 Jan
₹12,000 • 12 Jan
Convert to EMI
Convert to EMI
Amazon Purchase
Amazon Purchase
₹12,000 • 12 Jan
₹12,000 • 12 Jan
Convert to EMI
Convert to EMI
Transactions
Transactions
EMIs
EMIs
Subscriptions
Subscriptions
AmazonPayIND..
AmazonPayIND..
5 Jun 2026
5 Jun 2026
₹8,620
₹8,620
Smart EMI Eligible
Smart EMI Eligible
ZomatoLTD
ZomatoLTD
5 Jun 2026
5 Jun 2026
₹8,620
₹8,620
AmazonPayIND..
AmazonPayIND..
5 Jun 2026
5 Jun 2026
₹8,620
₹8,620
Smart EMI Eligible
Smart EMI Eligible
While the stacked layout offered full visibility, I favoured the tabbed approach for reducing scrolling, keeping key information above the fold, and meeting technical constraints. I iterated the wireframes based on this feedback before finalising the direction.
While the stacked layout offered full visibility, I favoured the tabbed approach for reducing scrolling, keeping key information above the fold, and meeting technical constraints. I iterated the wireframes based on this feedback before finalising the direction.
(07)
(07)
The final section structure
The final section structure
Multiple layout explorations
The wireframes shown illustrate my design process rather than the final interface.
Multiple layout explorations
The wireframes shown illustrate my design process rather than the final interface.
Zero-tap transaction access
Zero-tap transaction access
Easy access layout
Easy access layout
Contextual cross-selling for Smart EMI
Contextual cross-selling for Smart EMI
Transactions
Transactions
EMIs
EMIs
Subscriptions
Subscriptions
AmazonPayIND..
AmazonPayIND..
5 Jun 2026
5 Jun 2026
₹8,620
₹8,620
Smart EMI Eligible
Smart EMI Eligible
ZomatoLTD
ZomatoLTD
5 Jun 2026
5 Jun 2026
₹8,620
₹8,620
AmazonPayIND..
AmazonPayIND..
5 Jun 2026
5 Jun 2026
₹8,620
₹8,620
Smart EMI Eligible
Smart EMI Eligible
Smart EMI
Smart EMI
Convert 6 eligible purchases worth ₹48,620 into easy monthly EMIs
Convert 6 eligible purchases worth ₹48,620 into easy monthly EMIs
View all
View all
Transactions
Transactions
EMIs
EMIs
Subscriptions
Subscriptions
OFFUS EMI
OFFUS EMI
Due 15 Jun 2026
Due 15 Jun 2026
₹13,627/mo
₹13,627/mo
4 of 8 remaining
4 of 8 remaining
OFFUS EMI
OFFUS EMI
Due 15 Jun 2026
Due 15 Jun 2026
₹10,500/mo
₹10,500/mo
4 of 8 remaining
4 of 8 remaining
OFFUS EMI
OFFUS EMI
Due 01 Jul 2026
Due 01 Jul 2026
₹10,000/mo
₹10,000/mo
5 of 10 remaining
5 of 10 remaining
OFFUS EMI
OFFUS EMI
Due 30 Sep 2026
Due 30 Sep 2026
₹12,300/mo
₹12,300/mo
3 of 6 remaining
3 of 6 remaining
4 Active EMIs • ₹46,427/month
4 Active EMIs • ₹46,427/month
View all
View all
Transactions
Transactions
EMIs
EMIs
Subscriptions
Subscriptions
Claude
Claude
3 Days left
3 Days left
₹2,200/mo
₹2,200/mo
Auto pay
Auto pay
Netflix
Netflix
18 Days left
18 Days left
₹149/mo
₹149/mo
Amazon Prime
Amazon Prime
18 Days left
18 Days left
₹149/mo
₹149/mo
Jio Hotstar
Jio Hotstar
12 Days left
12 Days left
₹200/mo
₹200/mo
Auto pay
Auto pay
4 Active subscriptions • ₹2,698/month
4 Active subscriptions • ₹2,698/month
View all
View all
(08)
(08)
Designing for real bank data, not happy scenarios.
Designing for real bank data, not happy scenarios.
My first version used the names people would recognise, an EMI row labelled with the product someone had bought.
My first version used the names people would recognise, an EMI row labelled with the product someone had bought.
Initial design vs Real bank data
Initial design vs Real bank data
iPhone 16
iPhone 16
₹10,500/mo
₹10,500/mo
Review feedback was blunt, and correct: banks do not show it that way, because a card EMI carries a reference of its own rather than a product name.
Review feedback was blunt, and correct: banks do not show it that way, because a card EMI carries a reference of its own rather than a product name.
The hardest call here was not layout, it was which number wins. Anything that did not make the row still had to be reachable one tap deeper.
The hardest call here was not layout, it was which number wins. Anything that did not make the row still had to be reachable one tap deeper.
(09)
(09)
What the new structure adds up to.
What the new structure adds up to.
The same three journeys from the old structure, walked again in the new one.
The same three journeys from the old structure, walked again in the new one.
See a recent spend (After)
See a recent spend (After)
The new proposed overview section reduces the taps to 0 and brings out the transactions right on the home screen.
The new proposed overview section reduces the taps to 0 and brings out the transactions right on the home screen.
See your EMIs ( After)
See your EMIs ( After)
The new proposed overview section reduces the 3 taps to 1 and brings out the EMI list easy accessible.
The new proposed overview section reduces the 3 taps to 1 and brings out the EMI list easy accessible.
Check a subscription (After)
Check a subscription (After)
The new proposed overview section introduces a subscription management feature where users can easily view their subscriptions and verify if it has been set to autopay .
The new proposed overview section introduces a subscription management feature where users can easily view their subscriptions and verify if it has been set to autopay .
(10)
(10)
What this project taught me.
What this project taught me.
None of this was tested with customers. If the work carries on, this is the order I would validate it in.
None of this was tested with customers. If the work carries on, this is the order I would validate it in.
Design for what people already do.
Design for what people already do.
The subscriptions idea came from a gap in the structure, not from inventing a new habit. Recurring payments were already happening on these cards. Nothing in MyCards let anyone see them.
The subscriptions idea came from a gap in the structure, not from inventing a new habit. Recurring payments were already happening on these cards. Nothing in MyCards let anyone see them.
Business goals and people can both win.
Business goals and people can both win.
Making relevant services easier to find was one of the goals; my job was to place them where they help rather than interrupt.
Making relevant services easier to find was one of the goals; my job was to place them where they help rather than interrupt.
Real data is messier than the mockup.
Real data is messier than the mockup.
Designing for the tidy example hides the problem. Once I understood everything that sits behind one row, the job became deciding what to leave out
Designing for the tidy example hides the problem. Once I understood everything that sits behind one row, the job became deciding what to leave out
