HDFC
MyCards

May – July 2026

Role
Product DesignerIntern
Duration
2 monthsMay–July
Platform
MyCardsMobile web app
Year
2026

Confidentiality.

I can’t share the final designs under NDA. This case study shows exploratory wireframes. Final decisions, detailed research and business metrics are confidential.

The Brief: Make MyCards Easier to Use.

The redesign covered product offers and user experience. I focused on helping cardholders find everyday information.

The problem
What did I spend, what’s due, what renews? No quick answers.
My part
Researched and designed a tabbed Overview for the home screen.

How I worked

  1. My proposalsResearch, layouts, states
  2. Design reviewsFellow designers, my senior designer, team leads
  3. Business and engineeringNot reached during my internship; technical assumptions still needed review.

About MyCards.

MyCards is the mobile web app HDFC customers use to manage their cards. HDFC Bank has 90M+ credit and debit cards in circulation.

  • Runs in the phone browser
  • No install, no desktop
  • No push notifications

Card count: 27.1M credit and 64.7M debit cards, Reserve Bank of India (RBI) bank-wise card statistics, August 2026.

Research: Audit, Competitors and Reddit.

I reviewed MyCards navigation, competitor apps and public posts from cardholders.

Three research directions around the IA audit: competitor study and public community research

Competitor apps

Apps studied: CRED, Axis, Kotak, IND Money, AU Small Finance Bank and ICICI
Audit board of competitor card apps: MyCards, Axis Bank credit card app, CRED payment journey, Managing Kotak card, IND Money, AU Small Finance
  • Transactions were upfront in almost every app.
  • Recurring payments existed, but sat in settings under names like e-mandate.

MyCards audit

Information architecture audit of the existing MyCards navigation

TodaySee a recent spend

3 wireframe steps: home, Manage Card, then Transactions

2 taps from the home screen.

TodaySee your EMIs

4 wireframe steps: home, Manage Card, Linked EMI, then EMI list

3 taps deep, split across three places.

TodayCheck a subscription

A 404 Tab not found screen where a subscriptions tab would be

Not in MyCards at all.

Reddit posts

These posts describe problems HDFC cardholders faced. They don’t show how common those problems are.

r/CreditCardsIndia

A community for discussing credit cards in India: rewards, benefits and bank policies.

306K weekly visitors · 12K weekly contributions

Reddit post: HDFC Bank's subscription cancellation: An unnecessarily complex process!Reddit post: How do I check recurring payments on my HDFC cc?
Reddit post: Can't see list of all transactions on HDFC card

Key insight

Cardholders came with simple questions and couldn’t find the answers.

People needed a quick way to check recent spending, upcoming payments and renewals.

The Idea: One Overview on the Home Screen.

I proposed an Overview with transactions, EMIs and subscriptions together on the home screen.

Layouts I tried

First iteration
A · Stacked listsEverything visible, but the section grew with every list.
Exploration
B · One merged listShorter, but spends and renewals get mixed together.
Proposed
C · Tabs (my proposal)The section keeps a fixed height, and people choose which list to see.

Feedback on v1

People don’t open MyCards to spend time.

The feedback on version A was to reduce scrolling and show the most useful information first.

Why I Proposed Tabs.

I proposed tabs to make information easier to reach, find and understand. These were the expected benefits.

Why tabs fit the brief

  1. NavigationFewer steps to each list

    Recent transactions appear first. EMIs and subscriptions are one tab away.

  2. NavigationA stable section height

    Switching lists keeps the content below in place.

  3. DiscoverabilitySubscriptions are visible

    A named tab makes subscriptions easier to spot.

  4. ComprehensionClear payment types

    Separate lists distinguish purchases, instalments and recurring payments.

How the Overview Works.

Each tab shows a short summary, with more details available when needed.

  1. Recent spends, 0 taps
  2. Smart EMI, only next to eligible spends
Proposed
Transactions tab
  1. Three lists, one slot
  1. Recent spends, 0 taps
  2. Three lists, one slot
  3. Smart EMI, only next to eligible spends
Proposed
EMIs tabEach row shows instalments left. A count and monthly total sit below.
Proposed
Subscriptions tabEach row shows the status of a recurring payment.

Naming the tab

Subscriptions

Words cardholders used

SubscriptionRecurring payments

Dropping autopay tags

No “Autopay” tag on each row

Everything in this tab is already on autopay, so the tag adds nothing.

Before: tag on some rows

StreamingAutopay
Cloud storageAutopay
Music appNo tag = ?

After: chip shows status

StreamingRenews tomorrow
Cloud storageNeeds approval
Music appActive

Designing Around Banking Data.

Placeholder data looked simple. Real records raised a question: how do people recognise an EMI?

My first version named the product. The bank’s records use a reference instead, like OFFUS EMI.

My first version
Reference from an existing banking screen
EMI record example showing OFFUS EMI, a long reference number, 37,903.18 rupees, Active

I proposed showing key amounts and dates in each row, with reference details one tap deeper.

What belongs in the row

Each tab would show up to five items, then View all. The table shows my proposed split between rows and details.

TabIn the rowOne tap deeper
TransactionsMerchant, date, amountReference ID, category, card used, status
EMIsMonthly amount, instalments left, next due dateEMI reference, interest rate, tenure, closing amount
SubscriptionsService, renewal date, amount, statusMandate ID, maximum limit, cancel or pause

Empty and Low-Data States.

I explored what each tab should show when a card has no activity or only a few items.

Empty states

Empty state
Day one, no spends yetExplains the empty list without showing a Smart EMI offer.
Empty state
No EMIsOffers a way to explore HDFC’s EMI options.
Empty state
No subscriptionsExplains the empty list without promoting other services.

Partial states

Partial state
Only one EMIA short note confirms that the list is complete.
Partial state
Nothing eligible for Smart EMIHides the offer when no transactions qualify.
Partial state
Same height, any countKeeps one height across empty, short and longer lists.

Before and After.

The same three journeys, with the proposed structure.

ProposedSee a recent spend

2 wireframe steps: home, then the Overview with the Transactions tab open

2 taps → 0. Recent spends are on the home screen.

ProposedSee your EMIs

2 wireframe steps: home, then the Overview with the EMIs tab open

3 taps → 1. One tab, one list.

ProposedCheck a subscription

2 wireframe steps: home, then the Overview with the Subscriptions tab open

New. See every subscription and when it renews.

What I Learned.

The team leads liked the tab direction.

  1. Use feedback to guide exploration.

    The request for less scrolling led me to compare layouts and propose tabs.

  2. Design with real records.

    Bank references challenged my assumption that every EMI could use a product name.

  3. Design beyond full lists.

    Empty and partial states need as much thought as populated screens.

  4. Keep offers relevant.

    I limited Smart EMI prompts to eligible transactions.

What I could validate with more time

  1. Test stacked and tabbed layouts with cardholders. Compare how easily they find and complete everyday tasks.
  2. Use real HDFC customer behaviour and research to decide what belongs in each Overview row and what can sit deeper. For example, is a merchant ID useful upfront, or only in transaction details?
  3. Test fixed-height cards with no transactions, one transaction and sparse data in other tabs. Check whether the empty space feels intentional or whether the card should resize.
MORE WORK

View these too