Redesigned Banking Site to Achieve a 10x Faster Money Transfer Experience
Redesigned Banking Site to Achieve a 10x Faster Money Transfer Experience
HDFC Bank
4 min read
4 min read
Role:
Role:
UX Researcher
UX Researcher
UX Designer
UX Designer
Timeline:
Timeline:
6 months
6 months
Industry:
Industry:
Fintech
Fintech
B2C
B2C
"HDFC Bank is India's 2nd-largest private-sector lender by assets and market capitalization." However, the user experience of online banking often falls short, resulting in frustration and pain points. As a regular user of HDFC Bank, I decided to delve deeper into this problem and improve the usability of their banking website.
"HDFC Bank is India's 2nd-largest private-sector lender by assets and market capitalization." However, the user experience of online banking often falls short, resulting in frustration and pain points. As a regular user of HDFC Bank, I decided to delve deeper into this problem and improve the usability of their banking website.
According to a study by Accenture, 84% of consumers aged 18-24 and 80% of consumers aged 55-64 said that a seamless and secure website was a critical factor in choosing a bank.
According to a study by Accenture, 84% of consumers aged 18-24 and 80% of consumers aged 55-64 said that a seamless and secure website was a critical factor in choosing a bank.
To Know who is my Target Audience?
Based on this Target Audience, I have conducted User interviews with 10 users to gather information directly from respondents.
I analysed the below data.
I analysed the below data.
Gender ratio of online Banking in India in 2023
Gender ratio of online Banking in India in 2023
65%
65%
MALE
MALE
35%
35%
FEMALE
FEMALE
60% of digital banking consumers are aged between 18-26 years
60% of digital banking consumers are aged between 18-26 years
79% of female users are aged between 18-49 years
79% of female users are aged between 18-49 years
Based on this Target Audience, I have conducted User interviews with 10 users to gather information directly from respondents.
Based on this Target Audience, I have conducted User interviews with 10 users to gather information directly from respondents.
User interview - Understanding the User Priority
User interview - Understanding the User Priority
After conducting user interviews of 10 users, I had created a priority chart as below for the homepage and defined the features needed as per the users.
After conducting user interviews of 10 users, I had created a priority chart as below for the homepage and defined the features needed as per the users.
This priority is also supported by the below Data
This priority is also supported by the below Data
Next, I conducted unmoderated in-person Task-Based Usability Testing with 2 first-time users in real-life scenarios to examine their entire user journey, from initial interaction to task completion, to identify pain points and areas of friction.
3 tasks included are finding account statements, sending money to a beneficiary, and paying credit card bills, based on the priority.
Next, I conducted unmoderated in-person Task-Based Usability Testing with 2 first-time users in real-life scenarios to examine their entire user journey, from initial interaction to task completion, to identify pain points and areas of friction.
3 tasks included are finding account statements, sending money to a beneficiary, and paying credit card bills, based on the priority.
Key Insights
Key Insights
Based on the data and user interviews, I have created the below 3 Personas.
Based on the data and user interviews, I have created the below 3 Personas.
Personas define the below needs of the hour
Personas define the below needs of the hour
Login Page - Design Evaluation
After understanding the needs, I delve into the interface. I have started evaluating the UI against the best practices and standards. My evaluation is based on usability testing, UX laws and principles of design.
HDFC Bank's Login Page
HDFC Bank's Login Page
I also perform AI-based Attention Heatmap Analysis of HDFC pages against another competitive banking website (Axis Bank's website) to validate my comments. This A/B testing also shows how Axis bank tackles usability issues.
I also perform AI-based Attention Heatmap Analysis of HDFC pages against another competitive banking website (Axis Bank's website) to validate my comments. This A/B testing also shows how Axis bank tackles usability issues.
HDFC Bank's Login Page - Heatmap Diagram
HDFC Bank's Login Page - Heatmap Diagram
Axis Bank's Login Page - Heatmap Diagram
Axis Bank's Login Page - Heatmap Diagram
HDFC Bank's Login page
- Diversified attention more towards other aspects than the main CTA
- leads to more cognitive friction and confusion.
HDFC Bank's Login page
- Diversified attention more towards other aspects than the main CTA
- leads to more cognitive friction and confusion.
Axis Bank's Login page
-Visual design is balanced
-The Logo first catches the attention and lead to the CTA in a unidirectional flow.
Axis Bank's Login page
-Visual design is balanced
-The Logo first catches the attention and lead to the CTA in a unidirectional flow.
Home Page - Design Evaluation
Home Page - Design Evaluation
HDFC Bank's Home Page
HDFC Bank's Home Page
HDFC Bank's Home Page - Heatmap Diagram
HDFC Bank's Home Page - Heatmap Diagram
Axis Bank's Home Page - Heatmap Diagram
Axis Bank's Home Page - Heatmap Diagram
Axis Bank's Home Page - Heatmap Diagram
Other Pages- Design Evaluation
Other Pages- Design Evaluation
Existing Site Plan Analysis
Existing Site Plan Analysis
The design evaluation indicates issues related to the information architecture and the overall site plan. So, I analyzed the IA to understand the overall design flow and the issues related to this flow.
The design evaluation indicates issues related to the information architecture and the overall site plan. So, I analyzed the IA to understand the overall design flow and the issues related to this flow.
The evaluation of the IA gives me a direction to create the initial sketches. To validate the updated flow, I have created lofi screens and tested with 5 users.
The evaluation of the IA gives me a direction to create the initial sketches. To validate the updated flow, I have created lofi screens and tested with 5 users.
After testing the sketch prototypes with users, and analyzing user feedback, I started designing the High-fidelity prototypes and will be testing with the users for feedback on this.
After testing the sketch prototypes with users, and analyzing user feedback, I started designing the High-fidelity prototypes and will be testing with the users for feedback on this.
High-fidelity prototype - Walkthrough
High-fidelity prototype - Walkthrough
High-fidelity prototype - Walkthrough
Re-Design Impact - Enhances the findability of key features
Re-Design Impact - Enhances the findability of key features
80% reduction in time to find the "account statement".
80% reduction in time to find the "account statement".
90% decrease in task time to send money to beneficiary.
90% decrease in task time to send money to beneficiary.
10x Faster Money Transfer
10x Faster Money Transfer
95% decrease in task time to find the credit card section.
95% decrease in task time to find the credit card section.
User Feedbacks
- Absolutely loving the new design!
- Finding the Login button is a breeze now.
- The expense graph is such a helpful feature. It makes tracking my spending so much easier.
- Really appreciate the "view balance" option.
- The transaction history filters are fantastic, specially the UPI.
User Feedbacks
- Absolutely loving the new design!
- Finding the Login button is a breeze now.
- The expense graph is such a helpful feature. It makes tracking my spending so much easier.
- Really appreciate the "view balance" option.
- The transaction history filters are fantastic, specially the UPI.
- The expense graph is such a helpful feature. It makes tracking my spending so much easier.
- Really appreciate the "view balance" option.
Conclusion
Conclusion
Recently, the HDFC login page received a fresh redesign, and I'm excited to share that they incorporated many of the principles I had proposed. Seeing their Design team align with my concepts really validates my approach and reinforces that my design thinking was right on track!
Recently, the HDFC login page received a fresh redesign, and I'm excited to share that they incorporated many of the principles I had proposed. Seeing their Design team align with my concepts really validates my approach and reinforces that my design thinking was right on track!
