Redesigning mobile banking experience for India's largest private bank — the app has 10M+ downloads, 4.7 star rating on Google Play Store.
Confidential — some details have been omitted to comply with my NDA.
92M+
Customers
4.7 ★
Rated on Play Store
10M+
Downloads
My Role
Product Designer
Year
2023 – 2024
Industry
Banking
Timeline
3 Months
Overview
What this project is about
The Problem
HDFC's existing mobile banking application required a comprehensive redesign to improve usability, visual language, and overall user experience. The legacy interface had outdated interaction patterns, inconsistent visual design, and navigation flows that created friction for India's 10 million plus mobile banking customers.
The Solution
Redesigned HDFC Bank mobile application with a fresh, modern visual language and improved user experience. The redesigned application features intuitive navigation, refined interaction patterns, and smooth animations, improving core banking workflows including money transfer, payee management, account statements, and UPI payments.
Discovery
Research Insight and analysis
Discovery Workshops
Our initial meetings were focused on understanding the expectations of the different stakeholders. After aligning on expectations, I facilitated multiple workshop with the HDFC research team to dive deep into research insights.
The insights were focused on customer's mobile banking experience of the HDFC Bank Android and iOS applications, along with identified pain points. We documented the workshop discussions and prepared a detailed plan and roadmap to revamp the HDFC mobile application.
Competitive Analysis
As the next step in research, we thoroughly evaluated competing mobile banking applications, including ICICI, SBI, Axis, and others and prepared a detailed competitive research report.
We presented the competitive research findings to stakeholders to build shared understanding and documented all relevant insights in FigJam for reference throughout the project.
Inspirations drawn from other banking mobile applications were valuable in generating innovative design ideas during the ideation workshop.
IA and User Flows
Information Architecture & User Flows
We defined two customer group personas for the HDFC mobile application; Power and Simple users. All product features were categorised and mapped according to these two user groups.
To improve usability, reduce the number of clicks, and identify key touch-points, We created a high-level information architecture covering all modules. This exercise helped identify and prioritise the high-level feature list for the redesign.
We conducted multiple iterations on the information architecture to refine and improve the structure. Following IA definition, we created user flow diagrams for all identified features. Below is a user flow diagram created for customer registration using credit card verification.
User Flow: Customer registration using credit card.
Wireframing & Testing
Wireframing & Early Usability Testing
After multiple iterations, feature wireframes were finalised. I created a wireframe prototype for each user flow. The wireframe prototypes were sufficiently detailed to conduct early usability testing with real users.
I created user profiles and recruited the right set of participants matching the defined user profiles. I conducted usability testing sessions across different features and documented all results systematically.
I conducted 12 usability testing sessions across different features. Based on usability test results, I iterated on feature designs to improve usability and interaction quality before progressing to high-fidelity designs.
Greyscale prototype: Customer registration using Credit Card
Design concepts: Non-logged-in customer home screen
Design
Visual Language
After finalising the wireframe prototype, I began the visual design phase for the HDFC mobile application. I created different moodboards to explore colour direction and, following stakeholder review, retained the existing blue as the primary brand colour.
I designed Non-logged-in (NLI) customer and several other screens to test colour palette and typography choices. Below are explorations of the visual language across different directions. After multiple rounds of iteration and stakeholder review, we finalised the look and feel of the new HDFC mobile application.
Design concepts: Non-logged-in customer home screen
Design concepts: Non-logged-in customer home screen
Selected and finalized Non-logged-in customer home screen
Prototyping
Prototyping and Interaction Design
I designed interactive prototypes with micro-interactions for each user flow. The prototype outcomes were sufficiently validated to proceed with a second round of usability testing with real users.
Customer registration using Credit Card
Usability Testing
Usability Testing
We conducted detailed usability testing across all major features and documented the results systematically to inform design iteration and refinement.
We conducted 40 online and 6 offline usability testing sessions on high-fidelity prototypes across different features, documenting all test results and participant feedback.
Following the testing sessions, we worked on targeted design iterations to address identified usability issues and incorporate validated improvements before final design delivery.
Usability Testing set-up
Usability Test session with recruited user
Usability Testing insights
Usability Testing to redesign: Choose style - power or simple
Final App Screens
Selected HDFC Bank App screens
Explore how I designed vessel performance application for Mediterranean Shipping Company (MSC) — 650+ vessels onboarded, compliance reporting cut from 7 days to 2 days.
Read next case study