FinLocker
FinLocker is a secure financial fitness tool that aggregates and analyzes a consumer’s financial data to offer personalized journeys to achieve loan eligibility for a mortgage and other financial transactions.
Client
FinLocker Ltd.
Duration
4 Months
Roles
UX Research Visual Design UI Animation Prototyping
Impact
50% increase in signups.
40% Increase in platform engagement.
+7 Net Promoter Score (NPS)
Project Scope
To redesign the current website, focusing on certain major flows like Budgets and Goals, My Property, Credit Health and First-time Home Buyer Journey.
Challenges
1. Current tools feature complex and burdensome designs that compel users to acquire excessive knowledge.
2. There is currently no comprehensive platform specifically tailored for first-time homebuyers, aiming to assist them in comprehending their financial situation and preparing for the responsibilities of homeownership.
Objectives
Designing information and data in a way that enables users to make well-informed decisions during their home-buying journey.Creating a captivating and engaging experience to adequately prepare customers for the journey of homeownership.
Building an inclusive and intuitive tool designed to help users comprehend their financial situation.
Target Audience
In today's fast-paced world, individuals seek a intuitive way to comprehend their finances, including budgets and spending habits. They aim to use this knowledge effectively in the pursuit of acquiring their ideal home.
UX Research
We conducted a Heuristic Evaluation to categorize issues in terms of severity and determine which items require immediate attention. The evaluation revealed several critical issues.
Outdated Design
The portal's design adhered to an outdated aesthetic, lacking contemporary elements and functionalities. Information overflowed on pages, lacking a clear visual hierarchy and cohesive brand language.
Confusing User Flow
The absence of breadcrumbs and unclear page subheadings creates confusion for the user and contributes to increased cognitive load.
Following the submission of a feedback form, the system fails to provide information on when users can expect a response or how to initiate further communication, which is a poor usability heuristic.
The cards lack informative details about their content, such as a brief description or the presence of video content, including its duration. This absence of information makes it challenging for users to decide whether they want to engage with the content.
From our heuristic evaluation we found out that the current solution obviously lacked modern design elements but also had confusing user flows, lacked visual hierarchy & contrast, and did not follow any accessibility guidelines.
Competitor Analysis
To understand what features and flows of the industry leadings platforms were offering, we did a market analysis comparing various feature set.
Design Directions
Objective 1
Keep track of their budgets, goals and incomes.
How might we enhance users' understanding of their monthly budgets and goals, presenting the information in a visually engaging and easily comprehensible manner?
Why
The existing experience relies heavily on numerical data and text, compelling users to navigate through information that is text-heavy, thereby increasing cognitive load.
Approach
We brainstormed on various ways we can show the same amount of information in a way which is more engaging and makes sense.
We dedicated time to sketching wireframes and developing Hi-fidelity versions.
To build more coherent, hierarchical, and structured interfaces, we incorporated the principles of atomic design into our design system.
Atoms
Molecules
Organisms
Pages - Final Design
Relax Guys...
Humans are visual learners. Utilizing visual elements such as progress bars and graphs to present complex data not only helps users easily grasp information but also fosters engagement and enhances information retention.
Create a New Budget or Goal
To make sure the user Interface doesn’t intimidate users, we incorporated friendlier elements like rounded corners, vibrant colours and illustrations.
Adding all the data into the system shouldn't be a long and overwhelming process, we utilized the real estate to display content in a clear and concise way.
Objective 2
Home buying process is fragmented across various institutions and the process is lengthy and tedious
How might we create an intuitive home-buying experience that captivates visual interest, fosters engagement, and simplifies the understanding of all necessary documents for the user?
Why
The current experience of navigating the path to homeownership is overwhelming, involving numerous steps and information overload. The process is scattered across different players, from searching for homes and obtaining mortgage approvals to credit checks and finding real estate agents. This fragmentation often leads to frustration among users.
Numerous websites offer varying step-by-step guides, yet they only outline the different tasks involved in the homebuying process. There is a notable absence of a comprehensive one-stop-shop that streamlines these various aspects, reducing the need for users to navigate multiple sources and facilitating a more seamless journey to homeownership.
Approach
We were impressed by how modern experiences gamify digital interactions, breaking down steps into smaller victories and offering rewards at each stage. While providing actual rewards was not feasible from the client's perspective, we explored alternative ways to evoke the sensation of being rewarded. This became a focal point of our approach.
Atoms
Molecules
Pages
This page revolutionizes the home-buying process by incorporating gamification practices and introducing incremental steps that serve as milestones in the homeownership journey.
Upon successfully completing each step, the system rewards users with subtle animations, evoking a sense of accomplishment and motivating them to move forward in the process.
Every card provides a clear overview of the required documents and verifications. The data collected in the backend is leveraged by FinLocker's team of experts, who then engage with the user to assess their eligibility for home-buying and facilitate the pre-approval process.
Each card can be expanded and the user can view the requirements for that specific card. The backend integration of users financial information allows them to easily connect and deliver for that specific ask.
Objective 3
Visualize the mortgage for their dream home.
How might we enable users to monitor their dream home value and capture their estimate mortgage for that property.
How might we design a tool that lets user easily calculate their mortgage estimate beforehand, that would empower them to make informed decisions and don’t get caught in property dealer’s jargons.
Why?
There are various online and offline realtors that home buyers can approach. Although they are really helpful but the lack of integration with your mortgage bank accounts and credit info pushes you towards the manual labor of connecting the dots.
Approach
We wanted to design a space where home buyers can search for their dream home and connect their bank accounts so they can view the mortgage cost estimates which will help them in their decision making.
Solution
Step 1
Add the property address and click on Link Mortgage Account to connect your bank accounts.
Step 2
Select the bank accounts you want to associate mortgage from.
Step 3
View the home loan mortgages for the linked banked accounts
Based on (insight)
Users jump between multiple websites to compare home price trends in their selected location.
I did
Extracted data from over the years and integrated into the page and designed a data graph where users can compare different house prices in the area over the years. To induce trust in the information, we included the source of the data provider as well.
Usability testing
Identified Error
After usability testing, we observed that a lot of our users would miss the functionality of linking their mortgage account.
My Recommendation
Added a CTA button which would enable users to link their bank accounts and get mortgage interest rates.
Objective 4
Credit score and health
How might we allow users to engage in learning about credit and discover how the world of credit actually works.
How might we assist users in gaining a clearer understanding of their credit score and empower them to make informed decisions regarding their credit expenditures?
Why
The existing credit monitoring tools lack transparency in revealing the specific factors influencing credit health and providing clear guidance on how individuals can improve it, particularly as they strive to improve their credit for the purpose of buying their ideal home and obtaining an estimated mortgage for that property.
Approach
We examined existing tools available in the market and discussed our experiences, highlighting both positive and negative aspects. Additionally, we drew inspiration from applications such as Duolingo, which employ gamification strategies to actively involve users in the learning process and encourage them to enhance their skills. Utilizing insights from these tools and methodologies, we revamped our credit health tools.
Solution
A tool that provides users with a detailed breakdown of their credit score, offering actionable tips for improvement. Additionally, it includes a line graph for a comprehensive view of their credit history.
A space for “All Things Credit”
Each info card can be expanded to explore detailed insights into factors affecting your credit score and tips for improving it.
The user interface incorporates vibrant colours and visual elements to enhance engagement, distinguishing it from traditional credit monitoring tools. The visual hierarchy ensures clear data interpretation, while breaking information into sections helps minimize cognitive load.
We discovered that many of our users lacked an understanding of how credit works.
To address this, we designed a section explaining "What is a Credit Report" to help users educate themselves and become knowledgeable on the topic.
We aimed to design a feature that provides users with a starting point for understanding credit, offering essential information without requiring them to become experts.
Results
IF Design Award 2023
We were proud to see that our design won the prestigious IF Design Award of year 2023.
+7 Net Promoter Score
Our usability testing results showed that 7/10 users would recommend our product to other users and acts as product promoters.
50% new joiners
50% new users joined the platform after releasing the updated version.
Client Testimonials
"We are super excited to release the new platform. The designers did an amazing job in redesigning the user flows and creating something super unique and a joy to use."
Reflection
What went right
Deadlines were met.
Able to incorporate feedback from usability testing.
Team collaborations.
What could be improved
Continuously monitoring and analyzing user metrics to identify areas for ongoing improvement and refinement in the design and user experience.
Further optimization of user onboarding processes to enhance the initial user experience.