Ghar
Improving navigation and user flow of Home Loan application and management on a web and mobile platform.
Role and Responsibility
User Research: Contextual inquiry, Journey Mapping, Usability Testing
UX Design: Sketching, Wireframing, Interaction Design, Prototyping, Building Design System
Collaboration: Cross-Functional Team Collaboration (Designers, Developers, Product Managers)
Platform
Duration
Web
Mobile (IOS and Android)
8 Months
( June 2021- Dec 2021)
Tools Used
Figma, Miro,
Adobe Photoshop
Back Story
HDFC Home Loan is a trusted provider of home loans in India, helping 65 millions of users achieve their dream of owning a home. The platform offers services like checking loan eligibility, submitting documents, and tracking loan applications. With the increasing use of digital platforms, HDFC Home Loan is available on both web and mobile, making it easier for users to access services.
The Situation
HDFC Home Loan helps customers secure loans for their dream homes. The existing platform allowed users to check eligibility, track application status, and upload required documents. However, users often struggled with a fragmented experience, tedious processes, and a lack of trust in online financial platforms.
​
A product manager approached us with the vision of creating a more consistent, seamless, and user-friendly experience for managing home loans across web and mobile platforms. The goal was to minimize the complexity of applying for home loans while fostering trust and transparency in the process.
Unclear Instruction
Time Consuming Process
Lack of trust in decision making
?
How might we simplify and streamline the home loan application process by introducing features that build trust and make application tracking and document management more intuitive and consistent across the platform?
Solution
Impact
91%
Online Application in 2021
21%
15%
New User Adoption Rate
User Retention Rate
-
Redesigned the home loan application experience to provide an end-to-end solution tailored for seven diverse user cohorts, including Indian citizens and NRIs.
-
Designed a dashboard replicating the activity status and tracking of uploaded documents, allowing users to view the progress of their home loan application at a glance and take necessary actions to keep the application updated.
-
Achieved viral adoption, reaching over 65 million users globally.​
How did I understand the problem?
Who is the user?
The Home insurance platform serves a diverse set of users navigating the home loan journey, including:
-
Resident Indians (RI) – salaried employees, self-employed professionals, and pensioners looking for structured financial support.
-
Resident Indians - Non-Salaried – housewives, students, and retired individuals who may not have a regular income but seek home loan solutions.
-
Non-Resident Indians (NRIs) – individuals investing in property back home, requiring a streamlined loan process tailored to their needs.
-
NRIs in the Merchant Navy – professionals with unique work conditions who need flexible and accessible financial solutions.
User Interviews
4
Resident Indians- Non Salaried
15
User Interviews
6
Resident Indians
4
Non-Resident Indians
1
NRI in
Merchant Navy
Life
Events
Build a space
for family
Tired of
renting
New investment opportunities
Self belongingness
Primary motivations for homeownership
Customer Anecdotes from User Interviews
From our user interview, we understood that- Emotions will typically drive the desire to buy a home, often tied to personal aspirations and life goals.
Resident Indian, Pensioner
"I’ve worked my whole life to own a home, but the loan process feels built for younger buyers—why isn’t there more support for retirees like me?"
Non Resident Indian
"I was excited to apply online, but the lack of clear eligibility criteria left me confused."
Resident Indian, Salaried
"Buying a home is not just a financial decision but an emotional milestone."
Resident Indian, First Time Buyer
"Buying a home is a lifelong dream, but the application process felt overwhelming and unclear."
Key Insights
-
Users trust platforms associated with well-known brands and appreciate the freedom to make decisions independently.
-
Due to the prevalence of online financial scams and data breaches, users are often skeptical of using online platforms for loan applications.
-
Users prefer the ability to track their home loan application status independently without relying on third parties.
-
Users value platforms that provide cross-device flexibility, allowing them to access and manage applications seamlessly.
-
People are skeptical about trusting their personal information and money with others, making it crucial to create a platform that communicates security and reliability.
Competitive Analysis
As part of our research, we observed a growing inclination among users toward adopting online platforms for home loan services. To enhance the user experience, we began by analyzing the existing platform to identify user pain points. This analysis allowed us to examine product flows, understand primary objectives, and observe strategies used to engage users.
Key Insights
-
Personalization and ease of use are crucial for customer satisfaction, with a clear trend toward tailored loan recommendations and simple interfaces.
-
Transparency in terms of eligibility, interest rates, and hidden charges is vital to building user trust.
-
End-to-end digital processes like those offered by Rocket Mortgage and Navi, provide higher adoption rates due to convenience and efficiency.
-
Customer support is often a pain point, and the ability to seamlessly integrate customer service channels with automated processes can significantly enhance the user experience.
Redesign Goal
Keeping all the research data in mind, we listed down some key principles to define a product and helped us making better design decision. ​
Keep it simple, yet significant
It must be intuitive and transparent which allows the user to always know the next step to take.
The flow must reduce the number of clicks which in turn reduces the task time.
The new product must build trust between the user and the platform.
Design System
We designed a comprehensive Design System in Figma while catering to the diverse needs of 7 distinct user cohorts, including Indian citizens and NRIs. The components created following design system streamlined the design process and ensured consistency across scenarios enabling faster and more efficient design execution.
Component and pattern library
Separate UI components for different states and variations
Creating distinct components for various states and variations ensured easy accessibility from the component panel and instance menu. This simplified the process of finding and switching between variations.
Foundational Elements
Style Guide and Theming
I developed a comprehensive and flexible style guide that standardized colors, typography, and other foundational elements. This system allowed developers to easily adapt themes for different products while maintaining design consistency. It also ensured seamless scalability, enabling the design framework to evolve alongside future growth.
Impact
60%
Faster Development Cycle
-
Consistent Design Language ensured uniformity across platforms, enhancing brand identity and user experience.
​
-
Scalable & Customizable Design enabled flexibility to adapt themes and styles while maintaining cohesion.
​
-
Reduced Designer Workload minimized repetitive tasks, allowing designers to focus on innovation and strategy.
Existing Customer Workflow
Existing/prefilled information
New information
New Customer Workflow
We began by fleshing out the basic idea using Miro, creating an initial framework to clarify the flow of the loan application process. This helped us visualize how users could seamlessly apply for loans and track their progress with ease.
User Work Flow
What I did for Design?
I witnessed the changes in the designs and refinements throughout the project. This entire process gave me more deeper understanding about user experience and how changes in elements can completely gives better direction to interaction.
Figma File Screenshot of source file
Dashboard
-
The dashboard now features a structured layout that allows users to track their loan application progress at a glance, providing a clear overview of key milestones.
​​
-
Document checklists and status updates are visually highlighted, ensuring users can easily identify pending actions and stay informed throughout the process.
Before​
After
Authentication
​​
-
Consolidated all authentication information on a single page, reducing clicks and speeding up the process.
-
Reduced cognitive load by simplifying the data input, creating a sense of minimal effort required.
Before​
After
Property Detail Flow
Final Design
-
Offered two property search options: entering the name manually or using the LRN (Land Registration Number).
-
Introduced an editable tab format for the address section, allowing users to directly update their information with accuracy if not found via direct search.
-
Consolidated all information on a single page to provide users with a clear overview.
Before​
After
Top Navigation Bar
Top Navigation Bar
Iterations
-
Made user profile easily accessible on the top bar for quick actions.
-
Giving just icons may confuse user. Replaced icons with clearer labels to avoid confusion and ensure consistent styling for all action buttons.
-
Submenu with highlighting selected option.
Sub Menu Options
Final Design
-
Standardized icon and information styling for all actions on the top bar, ensuring clear and consistent navigation for users.
-
Simplified the menu bar to provide a more intuitive and visually clear layout.
Sidebar Interaction
Iteration 1
-
A card view for each process on individual pages to enhance clarity and focus for users.
Iteration 2
-
A card view for each process on the same page to maintain focus and improve clarity without navigating away.
Final Design
-
Utilized a list view to showcase all processes with their respective statuses.
-
Made it easier for users to track their submitted data
​
-
Clean and clear activity status
Help and Support Side Panel
Placed help and support actions prominently on the panel for easy access. This approach improves clarity and simplifies the decision-making process for users.
Cross Device Design
Designed for cross-device accessibility, allowing users to track and process loan applications seamlessly on both desktop and mobile devices.
Usability Testing
Medium Used
In-person and remote sessions via Zoom/Google Meet
Participant Types
20 novice users and 3 expert users
I conducted usability testing in two stages:
​
-
Internal Testing: Initially, I tested the design with design experts within the team to gather first-level feedback before handing it over to developers for HTML coding.
​
-
External Testing: After incorporating the feedback, I tested the design with 20 users to identify usability issues and understand user behavior.
Next Check
After the first level of HTML coding, I conducted testing on the design, identified bugs, and listed the necessary changes to fix the issues and improve the overall user experience.
Key Learnings
-
Building trust by explaining the purpose of requesting personal information, along with using trust and educational markers, enhances user confidence and ensures data security.
-
Clear navigation simplifies long application processes, making them easier to follow.
-
Cross-device design offers users flexibility and freedom to interact across devices.
-
A well-organized component library speeds up the design process and handles diverse scenarios efficiently.