‍Cekaja.com is a platform where users can apply for financial and investment products like credit cards, collateral loans (KTA), insurance, SME loans and more. Flolab had partnered up with the team at Cekaja to revamp the website with a more usable interface and a seamless experience.

When putting it simply, Cekaja is where users go to compare different financial products and apply for them. But, is it really as easy as it sounds? Below, we’ll be digging deep into how we redesigned the application form (the most used interface on the platform) to make it quick and seamless for users to complete a loan or credit card application.

Why was the redesign required?

Most of us have applied or signed up for financial products like credit cards, loans, or insurance — whether that’s online or offline. And if we’ve done that, we’re all too familiar with the super lengthy and detailed application forms that require us to enter all our personal information. With those many details to fill, it’s very likely for a user to drop out midway while applying for a financial product online simply because of the amount of time and effort taken to complete these applications. And so was the case for Cekaja.

In order to solve this issue, Cekaja has an “Application Wizard”, designed for a more streamlined data input experience for the user. Instead of a typical long input form, their application forms are designed as smaller snippets called “wizards” which make it easier to fill in the information when it’s segregated into bite-sized chunks.

Unfortunately, this wizard was only partially solving the problem of a long application process. There were still some issues that needed to be addressed through the redesign:

• High drop-off rates or incomplete applications
• Multiple input errors
• Time taken to complete and submit the application.
• Redundant personal information on multiple applications
• Lack of consistency across different form inputs
• Lack of transparency on the application status

Here’s what makes for a good form:

• Quick to be filled
• Easy to understand
• User is able to anticipate each step (no surprise in the middle of the form)

We wanted to enhance the whole information input experience since it’s quite a time consuming exercise for the user. It’s quite clear that forms have a significant importance for product growth, optimal conversion, and better engagement. We did some study around what makes a good UX for form inputs; from how to handle lengthy forms to how to contextually customize each ‘date’ input field.

Let’s dive in to see how we fixed some issues on Cekaja’s forms:

1. Being more transparent with each step: Redesigning the Progress bar

Think about when you’re on a train journey, there are a few pieces of information which you would like to know as you’re traveling, such as — what time you would arrive at the destination, how much time would it take to arrive at the destination, and the distance you have covered so far along the journey. It would be frustrating to travel without knowing these few details about time and distance along the journey.

The same principle applies when you’re filling in a form — when a user can’t see how many questions are left to be completed in the form, and he only sees a progress bar without any details around it, it gets frustrating for the user because they don’t know how lengthy the form is or how long it would take for them to complete it.

As we see that the root cause of frustration lies in the feeling of not knowing something clearly, the solution is as simple as: letting the user know where they are in the process. To communicate clearly about how many steps there are in the process, we added a label “Step 1 of 4”. Just by adding this simple element, the user already knows:

• Which step he is currently at
• How much progress he’s made so far , and
• How many steps are still left for him to fill in.

Another advantage to showing progress bars in a form is the Zeigarnik Effect principle which states that, people remember incomplete or interrupted tasks better than completed tasks. Using progress bars for complex tasks to visually indicate when a task is incomplete, increases the likelihood of the task being completed.

2. Redesigning how the user navigates between each question

Cekaja’s old wizard broke the form down by showing just 1 question per step. This made it hard for the user if he wanted to go back and forth between questions in case he wanted to check on a previous input. In order to fix this pain point, we had to remove the hassle of clicking through each question one by one.

According to Jakob’s Law, users prefer your site to work the same way as all the other sites they already know. We didn’t have to reinvent the wheel here, the goal was to find the best possible behaviour that can be implemented for our wizard’s navigation. A lot of users are already quite familiar with Typeform, where the focus is on one question at a time (similar to the wizard), however, there’s an automatic scroll behavior, which makes it easy to proceed to the next question after the user has answered one. It’s also easy to just do a quick scroll and jump to any previously entered answer to make edits — reducing the effort drastically compared to clicking through ‘back’ multiple times to get to a previously answered question.

Additionally, CTAs should be large enough for users to both discern what they are and to accurately select them. In order to enhance the navigation further, we added a prominent primary CTA and a strikingly different secondary CTA, which gave the user an option to go back a step (if required) with ease.

3. Divide and Conquer: Organize questions into groups

When questions come up in an unsynchronised manner, randomly jumping from questions about personal information to employment details and back again to personal details, it increases the cognitive load on the user, making the form feel too overwhelming to be filled in. Our goal is to exclude thoughts like “Too many questions! I’ll leave this for tomorrow…”

According to Hick’s law, the more choices a user has, the more time it takes for him to complete a task. Thus, the more questions we present on the screen, the more time it will take for the user to complete it. Users think in batches, by creating logical groups the user will make sense of the form much faster. They would also have a better understanding and expectations of questions in each step as they would all be grouped accordingly. This approach would give the user a feeling of gradual answering.

4. Contextually customizing date pickers

Using the same date pickers for every kind of date input isn’t always the right solution. Date pickers would need to contextually change depending on the data being entered. For example, when entering the date of birth, a dropdown date picker is very cumbersome to use. The dropdown is usable when the user needs to enter a recent date, however, it becomes quite a hassle when entering a historical date. The user would have to manually click through each month, year, and date separately. Not only does it require more effort, but it also slows down the form filling process.

It is much easier and straightforward instead to use a regular text input field to enter the birth Date, Month and Year separately. To make it even more user friendly and take the interaction up a notch, after the user fills in two digits in the Date field, the cursor automatically jumps into the Month field and then into the Year field.

Taking this one step further would be to pre-fill the Date of Birth in all future application forms or DOB input fields, so that the user doesn’t have to repeatedly enter the same data again and again.

5. Build Anticipation: Adding a “Before We Start” screen

While filling in any application form on Cekaja, a user needs to upload an image of their Personal ID and Tax ID. Since the user isn’t expecting this and may not be sitting with his IDs ready on him, he may have to take some time to look for the IDs first and then get back to the form filling process. This could be one of the potential drop-off points in the application process.

In order to resolve this, we added a “Before We Start” pop up, where we ask the user to prepare the documents needed from them (usually Personal ID and Tax ID) before jumping into the form where they’re asked to upload the images. This way, we’re setting the right expectations for the user by letting him know that the next step requires them to put in a little more effort and little more time, hopefully making the experience more seamless.

6. Re-engage: Add an option for the user to continue later

Previously, when a user needs some time to find a document to upload or would like to come back to the rest of the form at a later time, there was no option for the user to save their progress. So whether they like it or not, they have to complete the form in one sitting if they they want to avoid starting over from scratch later.

In order to fix that, we added a “Continue Later” pop up that shows up if we detect that the user is leaving the application form midway. To re-engage the user with their application process, once the user chooses ‘Continue Later’, Cekaja sends a link via SMS to access the form later at any time to pick up where they left off.

The simpler, the better!

There are a lot of products which whether we like it or not, require us to fill in lengthy forms, making it a very cumbersome and mundane process. Nobody likes filling out forms, however, if we do it right, we could increase completion rates and help businesses reach their goals. Using some basic design principles we can make these forms engaging, simpler, and easy to use.