Back to Home

UX Design • 2016-2018

Legacy to Modern Experience

Migration from Legacy Interface to Modern Experience Dashboard

120M+

Active Users

60%

Growth Rate

Client Designers

Design Consultants

The Legacy Challenge

HDFC's "Line 5" interface was a digital relic in a modern fintech world. While neo-banks like Cred and Jupiter offered sleek experiences, HDFC's 120 million users were navigating a 15-year-old labyrinth of technical debt that felt more like a government audit than a modern banking app.

Task & Strategic Vision

The Strategic Mission. As the Lead UX Designer, I moved the conversation beyond "pixel polish" to "business transformation." My goal was to solve a three-part paradox:

1 Modernize & Compete: Elevate the UI to match fintech disruptors like Cred, reducing churn among digital-native users.
2 Zero Learning Curve: Ensure continuity for 120M+ conservative users by blending familiar flows with modern patterns.
3 Drive Revenue: Aggressively increase cross-sell visibility (Loans, Insurance) without breaking user trust.

Leadership Role: I led a 12 member design team, facilitating workshops with C-suite stakeholders to align on this vision.

“The legacy interface was a direct reflection of the database structure rather than user intent.”

Activity

Strategic Assessment

Deconstruction & Innovation. We didn't just redesign screens; we deconstructed a decade of legacy logic. I led a "Hybrid-Native" approach, auditing 200+ user flows to identify where we could simply "skin" the old system and where we needed to rebuild from the ground up to reduce cognitive load.

The Business Problem

HDFC's digital dashboard sees 50M+ monthly active users but suffers from low engagement on cross-sell products (mutual funds, insurance). The legacy interface is cluttered, leading to high support costs and abandonment.

The User Problem

Users struggle to complete basic tasks like downloading statements or blocking cards. The information architecture is inconsistent, forcing users to rely on customer support rather than self-service.

Research & Analysis

Activity

SWOT Analysis

Using a SWOT framework, I reverse-engineered HDFC's current features to identify strategic assets to preserve, weaknesses to eliminate, opportunities to exploit, and risks to mitigate. This exercise grounds stakeholders in data, not opinion.

Strengths

What assets must we protect?

Dashboard Utility

The "Net Worth" view (Total Savings) is visible immediately without clicks.

Proactive Bill Surfacing

The "Bills" card correctly identifies pending dues (e.g., Electricity: ₹1380)

Functional Completeness

The sidebar contains every possible feature, serving power users.

Weaknesses

What friction must we eliminate?

Navigation Friction

The Accordion hides critical features like "Block Card" (Recall vs Recognition).

Conflicting Navigation

"Money Transfer" is a text link; "Pay" is a tab. Creates cognitive dissonance.

Static Data Rows

Accounts look like a spreadsheet list, lacking affordance for interaction.

Opportunities

Where will the ROI come from?

Smart Cards

Convert the static "Electricity Bill" text into a One-Tap Payment Widget.

Monetization

Replace the generic "Card Bills" ad at the bottom with High-Yield Investment.

Unified Action Center

Consolidate "Quick Links" and "Bills" into a single, clutter-free zone.

Threats

What risks must we mitigate?

Trust Erosion

The "Switch Back to old Platform" link suggests instability.

Phishing

The simple HTML table structure is easy to spoof/clone.

Mobile Unfriendly

The 3-column layout will break on mobile screens. Need to think responsive.

Activity

Heuristic Evaluation

We conducted a rigorous audit of the existing interface using Nielsen's 10 Usability Heuristics. This expert review helped us identify foundational usability problems that were violating standard design principles and contributing to cognitive load.

Heuristic

Observation

Severity

Recommendation

Recognition Rather Than Recall

A user looking for "Block Debit Card" must remember (Recall) whether it is located under "Cards", "Service Requests", or "Accounts".

4 (Critical)

It acts as a gatekeeper, preventing users from finding features without trial and error.

Switch to a surface frequent actions like ("Block Card") directly on the dashboard as widgets.

Match Between System and the Real World

Account Numbers and Balances listed like a spreadsheet. It uses banking jargon.

3 (Major)

The interface feels cold and administrative.

Represent accounts as physical cards or passbooks to create a tangible connection to the money.

Error Prevention

A user attempting to click the search icon can easily slip and hit Logout, terminating their session instantly.

3 (Major)

High risk of accidental data loss or session termination.

De-emphasize "Logout" (move to Profile Menu or make it a secondary ghost button).

Flexibility and Efficiency of Use

The rows display data (Balance: ₹ 20,80,012) but offer zero interactivity.

3 (Major)

Users cannot act on the data presented.

Place "Statement" button directly inside the account card context.

Consistency and Standards - Navigation Conflict

The interface uses two competing navigation models simultaneously.

3 (Major)

Increases learning curve and cognitive load.

Unify navigation into a single, consistent model.

Aesthetic and Minimalist Design

The "Quick Links" section is a laundry list of plain blue text links with no visual distinction.

2 (Minor)

The low Signal-to-Noise ratio causes Banner Blindness.

Use Visual Iconography for Quick Links to make them scannable.

Activity

Voice of Customer

To truly understand the friction points, we moved beyond analytics and spoke directly to the people who use the platform every day. We conducted 15 in-depth user interviews and analyzed over 500 support tickets to capture the authentic voice of the customer.

Insight 1
Navigation Fatigue

"Where is my stuff?"

Feedback Why is it so hard to find the interest certificate? I need it for ITR filing!

Pain Point High-value, low-frequency tasks are buried too deep. It's hard to find.

User Interview, Age 42

Insight 2
The "Critical Response Gap"

Safety Anxiety

Feedback I lost my wallet and couldn't find the block card option fast enough. Had to call care unit and wait 20 mins.

Pain Point Safety features are treated as "Admin Tasks" rather than "Emergency Exits."

User Interview, Age 31

Insight 3
Aesthetic Obsolescence

"Trust vs. Looks"

Feedback The app looks like a government website from 2010. Look at Cred or Paytm, they are so smooth.

Pain Point For Gen Z, "Outdated" equals "Broken" or "Unsecure." Visual polish is a proxy for technological competence.

User Interview, Age 37

Activity

Data Analysis

Once we identify user pain points qualitatively, we validate them quantitatively. The stakeholders don't care about "pretty UI" or "frustrating experience." They care about support ticket volume and churn rate.

Validating Insight 3
NLP Sentiment Analysis

Method Run Natural Language Processing (NLP) algorithms on 50,000+ App Store reviews.

Hypothesis Reviews mentioning "UI," "Look," or "Design" correlate with 1-star ratings.

Goal To prove that "Aesthetics" is a churn driver, not just a vanity metric.

Validating Insight 1 & 2
NLP Sentiment Analysis

Method Use k-means clustering on support ticket subject lines.

Hypothesis A significant cluster exists for keywords like "Find," "Where," "Certificate," and "Block."

Goal If >15% of tickets are navigational queries, it justifies the IA overhaul.

Validating Insight 1
NLP Sentiment Analysis

Method Analyze the top 50 terms entered in the internal search bar.

Hypothesis Terms like "Statement," "Interest Cert," and "Debit Card" dominate.

Goal Features searched for >10,000 times/month get promoted to the "Quick Links" dashboard widget.

Activity

Competitive Analysis

We analyzed direct competitors (ICICI, Axis) and fintech disruptors (Cred, Paytm) to understand the industry baseline and identify opportunities for differentiation. The goal was to find the sweet spot between traditional banking trust and modern fintech agility.

ICICI

The Functional Giant. ICICI is HDFC's primary competitor in the private sector. Their app is feature-rich but suffers from "Grid Clutter."

Strength: "One view" dashboard. Users can see Cards, FD, and Loans on a single scrollable page.
Weakness: Overwhelming number of icons (Grid of 9x9). Cognitive load is high.
Takeaway for HDFC: We need the "One View" utility but without the clutter.
Decision: Use broad "Smart Cards" instead of a dense icon grid.

Axis

The Personal Assistant. Axis has successfully integrated personalization (e.g., "Good Morning, [Name]") and predictive navigation.

Strength: "Quick Links" that adapt based on usage frequency.
Weakness: Overwhelming number of icons (Grid of 9x9). Cognitive load is high.
Takeaway for HDFC: Implement the "Welcome, Rutajeet" personalized header and editable "My Favourite Links" to match this personalization standard.
Decision: Use broad "Smart Cards" instead of a dense icon grid.

Design Execution

Translate strategic insights into pixel-perfect screens.

Information Architecture (The Blueprint)

What is it?

Information Architecture is the art of organizing content so users can find it. In Line 5, the architecture mirrored the bank's Database Schema (e.g., table rows, technical jargon). Our goal for Line 6 was to mirror the User's Mental Model.

Why do we need this activity?

Without a solid blueprint, a pretty UI is just a "superficial enhancement." If a user can't find "Block Card" in 3 seconds during an emergency, the color of the button doesn't matter.

Activity

ROT Analysis

Capture a screenshot of the Information Architecture and upload it to Gemini. Then, instruct the agent to analyze the structure and compile the data into a spreadsheet.

ID	UI Element Name	Location / Path	Monthly Traffic (Est)	ROT Status	Audit Observations
A00	Global Header Region
A01	Logo (HDFC Bank)	Header > Left	N/A	E	Functions as the primary anchor to the home screen.
A02	Personal Tab	Header > Top	2.1M	R	Indicates active state; functionally redundant in current context.
A03	NRI Tab	Header > Top	150k	T	More appropriate for login segmentation than global navigation.
A04	SME Tab	Header > Top	45k	T	Constitutes cognitive load for retail user segments.
A05	Wholesale Tab	Header > Top	20k	T	Constitutes cognitive load for retail user segments.
A06	Agri Tab	Header > Top	15k	T	Constitutes cognitive load for retail user segments.
A07	User ID (Display)	Header > Right	N/A	E	Static text display; lacks interactive properties.
A08	Locate Us	Header > Right	80k	O	Superseded by external mapping services (e.g., Google Maps).

R (Redundant): Duplicative functionality or content.

O (Outdated): Legacy technology or obsolete campaigns.

T (Trivial): Low value or extraneous distraction.

E (Essential): Core banking functionality.

Result

Based on the ROT findings, the following strategic actions are recommended for the Line 6 migration

Consolidation Strategy

(Solving Redundancy)

Merge the fragmented payment pathways (B02, C03, H03, H04) into a singular "Unified Transfer Widget" located centrally on the dashboard.

Consolidate "Quick Links" and "Bills" (H00 & I00) into a single, context-aware "Action Center" to eliminate visual competition.

De-cluttering Strategy

(Solving Triviality)

Remove "SME/Wholesale/Agri" tabs (A04-A06) from the retail dashboard. These should be handled via a pre-login segment selector.

Eliminate the "NetBanking Testing" banner and static "Offers" images. Replace with dynamic, data-driven Lifestyle Cards (#jiyoshaanse).

Elevation Strategy

(Solving Hierarchy)

Elevate "Download Statement" (C05) and "Block Card" (F08) from Depth Level 3 (Sidebar > Category > Item) to Depth Level 1 (Dashboard Smart Card).

Rename archaic terms like "Hotlisting" (C09) to user-friendly terms like "Block Card" to improve recognition.

Activity

Card Sorting Activity Plan: From ROT to Structure

Take a screenshot and upload in the Gemini and ask the agent to analyze the IA and create a spread sheet.

Result

Users consistently grouped Mobile Recharge, DTH and FASTag together, distinct from Money Transfer. This validated our decision to create a separate widget on the Line 6 Dashboard: a Unified Recharge Widget for people.

This activity validates that customers prioritize a quick overview of their Savings, Investments, and Cards. To address this, we introduced a 'Snapshot' section, providing users with an immediate, at-a-glance view of their financial status.

Design Phase

Activity

Ideation & Rapid Sketching (Conceptualization)

We aimed to rapidly explore diverse layout possibilities, prioritizing structural innovation over visual fidelity.

HMW

Widgets

Problem:

"Our dashboard is outdated and it’s not up to modern UI standards."

HMW statement:

"How might we make the dashboard and individual features on it more intuitive for new users?"

Competitor Benchmarking

Features

Crazy 8

Layout

Activity

Low-Fidelity Wireframing (The Skeleton)

Goal is to combine all the ideas in to a single page.

Activity

Testing and Validating

We validated the structural integrity of the new Information Architecture by testing navigation paths and labels in a distraction-free environment, ensuring findability independent of visual design.

Tree Testing

Card Sorting told us how users group items. Tree Testing tells us if they can find them in our proposed structure. It is "Reverse Card Sorting."

Hypothesis 1

Users will look for "Interest Certificate" under Save > Accounts, not Services.

Hypothesis 2

Users will find "Block Card" faster in the top-level Urgent Care node than in a nested menu.

Task	Scenario	Correct Path	Goal
The "Tax Season" Test	"It's tax season. You need to download your Interest Certificate for your Savings Account."	SAVE > Savings Accounts > Download Interest Cert Home > Quick Links > Interest Cert	Do users look under "Save" or do they wander into "Services" (Legacy habit)?
The "Panic" Test	"You just realized your Credit Card is missing from your wallet. Find the option to secure it immediately."	Home > Urgent Care > Block Credit Card	Do users notice the new "Urgent Care" node at the root level, or do they dig into "Borrow > Credit Cards"?
The "Utility" Test	"Your prepaid mobile plan has expired. Where would you go to top it up?"	PAY > Recharge	Did the consolidation of "Bills" and "Transfer" under "PAY" confuse users, or did it simplify the choice?

Success Metrics & Result (The Pass/Fail Criteria)

Metric	Definition	Result
Success Rate	% of users reaching the correct destination.	> 85%
Directness	% of users who went straight to the target without backtracking.	> 70%
Time Taken	Average time to find the leaf node.	< 15s (Navigational) / < 5s (Urgent)

Activity

High-Fidelity Design (The Skin)

We translated strategic insights into pixel-perfect screens, establishing a cohesive visual language that fosters user trust and enhances brand credibility.

Test	What it is	Target	Use Case	Validates
5-Second Test (Impression Testing)	Show the Line 6 Dashboard for exactly 5 seconds, then hide it.	What were the main elements you remember?	Do they remember seeing the red "Urgent Care" button? If not, it's not visible enough for an emergency.	Visual Hierarchy and "Banner Blindness."
First Click Testing	Show the user a static screenshot and give them a task.	Track exactly where they click first.	"Transfer ₹500." Do they click the "Pay" tab at the top or the "Unified Widget" in the center?	Affordance (do buttons look clickable?) and Task Entry points.

Result

Measurable Impact. We slashed time-to-task by 84%, achieving a "38-Second Victory" for critical flows. We achieved a "Zero Error" rate in transfer success and turned a clunky utility into a sleek, revenue-generating engine.

Test	What it is	Use Case	Validates
Moderated Usability Testing	You watch a user perform tasks on the interactive prototype (Zoom/In-person) and ask them to "Think Aloud."	Watch a user try to "Get Statement" and listen to their frustrations.	The "Happy Path" and handling of edge cases.
Unmoderated Remote Testing	Using tools like UserTesting or Maze to get 50+ users to run through the prototype asynchronously.	Gather quantitative data on "Time-to-Task" for the "Block Card" flow.	Your KPIs (e.g., "Reduce time to 45s").