Magicbricks Home Loan UX Case Study

UX Case Study of how I made The Home loan application process easier.

Last year I was looking for a house for me and my family. After some time I realised that there is something which I need to look for and which is most necessary to buy a house, Loan for House. Then I started to visit banks and their websites. Reading their brochures and long calls with their relationship managers became part of my daily life. Few of the banks shown interest in me, on the other hand, few rejected me. But the most difficult part was to compare all the banks and to decide which bank will be best for my needs. The time came when I had all the knowledge to write a book “How to get a Home loan” but I realized that this was a once in a lifetime need for me. And might be I will not need another Home loan for the rest of my life.

In India generally, people buy a house once in their lifetime and at the time of applying for the loan, they are unaware of the differences in Bank offers and their policies.

When few months ago I was assigned to “Home Loan” project I knew from where to start. How I can add value to this project and I was able to empathize with the user.

The Objective of the Project

To create an easy, intuitive, and engaging home loan landing page for users to drive more form completions

Proposition

To provide an interface for the user to begin their home loan application journey that will

• Convey the value proposition of home loans assistance offered by MB
• Captures the attention of the user by engaging them with various assessment tools
• Enables the user to seamlessly start/ resume his application process through the page
• Provide an intuitive and easy to complete application form to users
• Create a list of minimum data points required to maximise online submissions
• Ensure minimum drop-offs amongst multiple sections of the application.

Goal

Magicbricks will aim to find users the best home loan deal for their situation and will be there every step of the way from applying for the home loan to the settlement of the property.

Team

Alok Mittal- UX Designer
Himanshu Tyagi- UX Lead
Snehal Singh- Product Manager
Himanshu Arora- Content Writer

Duration of the Project

We followed mobile-first approach and after finalizing the requirement and wireframing the duration for designing was:
5 days for M-site and,
5 days for Web?

Competitive Analysis (Secondary Research)

Because of the shortage of time, we directly jumped to our secondary research. I came across a number of websites and apps that are already in the market and trying to solve the same problem by their means.

Although, I found the experience pretty much the same in all of them. For a few elements, we tried to follow the same user experience because it was tested and live. And for the rest of the elements, we used our experience and gut feelings to make them better. In the latter part of the article will we see what worked and what didn’t work.

Direct/Indirect Competitors

Competitive Analysis Based on Features

Final Thoughts

Problem Statement

Though Magicbricks home loan feature was fully functional but we knew that there is a scope of improvement. It was a pure lead generation model. But how to drive the users to start the application was difficult to know.

“If I had asked people what they wanted, they would have said faster horses.”
Henry Ford

So, based on our experience and gut feelings we figure out the existing problems and area of improvements. Which are listed below:

Home Page

1. First impression is the last impression: During our usability testing, we found that, when a user lands on Home page, the white text over the image with the black overlay was difficult to read. So focus shifts to the text fields. And as per Fogg’s Behaviour Model B=MAT, the user is not motivated yet to take the action. So the user scrolls down the page.
2. How it will work: Users were confused regarding the feature, how will it work if they provide the information related to their personal and professional life. What’s the process and when they will get the amount.
3. Bank information: Magicbricks home loan was bridging the gap between Users(Gathering the information) and Banks(Providing the information). But we were not educating our users about banks and their offering. Due to which we were not able to build trust within users.
4. No dashboard to track application: After submitting the application by users, we were informing them via e-mail and SMS but on the platform itself we were not guiding our user through the process or next step.

Old Home Page

Old Form

1. High Cognitive load: The page was overcrowded with too much information of steps, iconography, text fields, sliders etc. And this is just the first of three-step process.
2. Too many questions: We were asking around 30 to 35 questions per user to submit the application. Which was taking too much time to complete the process by users.
3. Header with all navigation points: We know that this is a very crucial step for our users and business, still because of navigation points available on the header users can leave the page anytime.

Old Form Design

Understanding the User Flow

As it always goes, to design a solution, you need to understand the problem first. Although the task was to create a Home loan feature, it was very essential to research the pre and post applying phase.

We are not selling a product, we are selling experience. Hence I feel it’s really important to understand the emotional side of users — their motivation, fears, feelings, etc.

But first, let’s break the journey into smaller parts and analyze each one of them.

Let’s have a quick look at each of the stages.

Stage 1- FUE (First User Experience)

The exploration, the user is excited to go further and check as much as possible about the experience. At this stage, we should be as informative as we can so he quickly proceeds to the next stage (Apply for Home Loan). At this stage user will try to find answers to 3 questions:

1. What is Magicbricks Home Loan?
2. How to start?
3. Why it is important to me?

What is Magicbricks Home Loan?

When a user lands on Home loan landing page, it is important for the user to make sense of Magicbricks Home loan and how to avail the service.

New Home Page

At this point we highlight:

1. Brand Value (Ayushman and Kirti)

The brand image plays a crucial role in creating a brand in terms of the privileged position in the minds of consumers, the ability to easily distinguish it from the other brands in the market and eventually in terms of influencing the purchasing decision of consumers. In this sense, the process of building a brand image is considered one of the basic steps of marketing communication.

Mere-Exposure Effect: It is the “phenomenon by which people tend to develop a preference for things merely because they are familiar with them.”

2. Form to Start application

Because this will be based on a pure lead generation business model therefore placement of the Application form was the most important part.

1. We wanted that our user would be able to start the application form first fold itself and it should be easy to locate.
2. To start the process, we asked for Loan amount and mobile number. So that if the user leave the form in between, then we would have his/her mobile number to contact them. This will also help us in maintaining genuine leads in the database.

3. How it works

This section will explain the overall Home loan application process through Magic Bricks. The section should highlight the following points:

• Online application submission
• Hassle-free document collection service by Magicbricks
• Document submission to banks by Magicbricks
• Quick approvals from banks

There will be a video that will illustrate the HIW process. The video should be put before the textual explanation.

Old Vs New

Stage 2- Application Form

At this stage, the more the user submits the form, the more will be the chances of loan disbursal. But, to fill long application forms is a pain point for all. So we changed our form filling process. We wanted to be as success as we can in getting information from our users, to reduce our tele-calling team effort. So,

New Form

1. We change the order and reduced the questions

To determine the order of questions in the form, here are the six principles we followed:

1. Follow how the user thinks
2. Core before supplementary
3. Easy before difficult
4. Related together
5. Be consistent
6. Principles, not rules

In our Home-loan process, these might seem like sensible steps:

1. Identification
2. Income
3. Liabilities
4. Loan request
5. Supplementary information

In this structure, the most related questions always appear in the same step. For example, name, address and phone number all appear in the Identification step.

2. One question at a time

This pattern is about splitting up a complex process into multiple smaller pieces, and placing those smaller pieces on screens of their own.

1. It reduces cognitive load — If there is less stuff on screen and only one choice to make, then friction is reduced to a minimum. Therefore, users stay on task.

2. Handling errors is easy- When users fill out a small form, errors are caught and presented early. If there’s one thing to fix, then it becomes easy to fix, which reduces the chance of users giving up.

4. Tracking behavior is easier- The more there is on a page, the harder it is to determine why a user has left the page.

5. Tracking progress and returning to previous steps is easier- If a user submits information frequently, we can save it in a more granular fashion. If a user drops off, we can send them an email, prompting them to complete their order, for example.

6. Scrolling is reduced or eliminated- If pages are small, users won’t have to scroll. And the call to action is more likely to appear above the fold, which reinforces the requirements, making it easier to proceed.

7. It adds a sense of progression- Because the user is constantly moving to the next step, there is a sense of progression, which gives the user a positive feeling as they fill out the form.

8. Repeat user experiences are faster- If, for example, we store the user’s employment type and salary details, we can skip these pages and take them straight to the “next” page. This reduces friction and increases conversion.

9. It compliments mobile-first design- Mobile-first design encourages us to design what is truly essential for small screens. One Thing Per Page follows the same approach.

3. We removed the navigations from the header

Generally, you want to give a user two options. Click this or that. Move forward or go back. Click this link or leave the page.

With only two things to choose from, most users can make a quick — even instantaneous decision so that the interaction continues.

Hick’s law
The time it takes to make a decision increases with the number and complexity of choices.

4. Get Help

If at any stage user feels that he is stuck anywhere or needs any assistance during filling the application form, he/she can contact us on the given phone number or email address. Or if he/she wants to request a call from Magicbricks they can also request a callback.

Old Form vs New Form

Stage 3- Compare Banks offer

To compare all the banks at one place is the USP of Magicbricks Home loan. The bank recommendation page will display the list of banks that are likely to offer loans based on the user profile. At this stage, now user can compare the interest rate, processing fee and tenure of the different banks or he can also click on “More Details” button to read more information.

• Take into account the city in which the user is based in.
• Identify the banks that are on boarded for the city.
• Return the list of banks which satisfy the above mentioned requirements.
• If no banks are found for the user city, move the user directly to the thankyou page.

Note: users can select only one bank on the recommendation page. IF they needs to change the bank, our TC will guide them through the process offline.

Stage 4- RUE (Repeat User Experience)

Once the user has signed up by verifying his number on Magicbricks, he will come back to
1. Complete his application or
2. Track his application

For active users we prioritized the following things:

1. Pre Emptive UI

At Magicbricks Home loan user can submit the Loan application for maximum 4 times. So, to save the time and effort of verified user, we prefilled the Loan amount and Mobile number. Now this time user just has to click on Apply now to start filling the application.

2. Track Application

Once the application form has been filled and submitted it pass through various steps like verification of documents, background check, processing free payment, processing the property documents and the final step in the entire housing loan procedure is the loan disbursal stage.

Track status will help the user to check where the application is and how it will proceed. Step by step progress will also boost confidence in our user.

3. Resume Application

If the user has left the application in between, he can come back and continue from where he left anytime from Home page. One question per page will be very useful in maintaining the track to resume the application.

Discovery and Entry Points for Home Loan

The next and crucial step was to let the world know about Magicbricks Home Loan. Apart from media publications and digital advertisements, we had to communicate with our existing and upcoming users of Magicbricks. So we started to figure out where our users spend their time most. Then we chose Home page, Search result page and Property Detail page for our regular/upcoming users and Mailers for past users.

1. Home Page (Navigation Bar and Promotional Widget)

Earlier Home loan feature was available under “Tools and Advice”. But we that users are unable to locate it there. So we pull it out and created a separate navigation option. We saw good results because of it. Later when we launched our full-fledged new section “Property Services” we had to replace it. Now it is available under “What’s New” and “Property Services”.

2. Search Result Page

This skyscraper was a banner advertisement on the Search result page. Users who are also looking for Home loan while searching for property click on it to check more information.

3. Property Detail Page

We found users are very much keen to check Home loan offers available on properties they are interested in. We saw tremendous results when we integrated Home loan with property detail page.

Core Design Screens

We followed the Moile first approach for designs. And below are the core design screens. After getting the approval on mobile we moved to the web part.

Communication Mailers

Before diving into the email design phase, it was important to work on designing the user experience we wanted to offer in our messages. There were four basic rules we followed:

1. The email must be simple — enter only the content necessary to achieve a goal;
2. The email must be clear — create an ordered structure;
3. The email must be honest — don’t hide anything from the user.
4. The email must have a CTA — There must always be a clear and precise call to action at the end of the path designed for your email recepients.

The most successful emails are those that are easy for users to read. Any unnecessary element dilutes the effectiveness of your emails. Make sure your email templates are designed with a mobile-first approach.

Testimonials (Social Validation)

Social validation works on the principles of liking and conformity. When a consumer is unsure if he should go ahead and make a purchase, he often relies on the reviews for the particular product he is interested in. If the reviews are good, chances of the consumer making the purchase are increased.

Did you know that if a particular item is accompanied by a user’s recommendation it sells 20% more often by volume than items without a recommendation? And while we rarely think of e-commerce sites as social networks, it should be of no surprise that nearly all of the decisions we make about products and services online are influenced by these subtle indicators of social validation. It’s astounding to consider that these reviews are written by complete strangers, many of whom have no stake in whether you buy whatever they’ve bought.

Need Help

In case the user wants a callback, we designed a widget where the user can enter his/her mobile number to raise a request. Or if he/she wants to contact us, we provided our contact number and email address.

In this way, we can help our users who are new to the system and they need help to apply for a home loan.

Challenges

1.Duration of the Project: We picked this feature during the covid19 crisis, our business was highly impacted and we were trying every possible measure to bring the traffic back. The duration we set for this was a challenge, but every team member gave their best and we were able to make it live within 30 days.

2. Mobile-First Approach: We all know that nowadays users prefer the use of applications on their mobile phones as compared to desktop. Magicbricks also has more number of users on mobile than on desktop. That is why our management wanted us to follow a mobile-first approach. It was not a bad idea, many companies follow it as well but the problem was that the Home loan existing feature had more users on the desktop than on mobile. So the design team wanted to design the web first.

3. Responsive vs Adaptive Design: After completing the designs for mobile the next challenge was to replicate it for the web. Because of less time for development tech team wanted us to deliver a minimum 95% responsive design which was near to impossible because of different user behavior on different platforms. So we proposed to have adaptive design but we couldn’t and we had to sacrifice at few areas.

4. Slider calculator: Home loan calculators are used by a user who wants to calculate his EMI, loan eligibility, charges, savings etc. We proposed the calculator with sliders because of better usability as compared to text field. But because of time constraint technology team picked the calculator with text field.

5. Progress Steps in Form: When we were finalising the questions, we seggregated them in four steps — basic, property, personal and professional. So management wanted to show the user on which step he is. The problem was, we reduced the questions from 30 to 9 and for just 9 questions if we show the user 4 steps it might increase the drop off rate.

1. Because in the first and second steps there were 3 questions and in the third and forth steps we have 1,2 respectively. So during stage 1 or 2 user might think that it will take lots of time to complete the 4 steps and leave the page.
2. Requirement was to show steps with colors and catchy icons. The problem was if we give too much significance to the progress steps, it will increase the cognitive load and primary focus of user will shift to the steps rather than question. And color of steps will conflict with our CTA.

6. Bank logos shape in rectangle: Generally brand logos are designed in square shapes and during the competitive analysis also we checked that our competitors are using square shape placeholders for banks. So we also designed square shape placeholder for banks logo. But when we got the logos from banks all were in rectangles. Because of this we had to make this change in the design at the last moment.

7. Approval from banks: Initially we tied up with 7 banks. Each bank had a dedicated bank landing page for which we designed a template to maintain the consistency across the feature. But when we send the designs for approval to banks. Some of the banks agreed and some came with changes in the designs, layout, format etc. Which became very problematic.

Summary

1. Total Traffic Comparison: We saw a massive increase in traffic, almost 10x more traffic as compare to JFM’20 and 17x more than AMJ’20. Reasons are stated below:
   1. Home Loan Integration on MB Home Page, SRP, and PDP
   2. Improved SEO
   3. Promotion
   4. Dedicated pages

2. Leads: We saw a massive increase in leads, almost 32% more leads as compared to JFM’20 and almost double than AMJ’20. Reasons are stated below:
1. Higher Traffic
2. More loan options type(BT and LAP)
3. Banks Incorporation

Thanks for reading!

Follow me on Linkedin @alokmittal | Appreciate my work on Behance | Checkout my shots on Dribbble