How to simplify complex online-application UX design

We at Rupeek Fintech design and build products that help our customers apply & transact online, hassle free

Offline form Vs Rupeek’s Online application

Background

A couple of years ago, my wife and I were searching for a good pre-school for our one-year old. Each of the 6 pre-schools that we visited, handed us a physical application form that required us to provide a tonne of details before we consulted the student coordinator. I observed a pattern, all the 6 application forms needed the same set of information but in a different order. It was a pretty tiring task to do this over and over again.

Fast forward to 2021, post lockdown, we wanted to move our son to a full-time school and had to go through the whole form-filling process again. But guess what was different this time? …Exactly!! all the schools have upgraded their offline forms to online application, a link was sent via SMS and thanks to my browser, we were able to auto-fill most of the information.

‘Viola! The Pandemic pushed schools Online. A welcome change that was long overdue.’

________________________________________________________________

Now let’s see how financial institutions still make their customers fill cumbersome forms to lend gold loans. Most information filled are mostly not know by customers and they get frustrated filling the form taking an average of 12mins to complete

But at Rupeek we have re-imagining the customer journey and have built an entirely digital approach. Customers now fill the required information to take a gold loan very easily taking an average of 4mins. We do this by having a dedicated team of business experts, product managers, user experience designers, tech teams to analyse, refine & optimise our digital form based experience to make it as easy and seamless as possible.

Summary: In this blog we will walk you through 4 simple steps on how to design better online application UX Design. We have described each step with an example showing how we at Rupeek designed the online Gold Loan application form for our customers.

Step 1: Map Your Customer’s Journey

There is no easy way of understanding the customer’s experience. But designers worldwide turn to “customer journey maps” to identify the goals ahead and purpose behind the journey.

Here is how we design our customer journey:

1. Map existing journey
2. Set goals & Conduct persona research
3. Define customer touch-points
4. Create future Journey

Here are our take-aways from the journey-map exercise

Customer experience map for a fresh loan

Do not forget to iterate (repeat and revisit) the above steps to arrive at a desirable map

Step 2: Create User Task Flow

The next challenge is to design an optimal task flow, that balances user needs and business asks. Here is a framework we use to create an optimal user task flow.

1. List all the information that the “customer” is willing to provide to apply for the loan and those required by the “business and product teams” to grant the loan.

2. Stack-rank them, by using a simple card sorting method, to know the most preferred sequence of needs of the “customers” and the “business stakeholders”

3. Organise the information in a sequence that satisfies both the customer needs and the business asks.

4. Create a simple task flow that will help optimise the user’s ability to accomplish the task with the least roadblocks.

Step 3: Wireframe, Prototype & Test with real users

Wireframes are an extremely important phase of the design process to help us visualise the end-to-end experience. “Click”able prototypes also allow us to test our designs with users.

Smart Tip: Do no show each of the task as a step; Break or combine the tasks to simplify it more for the user.

There are 7 crucial information points required to apply for a gold loan. Showing all 7 steps to a user might be overwhelming. So here is a UX hack we made that creates an illusion of only 4 steps to the user.

1. We combined the first 2 steps into a single step called ‘Basic Details’ & did not show the stepper UI for the entire first 2 steps.
2. The first 2 steps were made as bottom sheets as opposed to a full page. That way, it gives an impression that these information can be filled out quickly.

3. We introduced a stepper after the 4th step and marked the 1st step as “completed” which gives a feeling of accomplishment to the user and motivates them to fill out the rest

4. We dressed one of the information as a popup instead of a step

When we tested this prototype, 90% of the users felt that there were only 4 steps.

Step 4: Design the Visuals

Visual design aims to improve the product’s aesthetic appeal and usability. Good visual design improves the brand trust too. And this is how we do it-

1. We place UI elements strategically that draw users’ attention to the most important information on the page and make it easy for them to scan through it.
2. We abide by “form follows function”: each item is designed in accordance to its function (no need to re-invent the wheel…like turning a hamburger menu into a …sandwich menu, for instance).
3. We stay away from clutter at all costs by keeping minimal visual elements on a page.
4. At the end, we apply our design system to get the design consistency and aesthetic appeal.

What next:

We have more info coming in the next blog with:
1. How UX Research & UX Metrics helped to yield the desired results.

2. How Business, Product, UX and tech teams collaborate continuously to improve the digital form fill experience.

3. How each version of the design performed better than the previous one and how do we track them

Stay tuned.. Until then..

Happy designing!