Accelerated HDFC’s Online Banking 10x by Resolving Core Usability Breakdowns
Client
Self-Initiated ConceptRedesign of HDFC Bank Online
Industry/Domain
Brand Strategy , Digital Publishing, High-End Portfolio (B2C)
Areas of Impact
User Efficiency, Information Architecture, Usability, Task Completion Rate, Conversion (implied).
Role
Lead UX Designer,UX Researcher
Tools or Methods
Decision Matrix (Strategic Tradeoffs), User Survey Analysis (Conversion Intent)
Timeline
6 Months(Part-Time)
The Result
10x
Faster Money Transfer
90%
Reduction in average task completion
80%
Reduction in time to find account statements.
Accelerated HDFC’s Online Banking 10x by Resolving Core Usability Breakdowns
Client
Self-Initiated ConceptRedesign of HDFC Bank Online
Industry/Domain
Brand Strategy , Digital Publishing, High-End Portfolio (B2C)
Areas of Impact
User Efficiency, Information Architecture, Usability, Task Completion Rate, Conversion (implied).
Role
Lead UX Designer,UX Researcher
Tools or Methods
Decision Matrix (Strategic Tradeoffs), User Survey Analysis (Conversion Intent)
Timeline
6 Months(Part-Time)
The Result
10x
Faster Money Transfer
90%
Reduction in average task completion
80%
Reduction in time to find account statements.
Accelerated HDFC’s Online Banking 10x by Resolving Core Usability Breakdowns
Client
Self-Initiated ConceptRedesign of HDFC Bank Online
Industry/Domain
Brand Strategy , Digital Publishing, High-End Portfolio (B2C)
Areas of Impact
User Efficiency, Information Architecture, Usability, Task Completion Rate, Conversion (implied).
Role
Lead UX Designer,UX Researcher
Tools or Methods
Decision Matrix (Strategic Tradeoffs), User Survey Analysis (Conversion Intent)
Timeline
6 Months(Part-Time)
The Result
10x
Faster Money Transfer
90%
Reduction in average task completion
80%
Reduction in time to find account statements.
From Market Leader to User Friction
From Market Leader to User Friction
From Market Leader to User Friction
Despite HDFC Bank’s status as India's 2nd-largest private-sector lender, its web banking experience posed serious usability hurdles. As a regular user, I initiated this project to address a high-impact, recurring problem: excessive cognitive load and task failure in core banking activities. While a seamless digital experience is crucial for retention (cited by 84% of consumers - study by Accenture), the existing interface was slow, confusing, and required too many steps.
Despite HDFC Bank’s status as India's 2nd-largest private-sector lender, its web banking experience posed serious usability hurdles. As a regular user, I initiated this project to address a high-impact, recurring problem: excessive cognitive load and task failure in core banking activities. While a seamless digital experience is crucial for retention (cited by 84% of consumers - study by Accenture), the existing interface was slow, confusing, and required too many steps.
We need to revolutionize Experience for 90+ Million Users.
We need to revolutionize Experience for 90+ Million Users.
Target User base for Indian Online Banking
Target User base for Indian Online Banking
Target User base for Indian Online Banking
65% : 35%
User Gender Ratio
10+ years in design industry
60% of users
aged 18-26 years
3+ years in digital design
79% of female users
aged 18-49 years
50+ overall projects delivered
Understanding the Priority
Understanding the Priority
Understanding the Priority
Users knew what they wanted. The site wouldn't let them find it.
Users knew what they wanted. The site wouldn't let them find it.
Users knew what they wanted. The site wouldn't let them find it.
My initial research revealed a critical disconnect between User Priority and Interface Hierarchy through 10 user interviews.
My initial research revealed a critical disconnect between User Priority and Interface Hierarchy through 10 user interviews.
The Insight
Users overwhelmingly prioritized three specific actions: Fund Transfer, Account Statements, and Credit Card Payments.
The Insight
Users overwhelmingly prioritized three specific actions: Fund Transfer, Account Statements, and Credit Card Payments.
The Conflict
Despite being top priorities, these features were buried under deep navigation layers, leading to frustration for the 10 users I interviewed.
The Conflict
Despite being top priorities, these features were buried under deep navigation layers, leading to frustration for the 10 users I interviewed.
Other key feedbacks
Other key feedbacks
Needs Fast response and immediate high-value transfers.
Rates Money Transfer difficulty as 3/10.
Prefers Axis Bank for its flexible and easy-to-use interface.
Documenting Near-Total Failure
Documenting Near-Total Failure
Documenting Near-Total Failure
2 Users, 3 Critical Tasks: Documenting Near-Total Failure
2 Users, 3 Critical Tasks: Documenting Near-Total Failure
2 Users, 3 Critical Tasks: Documenting Near-Total Failure
To quantify the real-world friction, I conducted unmoderated Task-Based Usability Testing with two first-time users on the three highest-priority tasks (Fund Transfer, Statements, Bill Pay). This diagnostic revealed that critical tasks were either failed outright or completed with high cognitive load.
To quantify the real-world friction, I conducted unmoderated Task-Based Usability Testing with two first-time users on the three highest-priority tasks (Fund Transfer, Statements, Bill Pay). This diagnostic revealed that critical tasks were either failed outright or completed with high cognitive load.
View the full Usability Test Analysis Tables ↓
View the full Usability Test Analysis Tables ↓
View the full Usability Test Analysis Tables ↓
The Problem Baseline
The Problem Baseline
100+ secs to complete key tasks
Confused & Lost
Misled by unclear CTA names
The current 100+ sec, failure-prone transfer flow was causing users to defect to faster platforms like Google Pay and PhonePe. To reverse this strategic threat, I set the ambitious goal of achieving a 90% reduction in task time, aligning HDFC's speed with the competitive 10 sec market standard. (Validated by global instant payment benchmarks, such as SEPA Instant) This necessary change mathematically translates to making the core money transfer experience 10x faster.
The current 100+ sec, failure-prone transfer flow was causing users to defect to faster platforms like Google Pay and PhonePe. To reverse this strategic threat, I set the ambitious goal of achieving a 90% reduction in task time, aligning HDFC's speed with the competitive 10 sec market standard. (Validated by global instant payment benchmarks, such as SEPA Instant) This necessary change mathematically translates to making the core money transfer experience 10x faster.
Actionable Insights
Actionable Insights
Improve visibility of key actions.
Rename CTAs to be more descriptive.
Provide direct access to key tasks.
Simplify sections to minimize cognitive load.
Actionable Personas
Actionable Personas
The quantitative data (Task Failures) and qualitative insights (Interviews) were synthesized into three core actionable personas, allowing us to define and prioritize distinct user needs and pain points across the redesign. I selected Prateek, Neha, and Karthik because they represent the Frequent Transactor, the Card Manager, and the Auditor, capturing the three distinct primary needs of the platform.
Conclusion: The three developed personas validated that the existing system was misaligned with the emotional, financial, and time-saving goals of our key user segments. Specifically, their high need for fast transfers and effortless statement access was directly contradicted by the system's confusing layout.
The Design Thesis: The personas solidified that the solution lay in redesigning the Information Architecture (IA) to directly serve the User's Intent over the Bank's internal logic. To achieve the 10x speed goal, the entire experience must be built around the priorities revealed by Prateek, Neha, and Karthik.
Conclusion: The three developed personas validated that the existing system was misaligned with the emotional, financial, and time-saving goals of our key user segments. Specifically, their high need for fast transfers and effortless statement access was directly contradicted by the system's confusing layout.
The Design Thesis: The personas solidified that the solution lay in redesigning the Information Architecture (IA) to directly serve the User's Intent over the Bank's internal logic. To achieve the 10x speed goal, the entire experience must be built around the priorities revealed by Prateek, Neha, and Karthik.
Rebuilding the Core Flows
Rebuilding the Core Flows
Rebuilding the Core Flows
The Site Plan Overhaul
The Site Plan Overhaul
The Site Plan Overhaul
The high rate of task failure and complexity demanded a radical restructuring of the Information Architecture (IA). I have replaced the bank's internal, department-centric IA with a User-Intent driven structure, prioritized by the personas. This overhaul drastically reduced the click-depth for critical tasks, instantly creating a streamlined "Golden Path" for high-frequency actions.
The high rate of task failure and complexity demanded a radical restructuring of the Information Architecture (IA). I have replaced the bank's internal, department-centric IA with a User-Intent driven structure, prioritized by the personas. This overhaul drastically reduced the click-depth for critical tasks, instantly creating a streamlined "Golden Path" for high-frequency actions.
Site Map of HDFC Bank Website - With Comments
Site Map of HDFC Bank Website - With Comments
Site Map of HDFC Bank Website - With Comments
Visualizing the Fix and Making Critical Decisions
Visualizing the Fix and Making Critical Decisions
Visualizing the Fix and Making Critical Decisions
Understanding the Pages Cognitive Load
Understanding the Pages Cognitive Load
Understanding the Pages Cognitive Load
I first addressed the severe cognitive friction identified in the diagnostic phase by leveraging the AI-Based Attention Heatmap Analysis. I performed this competitive benchmark of HDFC against Axis Bank to validate my initial comments and see how competitors tackle usability issues.
I first addressed the severe cognitive friction identified in the diagnostic phase by leveraging the AI-Based Attention Heatmap Analysis. I performed this competitive benchmark of HDFC against Axis Bank to validate my initial comments and see how competitors tackle usability issues.
HDFC Bank's Login Page - Heatmap Diagram
Axis Bank's Login Page - Heatmap Diagram
HDFC Bank's Home Page - Heatmap Diagram
Axis Bank's Home Page - Heatmap Diagram
From Sketch to Screen: Lo-Fi Validation and Hi-Fi Delivery
From Sketch to Screen: Lo-Fi Validation and Hi-Fi Delivery
After the competitive analysis and IA audit, I moved immediately into Lo-Fi sketches to quickly visualize and test the proposed solutions across the five core workflows: Login, Home, Account Details, Account Statement, and Fund Transfe to ensure the new flow felt intuitive before investing time in Hi-Fi visuals.
After the competitive analysis and IA audit, I moved immediately into Lo-Fi sketches to quickly visualize and test the proposed solutions across the five core workflows: Login, Home, Account Details, Account Statement, and Fund Transfe to ensure the new flow felt intuitive before investing time in Hi-Fi visuals.
Prototype Walkthrough
Prototype Walkthrough
With the structure validated and iterated by user interviews, I proceeded to develop the complete High-Fidelity (Hi-Fi) Prototype.
With the structure validated and iterated by user interviews, I proceeded to develop the complete High-Fidelity (Hi-Fi) Prototype.
Redesigned HDFC website - Full Walkthrough
Quantified Impact and Validation
Quantified Impact and Validation
Quantified Impact and Validation
The final High-Fidelity prototype is the direct result of continuous iteration and validation, built upon the structural fixes proved in the Lo-Fi user testing. This iterative approach delivered the ambitious results required to meet the competitive market standard, achieving the 10x speed goal across critical workflows.
The final High-Fidelity prototype is the direct result of continuous iteration and validation, built upon the structural fixes proved in the Lo-Fi user testing. This iterative approach delivered the ambitious results required to meet the competitive market standard, achieving the 10x speed goal across critical workflows.
HDFC Bank's Login Page - Before
HDFC Bank's Login Page - Before
HDFC Bank's Login Page - After
HDFC Bank's Login Page - After
HDFC Bank's Home Page - Before
HDFC Bank's Home Page - Before
HDFC Bank's Home Page - After
HDFC Bank's Home Page - After
HDFC Bank's Fund Transfer Page - Before
HDFC Bank's Fund Transfer Page - Before
HDFC Bank's Fund Transfer Page - After
HDFC Bank's Fund Transfer Page - After
HDFC Bank's Account Details Page - Before
HDFC Bank's Account Details Page - Before
HDFC Bank's Account Details Page - After
HDFC Bank's Account Details Page - After
Key Redesign Impacts
Key Redesign Impacts
10x
10x
Faster Money Transfer
Faster Money Transfer
90%
90%
Reduction in sending money to a beneficiary.
Reduction in sending money to a beneficiary.
95%
95%
Reduction in time to find the credit card section
Reduction in time to find the credit card section
80%
80%
Reduction in time to find account statements.
Reduction in time to find account statements.
Enhanced Transaction Filters: I introduced dedicated Credit, Debit, and UPI filters to dramatically improve transaction searchability and management, saving the user valuable time.
User Feedback: The transaction history filters are fantastic, specially the UPI.
Enhanced Transaction Filters: I introduced dedicated Credit, Debit, and UPI filters to dramatically improve transaction searchability and management, saving the user valuable time.
User Feedback: The transaction history filters are fantastic, specially the UPI.
Financial Command Center: Introduced the Income vs. Expense Status Graph with weekly, monthly, and yearly toggles for immediate, visual financial clarity eli, eliminating the need for manual statement downloads, drastically reducing the time users spent on budgeting and tracking.
User Feedback: The expense graph is such a helpful feature. It makes tracking my spending so much easier.
Financial Command Center: Introduced the Income vs. Expense Status Graph with weekly, monthly, and yearly toggles for immediate, visual financial clarity eli, eliminating the need for manual statement downloads, drastically reducing the time users spent on budgeting and tracking.
User Feedback: The expense graph is such a helpful feature. It makes tracking my spending so much easier.
Financial Command Center: Introduced the Income vs. Expense Status Graph with weekly, monthly, and yearly toggles for immediate, visual financial clarity eli, eliminating the need for manual statement downloads, drastically reducing the time users spent on budgeting and tracking.
User Feedback: The expense graph is such a helpful feature. It makes tracking my spending so much easier.
Financial Command Center: Introduced the Income vs. Expense Status Graph with weekly, monthly, and yearly toggles for immediate, visual financial clarity eli, eliminating the need for manual statement downloads, drastically reducing the time users spent on budgeting and tracking.
User Feedback: The expense graph is such a helpful feature. It makes tracking my spending so much easier.
Simplified Homepage Actions: Consolidated 'View Total Balance' and 'Quick Fund Transfer' onto the homepage dashboard. The 'View Total Balance' option was made context-centric, giving users the choice to display the amount for enhanced privacy.
User Feedback: "Really appreciate the 'view balance' option and having the transfer right there."
Simplified Homepage Actions: Consolidated 'View Total Balance' and 'Quick Fund Transfer' onto the homepage dashboard. The 'View Total Balance' option was made context-centric, giving users the choice to display the amount for enhanced privacy.
User Feedback: "Really appreciate the 'view balance' option and having the transfer right there."
User Validation, The Human Result
User Validation, The Human Result
User Validation, The Human Result
The most powerful proof came from the users themselves, confirming that the new interface is intuitive and efficient.
The most powerful proof came from the users themselves, confirming that the new interface is intuitive and efficient.
"Absolutely loving the new design!"
"Absolutely loving the new design!"
"The transaction history filters are fantastic, specially the UPI."
"The transaction history filters are fantastic, specially the UPI."
Validation of the added granularity and focus on high-frequency transaction methods.
Validation of the added granularity and focus on high-frequency transaction methods.
"Finding the Login button is a breeze now."
"Finding the Login button is a breeze now."
Validation of the Reductive Design Strategy on the Login Page.
Validation of the Reductive Design Strategy on the Login Page.
Final Thoughts
Final Thoughts
Final Thoughts
Months after publishing this concept redesign, HDFC released a public login update incorporating many of the same core principles I had proposed, simplified CTA placement, and reduced visual clutter. This independent, real-world action from HDFC confirms that my data-backed approach to Information Architecture and friction elimination was strategically aligned with enterprise-level product thinking.