As a long-time HDFC customer, I have personally experienced the friction and inefficiencies of the existing mobile banking application. Basic tasks required navigating through cumbersome flows, and even finding essential information was a challenge.
For payments, I frequently relied on third-party apps like Google Pay and Paytm due to their modern UI and seamless user experience. This fragmented approach of using two apps for interconnected financial tasks was far from ideal. A banking app should be a one-stop solution rather than an additional hurdle.
The redesign aims to address key pain points faced by HDFC users and create a unified banking experience:
1. Outdated and Confusing UI
The existing interface is visually cluttered and difficult to navigate. Implementing a modern, intuitive UI improves both usability and aesthetics, ensuring a smooth user experience.
2. Lack of Consistency in Design Patterns
The app currently lacks standardized design elements, leading to a fragmented experience. A cohesive design system with consistent components enhances familiarity and ease of use.
3. Complex Navigation and Redundant Flows
Users struggle with complicated navigation paths and redundant features. The redesign simplifies interactions by streamlining user journeys and removing unnecessary steps.
4. Weak Payment and UPI Features
The current payment system is unreliable and lacks efficiency. Enhancing transaction reliability, speed, and functionality instills confidence in users and encourages them to rely on the app for all financial transactions.
Responsibilities
Research, UX, UI
Scope
156 hours
Self-started project
Discover
Phase 1
Define
Phase 2
Ideate
Phase 3
Design
Phase 4
DISCOVER
PHASE 1
Research Approach
Given the time constraints and limited availability of HDFC users in my network, I focused on secondary research rather than conducting direct user interviews. My approach included:
App Store & Play Store Analysis:
Scrutinized user reviews to identify recurring complaints and suggestions for improvement.
Competitive Benchmarking:
Analyzed popular third-party payment apps like ICICI Bank, Kotak, FederalBank, YONO SBI, Google Pay, Paytm, and PhonePe to understand why users preferred them and hate them.
Industry Reports:
Referenced Forrester’s Global Mobile Banking report, which indicated that Indian mobile banking apps lag behind global standards. HDFC’s app scored 48 out of 100, underscoring the need for improvement.
Usability Heuristics Review:
Evaluated the current app using Jakob Nielsen’s usability heuristics to identify usability issues.
Cognitive Walkthroughs:
Simulated user interactions with the app to uncover friction points in common banking tasks such as fund transfers, bill payments, and account management.
These insights formed the foundation of the redesign strategy, ensuring that the new design directly addressed user concerns and enhanced the overall banking experience.
DEFINE
PHASE 2
User Persona
Based on research insights, a user persona was created to represent the average HDFC app user. This helped align design decisions with real user needs.
Shreya Narveti
E City, Bengaluru
💼 Marketing Manager
🎯 Goal-Oriented & Tech-Savvy
Pain Points
Slow & laggy app performance
Confusing navigation with too many steps
Unreliable UPI transactions
Frequent logouts & excessive OTP prompts
Outdated UI compared to fintech apps
Needs & Expectations
A fast, seamless banking experience
Simplified transactions with reliable UPI payments
A modern, intuitive UI for easy navigation
Secure but without unnecessary friction
Shreya represents the modern Indian professional who values efficiency, security, and a hassle-free digital banking experience.
IDEATE
PHASE 3
Information Architecture
A revised information architecture was developed to streamline navigation and create a more intuitive experience.
Original Screens vs. Redesigned Screens
A comparative analysis of the original screens and redesigned screens was conducted to highlight improvements.
Old
New
DESIGN
PHASE 4
UI Concept: Bento Grid Layout
The redesign incorporates the Bento Grid design, inspired by Japanese lunch boxes where elements are grouped into structured sections of varying sizes. This approach:
Organizes previously scattered information.
Reduces cognitive load by grouping related features.
Ensures quick and easy access to essential functions.
Enhances visual hierarchy, making navigation more intuitive.
Design Theory
Key Screens Redesigned
Login Screen:
A minimal and secure login process with biometric authentication for a seamless experience.Home Screen:
A dashboard-style home screen displaying essential account details, quick actions, and personalized insights.Money Transfer Flow:
A streamlined process that reduces unnecessary steps and provides instant feedback on transactions.Bill Payment Flow:
A user-friendly bill payment module with reminders for due payments and auto-payment options.Cards & Accounts Section:
A well-structured interface showcasing account and card details, recent transactions, and available offers.
Additional Design Enhancements
Dark Mode Support:
Implemented for better readability and reduced eye strain.Personalized Dashboard:
Allows users to customize their homepage with frequently used features.Gesture-Based Navigation:
Simplifies interactions with intuitive swipes and taps.Smart Notifications:
Provides contextual alerts and insights for improved financial management.
Problems Solved
Modernized UI: Enhanced aesthetics and usability.
Standardized Interface: Improved consistency for easier navigation.
Feature Consolidation: A seamless, all-in-one banking experience.
Scope for Improvement
As UI/UX is an iterative process, there is always room for enhancement. Potential areas for future improvement include:
1. Usability Testing
Conducting comprehensive usability testing with real users would provide deeper insights, allowing further refinements based on user feedback.
2. Accessibility Enhancements
Making the app more inclusive by incorporating:
Voice command features.
Adjustable font sizes.
High-contrast mode for better readability.
