Loans Management
Comprehensive, yet seamless
HDFC bank aimed to revamp their loans management feature, with the goal of increasing the number of loan applications from existing users and attracting new customers looking to apply a loan with the bank.
Client
HDFC Bank
Led
Design & Research
Type
Retail Banking
Date
3 months
Empathise
Local Research
A competitive audit was conducted to familiarise myself with the banking and fintech landscape in India.
I identified multiple ways in which these competitors provided a better user experience than HDFC bank.
Leading Retail Banks
Customisable dashboards with multiple features that allow users to personalise their financial management view. Although these banking portals tend to be difficult to navigate.
Wallets & Neo Banks
Employs good visual hierarchy and easy to understand UX copies to efficiently connect users to payment features. Certain design patterns would be useful for this loans feature.
Analysing Data
Notable Customer Data
The bank was able to share useful customer data to help me priortise the users I should be designing for, so as to derive the most impact for the initial design.
66%
<35 Years Old
This age group represented the largest demographic, which consists of young families looking to finance the next chapter in their lives.
23%
>1 Active Loan
A quarter of loan customers had at least one active loan with the bank. As the application process was streamlined for returning customers.
30%
Cross Sold Loans
A significant portion of loan customers had a prior relationship with the bank, either through a CASA account or credit card.
10%
Missed Payment Rate
An increasing number of customers have been dissatisfied with missing their payments and frequently call in to waive late fees.
Note: Percentages shown were either rounded up or down.
Prioritise
Popular Loan Types
Loan data from the bank also identified the current most popular loans, which the I could also use to derive the biggest possible impact in this initial design.
60%
Home
The growing middle class has increased home ownership.
12%
Personal
Flexible loan commonly used to consolidate other loans.
10%
Auto
Cars are popular vehicles for families looking to upgrade.
Two-Wheeler, EV Car, Tractor, Rural Housing, Renovation, Home Extension, Plot, Gold, etc
Diverse
Define Target Customers
The needs of 3 personas informed the direction of the new loans feature. With a focus towards allowing users to obtain and manage their loans fuss free.
Home Loan Buyer
About
Looking to finance an affordable home for his family or property investments.
Needs
Predictable loans payments, and ability to customise parameters for future refinancing purposes.
Personal Loan Buyer
About
Looking to cover the cost of a big ticket purchase that is a bit outside their budget.
Needs
Flexible loans with a quick approval process, which can be useful for covering unexpected costs.
Auto Loan Buyer
About
Looking to purchase a car that has a good balance of loan duration and interest rate.
Needs
Obtain lowest loan rates possible to purchase a good deal and drive his new car home.
Ideation
How Might We?
We collected a lot of data on our 3 user types and needed to streamline our findings and prioritize the main focus areas that aligned with our overall research goals.
Seamlessness
An experience that feels smooth and easy for the user, without any noticeable friction or obstacles.
Clarity
The quality of being easy for people of all walks of life to understand, free from confusion or ambiguity.
Naturally, this also leads to 2 different but closely connected objectives to consider in our ideation phase.
How Might We?
Develop a comprehensive loan management dashboard that provide customers a clear overview of all their loans?
…Solve for Clarity
Allow users to track loans, monitor statuses, and view key information in one page.
How Might We?
Streamline the loan selecting and application process, making it as efficient as possible for any customer?
…Solve for Seamlessness
Utilize analytics and existing data to pre-approve loans according to their credit score.
User Flows
Key User Flows
These are 3 key user flows that were designed to minimise the amount of steps needed to reach the final goal, resulting in an average of 30% reduction as compared to the existing design that the bank had at that time.
First Time Loan Application
Ensuring ease with a combination of pre-approved loans for the user to simply click and apply instantly, and a calculator for users to play around and form a custom loan of their choosing.
Loan Closure
Adding a tracking feature to ensure that customers are always aware of where their physical documents are in the delivery process of closing a loan.
Loan Late Payment
Key was to minimise the total number of actions needed for users to pay an overdue installment. Reduce the number of clicks needed by 50%.
Workshop
Card Sorting
An open card sorting activity was conducted to resolve some debate among the team, on how best to organise the loans, with their accompanying details and documents. A group of 20 participants were recruited, and it was found out that most users preferred to group by type due to their familiarity of this interaction.
Majority Vote
16 preferred to group by Loan Type
Group according to vehicle, non-vehicle loans first, followed by loan state.
Minority Vote
4 preferred to group by Loan State
Group according to active or inactive state first, then followed by the various loan types.
Information Achitecture
I strategised and laid out the overall information architecture for both the loans landing page (left) and loans details page (right).
Wireframes
Layout Exploration
Wireframes of all the journeys were done across a span of 1 month, through twice a week refinement sessions. Focused on how best to order the information, while maintaining design consistency with the other epics (Accounts, Credit Cards, etc) that were also simultaneously being designed.
Shared Components
Used across features to facilitate both familiarity and links to other bank products to promote cross selling between them.
Doughnut Chart
Display a breakdown of all the key breakdowns in the feature.
Side Bar
Display supporting links or useful prompts for the feature.
Cross Sell Banners
Display cross sell promotions from other banking products.
Unique Components
Loans specific components that display crucial details and interactions that enable the users to perform their tasks.
Loans Card
Key information of a loan, with buttons access details and perform any necessary payments.
Components
Doughnut Chart
A series of component design exploration were then done to refine the visuals further. This key focal piece had to have 3 components to sufficiently inform users of how their loans are doing.
Overview
Understand direct competitors and their banking platforms.
Visualisation
Learn best design practices that customers are familiar with.
Breakdown
Learn best design practices that customers are familiar with.
Exploration
A handful of variations like the ones below, were tested internally to understand what other components could also be useful for users if added in.
Final Design
Users frequently expressed the need for notifications on upcoming or missed EMIs to better manage their finances. After gathering and iterating on this feedback, the final design offered a clear overview of outstanding and upcoming installments, striking a balance between providing essential information and maintaining simplicity.
Components
Loan Cards
Followed similar key components as the doughnut chart, such as the overview sum and breakdown, but with clear call to action buttons to prompt the user to accomplish crucial actions.
Exploration
Internal testing explored several variations in design to enhance usability for loan management on net banking platforms. Visual elements like color coding were considered to highlight overdue loans or upcoming EMI payments, helping users manage multiple loans easily. A progress bar was also tested to display how much of the loan was paid and the number of EMIs remaining.
Final Design
After iterating on user feedback, the final design achieved a balance between providing a clear overview of outstanding and upcoming installments. The overview was streamlined to include only essential buttons, like initiating payments for overdue loans.
Exploration & Test
Loan Calculators
Plays a pivotal role in allowing users to customise their ideal loan parameters for greater financial planning, but it also allows for users to submit each configuration for approval. Where a relationship manager would contact them soon after to advice on the finer details.
Full Sized Calculator
The full-sized calculator allowed for more meaningful configurations, with space to show a loan summary and its benefits. The wider layout also enabled more filters to be displayed without relying on dropdowns.
Responsive & Side Panel
I explored several iterations of a slim calculator for responsive design to incorporate essential features and enhance its utility.
Exploration & Test
Pre-approved Loans
Plays a pivotal role in allowing users to customise their ideal loan parameters for greater financial planning, but it also allows for users to submit each configuration for approval. Where a relationship manager would contact them soon after to advice on the finer details.
Banner Exploration
A simple design exploration was conducted and tested with the various users to understand which engages the most.
Final Design
After iterating on the feedback I gathered, this design proved to have the right details and copies to users.
Combined Design
Landing Page
The loans landing page provides a personalised experience depending on whether the user has an existing loan or none.
New Customer
User without any loans will have pre-approved loans ready in accordance to their CIBIL score and financial data provided to the bank. The calculator could also be used to apply for custom loans that are subject to approval.
Customer With Existing Loan
Users will have a snapshot of all the loans they currently have, which are displayed in the doughnut chart above and cards that are grouped according to their type below. Users are still apply to apply for loans through the buttons at both the top and bottom of the page.
Combined Design
Other Notable Journeys
Snippets of other notable journeys that were improved to bring the greatest level of seamlessness and clarity to users.
Payment
Journey was simplified into 3 steps, so long as the user did not have to switch the recommended account and payment amount.
Delivery Tracking
A tracking system was implemented to bring awareness to users who want to know where and how their important documents are at any given time.
Details Page
Where users can now easily find what they are looking for due to improved grouping of information.
Prototype Testing
User Feedback
The business unit recruited 20 customers from India. I then conducted a usability test with a prototype to get their overall sentiment of this new design and their ability to complete key user journeys.
55%
Felt could be more intuitive
Most users wished that the overall design could be more intuitive with better use of colours and visuals to direct their attention towards important information.
95%
Seamlessly completed all journeys
Nearly all users liked that the new portal looks simpler and is easier to navigate. Allowing for them to complete tasks with greater ease.
Notable User Sentiment
“I like that I can see how all my loans are doing at a glance.”
Participants liked concise dashboard
“I like that I can easily know and pay loans that are overdue.”
Participants liked easier payment journey
“I wish the loans overview could better highlight important details."
Participants felt design could be more intuitive
“I think it seems very functional, but it would be better if it had better visuals."
Participants wished it looked more complete
Rework
Final Design
I proceeded to refine the design according to the feedback provided by the 20 participants. The final design as shown below was released to the public and the resulting metrics proved that it was a great improvement.
Outcome
Key Business Metrics
The final design was soon released to the public in a pilot phase and here were the key business metrics that were recorded over a period of 6 months after.
18%
The bank saw a direct increase in customers applying for pre-approved and cross sold loans, or requests through the loan calculators.
23%
Users who missed loan payments were reduced by a quarter, which resulted in a better overall user experience score.