top of page
Ghar
Improving Home Loan application and management on a web and mobile platform,
6 months
Project Background
Dreaming about new home is the fun part but getting into the application is nightmare. Creating a network that offers users home loan across the globe through it’s innovative technology platform by allowing low to middle income earners gain quick, convenient and secure access to home loan application that they need. This platform can be used by the users to check availability for the home loan that they are looking for and to keep the track of all the documents and information they have submitted.
My Role
During this project I got a chance to work with team of designers, developers and business management. This opportunity gave me a perspective on all sides of the product polygon. In this project. I was responsible for the user experience design and visual design. I have gained skills in building component library, crafting user journey map , team collaboration and cross media design application.
Improving the home loan application and management by minimalizing the process for users by creating a classy end-to-end experience. User should be able to easily apply for home loans and avail it on fingertips.
Project Brief
Research
"" Go to the roots ""
Emotions will typically drive the desire to buy a home. Here are some of the reasons for home ownership:
Life Events
Build a space for family
Tired of renting
New investment opportunities
Self belongingness
While researching we saw users are more inclined towards adopting online platform for home loan service now-a-days. Since the aim of this project was to improve user experience for home loan application, it was important for us to look at the existing platform to understand pain points of users. Also to get a clear picture, we took a glance at some of the home loan platforms across geographics like ICICI bank, SBI, SBI yono, Axis Bank, Bajaj Finance, Kotak Bank, Rocket mortgage and Navi. We looked at their product flow, understood the primary objectives and noticed how they hook users onto their products.Here are the things I have learnt:.
+ People have more confidence in a product where they know about the brand and they can have a freedom to make a decision by themselves.
+ Because of rampant online financial scams and data mining people are usually skeptical of trying online platform for loan applications.
+ User always like to be able to track their home loan application status and do things by themselves instead of having to ask a third party all the time.
+ A good platform builds trust and confidence among users.
+ People are skeptical about trusting their personal information and money with people, so it is very important to design a platform that gives users security.
+ User are more flexible with cross-device design solution.
Product Principle
"" Defining pillars of structure ""
Keeping all the research data in mind, we listed down some key principles to define a product and helped us making better design decision. Some of the principles are as follow:
+ Create simple and minimal interface experience which feels classy.
+ Build a feeling of trust in user’s mind, that they are investing in a good product and it will be of great value.
+ Ensure clear and straightforward communication about the product.
+ Make the process of application and tracking easy for users by giving clear navigation.
+ Make a design in such a way that it has less congnitive load.
+ Make it personalised for user to make them feel special.
+ Provide contextual guidance and help.
+ Give gamification effect to get rid of mental fatigue due to time taking application process.
Product Principle
"" Defining pillars of structure ""
Existing Customer Journey Map
Existing/prefilled information
New information
New Customer Journey Map
Design Library
We started of flesh out the basic idea with the help of Fig-Jam, to get clarity about how the flow of loan application goes and can be tracked easily.
Journey Map
"" Finding out the paths ""
As this was one of the biggest projects I have worked on till now, I came across building a component library in Figma during this project. Considering a large number of scenarios each with separate flow, we created a component library which helped us make our work faster and effortless. Here are the things which I have leaned:
+ Creating Separate components for states and variations
With this method, all variations became easily accessible from the component panel and instance menu, making it easier to find and switch between them.
Address - Filled and empty state
Document upload - Filled and empty state
List view - Default and active state
OTP - Filled and empty state
Tabs - Default and active state
+ Heading theming with components
We have used this method while creating variations for icons and UI components with different visual property. This made design easier to maintain since we have to adjust the design in one place.
Icons - Default and active state
Buttons - Default and active state
+ Constraints
This helped us to ensure predictable and intended behavior when components are resized.
+ Text styling
Primary
Secondary
+ Color Pallet
+ Button styling
+ Icon styling
User Interface 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 bettter direction to interaction. This helped company to reduce drop off rate by 25% and increased new customer by 15%.
+ Authentication Flow
Iteration 1 :
+More distraction and confusing decision making process with lot of information on side panel.
+ Asking one question per page makes process longer leads to dropping off the application
Iteration 2
+ Improvement in UI design of side panels with arranged information in clusters
+ More educational marker providing information about data required
Final Design
+Provided entire authentication information in same page instead of providing it into different pages that reduces number of clicks and makes the process faster
+Reduced cognitive load by creating feeling of less data required.
+ Login Flow
Iteration 1
+More visual appealing login ingress is required
+Need to segregate login flow for resident Indian and non-resident Indian
Iteration 2
+Need more of graphical representation and no side panel actions required on login flow
Final Design
+Crafted more visually appealing login page with easy action for new and existing users.
+ Provided separate flow for resident and non-resident Indian.
+ Property Detail Flow
Iteration 1
+Address for property information needs 2-3 steps to fill in which makes process lengthy.
Iteration 2
+Showing Address card will help only in case of prefilled address.
+Chances of not fetching data accurately for address.
Final Design
+Provided Address in the tabs format where user can edit directly the entered information.
+Also giving area type directly in front of them makes choice easier and catches attention.
+Gives clear visuals and makes it easier for user to scan the entered data.
+ Top Navigation Bar
Iterations
+User profile needs to be accessible on top bar to take quick actions.
+Giving just icons may confuse user. Also keeping style of all the action button on top can bring consistancy.
+Menu bar can be simpler.
Final Design
+We have given icon and information by keeping styling same for all the actions on top bar to convey clear navigation to users.
+Designed the basic menu bar to give more clear visual output.
+ Sidebar Interaction
card view for individual process on individual page
card view for individual process on same page
Final Design
+ List view showcasing all the process with status
+ Easy to track the data given
+ Clean and clear activity status
+ Help and Support Side Panel
The actions for help and support is frequently used by users for quick assistance. Keeping main actions on panel gives much more clarity and simplifies the process of decision making for user.
+ Dashboard
Dashboard is replica of activity status and tracking all the documents uploaded in case of home loan application dashboard.
User want to see glimpse of status going with home loan application to take further action accordingly and keep the application updated.
Here are the key points we accommodated in our dashboard design to ensure easy track of all activity status and document checklist.
+ Clear indication of all kinds of loans users have applied for.
+ Status check of all applicants to make sure all the details are filled out.
+ Record of all the property details entered and its current status with ongoing application.
+ Clear and simple visual design to include all the data in an effective way.
+ Easy ingress to edit/update the information.
Cross Device Design
To keep easy overview of loan application and tracking data by providing user flexibility, we have worked on cross device design i.e, application can be processed from desktop or mobile device. Here is the few prototype of few screens on mobile device which shows how cross device design help gain more user on platform.
Key Learnings
+ Users are more skeptical about sharing personal information online, so designing a platform which gives them data security by making them aware about why the documents or information is being asked builds trust in user’s mind.
+ Clear navigation can help understanding long application process easily and effortlessly.
+ Adopting cross- device design can give user more freedom and flexibility.
+ Importance of component library to make design process easy and quick when dealing with lot of different scenarios.
Live Project Link -
Check More
"The details are not detail, they make the design."
- charles Eames
bottom of page