Helping cardholders find what matters most, faster.
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.
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.
A useful product that had become hard to move around.
MyCards is where HDFC customers manage their cards on mobile web. As features grew over time, everyday actions required digging through sub-menus. During my internship, I designed the new Overview section on the home screen to bring core answers upfront.
A progressive web app: 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.
That is the only way in. There is no saved session to come back to, so people arrive, check one thing and leave.
A broad brief, and the specific problem I found in it.
The team's brief was to simplify MyCards and make its features easier to discover. It never mentioned an overview. That idea came from two looks: outside, at how leading card apps organise the same job, and inside, at where our own structure created friction.
A note on validation: this project did not include formal usability testing. Instead, design directions were reviewed through regular discussions with designers, product managers, engineering and business stakeholders. I participated in these reviews, using their feedback to validate assumptions, identify technical constraints and refine the proposed experience before moving forward. Where that feedback changed the design, I have said so.
One pattern held across all of them: 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.
Mapping where everything actually lived.
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.
Redrawn from our audit of the live web app, expanded only along the transactions and EMI branches. Every label is one any customer can see by tapping through MyCards; the full audit went far deeper and stays private.
Before proposing a solution, I checked whether public cardholder communities reported the same friction points. The same three friction points appeared repeatedly across community discussions, reinforcing the patterns identified in the IA audit.
Three directions, and what the reviews changed.
Each direction went into review with designers, product managers, engineering and business stakeholders. None of them came out the way they went in: what changed, and why, is below.
Throughout the project I presented design explorations in review and folded the feedback back into the work.
Three problems that turned out to be one.
Looking across the IA audit and community discussions, the pattern became clear: people weren't struggling with three separate features; they were struggling to complete one everyday job.
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.
From scattered tabs to one overview section
Where each piece moved, and what it moved out of. Chapter 05 walks the same journeys again in the new structure.
Stacked sections vs a single 3-tab layout
Before settling on tabs I built the alternative, with Transactions, EMIs and Subscriptions stacked as three separate sections.
The final section structure
Multiple layout explorations were reviewed with designers, product managers and engineering stakeholders. While the stacked layout provided complete visibility, discussions consistently favoured the tabbed approach because it reduced scrolling, preserved key information above the fold and aligned better with technical constraints. I iterated on the wireframes based on this feedback before finalising the direction. This one works: switch the tabs yourself.
Zero-tap transaction access
Recent transactions are visible immediately on the home screen, removing the extra navigation previously required.
Single section with 3 tabs
Equal access decided it: no tab is buried under another, and the section stays short enough to sit above the fold.
A spend summary with personality
During stakeholder reviews the team explored ways to make spending insights more engaging without overwhelming the interface. I translated those discussions into a lightweight spend summary that highlights top spending categories and reflects the kind of spender you have been that month, while fitting naturally within the Overview experience.
Contextual cross-selling for Smart EMI
Eligible spends get a small inline banner, ‘Turn a spend into an EMI’, right in the list instead of a popup. The offer lives where the spending is.
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. 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. That sent me into card statement PDFs and MyCards itself to see how this data is actually recorded, and it changed every row in this section.
In bank records this is a registered merchant string with codes and reference IDs. The row keeps only the part people recognise.
An EMI is not one number. Statement PDFs decided which one belongs on the row.
Nothing existed to borrow from, so the row answers what someone checks first.
Deciding what earns a place on the row
The hardest call here was not layout, it was which number wins. On an EMI, is the useful figure the total outstanding or this month's instalment? Anything that did not make the row still had to be reachable one tap deeper.
A view is only finished when it works empty
Not everyone has active EMIs or recurring subscriptions. Every tab was designed for its emptiest moment too. Switch the state below and watch all three views adapt.
What the new structure adds up to.
Chapter 03 moved transactions, EMIs and subscriptions into one place. This is what that move does to the three everyday journeys.
Fewer steps to complete everyday tasks
The same three journeys from the old structure, walked again in the new one. The demo on the left replays the longest of them.
The three things I would put in front of users
None of this was tested with customers. If the work carries on, this is the order I would validate it in.
Can people find an EMI without a menu? Five people, one task. Time to the first correct tap, against the old three-tap path.
Does the spend summary read as useful or as noise? Five seconds on the Overview, then take it away and ask what they remember.
Is the inline Smart EMI banner noticed, or ignored as an ad? Against the popup it replaces, on both noticing it and how intrusive it felt.
What this project taught me.
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.
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.
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.
This project changed how I think about information architecture. Simplifying a product isn’t about removing features; it is about organising them around the user’s everyday jobs.
Other things I worked on.
Rebuilding the information architecture of an e-commerce admin dashboard, so the people running the store can actually find what they need.