Creating The New Onboarding Form: My Internship Experience At Redcarpet

17th Dec 19

As an up and coming Fintech company, we at Redcarpet are very mindful of how we interact with our users. Every step of the customer’s journey is carefully researched to ensure the best user experience.

It is due to this reason that I believe our work on the Redcarpet onboarding process was the best part of my internship. My tasks included ground level researching, interviewing, and creating the design iterations. Moreover, I got the chance to conduct A/B testing on our onboarding form variations. (on paper prototypes, no less!)

In this blog, I will try to detail, the ins and outs of creating the perfect Redcarpet onboarding form that minimized dropouts and maximised conversions.

Understanding The User Needs

A study by Andrew Chen brought forth this very important issue to our attention: Most companies lose 75% of their new users within the first week. This meant that we had to revamp our onboarding form to ensure that our users were not facing any problems that could cause 'customer fatigue'. We had to take a lot of factors into account:

1. Were we asking too many questions?

2. Were our users hesitating from revealing some information? If so, what could we do to ensure their trust?

3. How could we prevent our users from getting bored while filling the form?

These were some pressing questions. The first step to answering them was understanding our customer base and interviewing them to understand their needs. Hence, we divided our customer base into 3 simple categories:

Students: Users studying in College/University. They usually opt for smaller loans to fulfil their requirements. In fact, a recent study showed that while younger customers (20-29 age) form about 19% of the population that had accessed retail lending products, their share to total loan balances at 8%.

Salaried People: Users working in an organisation for a fixed amount of salary and opt for loans fairly regularly.

Uncategorized: Self-employed users that own small to medium size businesses. This could also be users that do not get salary slips or receive salary directly in bank accounts.

Now that we had a clear definition of who was filling out our onboarding form, we had to understand what was preventing them from converting into customers. This entailed going back to our basics and analysing our old form.

Research and Analysis For the New Form

For the first round of our research process, we interviewed a lot of our customers. Onboarding forms require the user to fill a lot of data. However, to understand the user’s pain point, we had to know what they were actually typing in the fields.

Evidently, we couldn’t use normal UI prototypes for this process. Hence, we decided to resort to a paper prototype. And here, we encountered another one of our major research challenges.

The user could be on one particular screen that has two options. Now, each of these two options will lead to a different screen. Alternatively put, both of these options would lead to 2 different ‘flow’. We created sheets that represented each and every ‘flow’ of the onboarding process. However, finding that particular sheet from a bundle of sheets could be time-consuming. This, in turn, could make the user lose interest. (According to Doherty Threshold, productivity soars when a computer and its users interact at a pace of <400ms)

Thankfully, we found a solution after rounds of brainstorming. We divided the work amongst ourselves. One of the researchers could be the moderator while the other one could change the screens. Moreover, the screens were divided into bundles of flow so the process was easier for the person changing the screen.

As it turns out, the countless hours put into researching and brainstorming paid off. We arrived on some insightful conclusion that laid the basis for our new onboarding form.

Our Insights

After the thorough analysis of our past onboarding form, we came up with 6 important UI factors. We needed to keep them in mind while creating the new onboarding form for seamless and easy user experience.

1. Ease Of Use

We needed to ensure that our users are adept at the functions required for filling the form. For instance, can they pin their address if a map is shown on the screen?

2. Correct User Input

It was important to capture all the input entered in the text fields or images by the users to see if they are filling the right response in the right field. After all, wrong answers could lead to potential loan rejection.

3. User Comprehension

Next factor was to make sure that the user understands the information on the screen. The user should be able to predict the result of pressing any button on the screen. When it came to user comprehension, we were especially inspired by the ecommerce website, Etsy. When a user is setting up a shop on their website, a progress meter shows how far they are in the onboarding process. This aids user comprehension by manifolds:

<img src="/images/blogs/image3-onb.png" width="15%" height="10%" style = "border:none">

4. Respecting The User’s Time

Our users were often confused as to why their application for a loan was rejected. We needed to understand how our users felt about rejection.

Most importantly, we wanted to respect the time and effort of anyone who filled the onboarding form. So, if we knew their application was going to be rejected on the basis of already gathered information, we informed them of the same beforehand. This way, they did not have to waste their time filling the rest of the form.

5. Answering User Questions

A lot of times our team members received calls from our users about the importance or need of filling any particular field. Consequently, we decided to put all the relevant information on the form so the users did not need to clarify by calling us. This saved both the company and the user’s time. We were taking cues from companies like Slack that answered the questions by their users very efficiently.

<img src="/images/blogs/image1-onb.png" width="15%" height="10%" style = "border:none">

The New Onboarding Form: The Changes We Made

After we had drawn extensive insights from our research process, we started creating our new onboarding form. Some of the major changes implemented by us were:

1. The Welcome Screen

Our previous welcome screen was all about simplicity and ease of use. We thought of it as an easy introduction that would seamlessly lead to the actual onboarding form.

<img src="/images/blogs/image4-onb.jpg" width="15%" height="10%" style = "border:none">

However, we quickly realised that this wasn’t the way to go. We needed to build customer trust from the get-go and notify them of all the documents they would need to fill the form. We highlighted our company colour style and divided the 3 welcome slide-screens to discuss 3 important factors:

1. The first screen would detail how Redcarpet could help the users.

2. The second one would inform them all of the documents they needed to sign up.

3. The third one discussed our features and way of operations.

This allowed us to decrease the number of screens a user has to go through when s/he is signing up on our app as we didn’t have to show the same information again. Most importantly, we wrote the text in 3 different languages- English, Hindi and Bengali. This signified our commitment to providing valuable quantifiable help to our Indian customer base.

<img src="/images/blogs/image9-onb.png" width="15%" height="10%" style = "border:none">

2. Making The Form Less Time Consuming

In our previous form, the users had to upload every document along with the document iID number. Apart from this, they had to review their Redcarpet agreement and e-sign using the Aadhaar card. This was a time-consuming process as the users redirect to the NSDL website to generate the Aadhar e-sign. In case the user had entered invalid data, they had no way of knowing about it. In fact, they had to wait for 3-4 days for the ‘error or invalid document’ notification. Moreover, this also increased the workload on our KYC agents as they had to manually verify those documents.

To solve these problems, we came up with a new system that saved the user’s time by automatically approving or rejecting any document or information. Some of the changes we made were:

1. In the Segment Details section, we included a search screen so users could only select companies/colleges that were listed on Redcarpet.

2. The users’ addresses were now verified and the application was rejected in case they inputted an invalid pin code or any non-serviceable location.

3. The system could not automatically reject or approve an application on the basis of age and other user data.

4. Now the users did not need to redirect to any website for verifying government IDs. We could now fetch the ID data form, Aadhar information or voter APIs directly. Consequently, we could cross-check that data with the information provided by the user. In case the user data did not match with the government information, the system automatically rejected the information and informed the user of the same.

5. We were now equipped with Pan data API so we could cross-check that information with the data provided by the user as well. In case the user was a student, they could fill the Form 60.

6. The previously verified documents could them be uploaded without hassle.

3. Hassle-Free Segmentation

We revamped our customer segmentation process to make it more detailed. Previously, we used to just classify our customers into students/salaried.

<img src="/images/blogs/image10-onb.png" width="15%" height="10%" style = "border:none">

However, with the new design, we decided to take it up a notch. We decided to split our screens specifically for students and working people. The students could fill in their information thereafter while the employed people could select their profession types. Now, most of our customers didn’t have to type in their profession, saving time and hence, increasing the UX experience.

<img src="/images/blogs/image5-onb.png" width="15%" height="10%" style = "border:none"> <img src="/images/blogs/image8-onb.png" width="15%" height="10%" style = "border:none">

4. The Personal Details Screen

We decided to create a more defined details form. Originally, we only included the name, gender and email id. However, the new form asked for their referral code and purpose for downloading our app. This was to keep us informed on customer motivation and would help us align our services to their motivations.

<img src="/images/blogs/image7-onb.png" width="15%" height="10%" style = "border:none"> <img src="/images/blogs/image2-onb.png" width="15%" height="10%" style = "border:none">

5. Showing The Form Progress

We included a progress notification that pops up when the customer has completed any part of the form. This informed them of how far they have completed the form and how much is yet to be filled.

<img src="/images/blogs/image6-onb.png" width="15%" height="10%" style = "border:none">

Conclusion

Our seemingly endless rounds of research and form iterations finally bore fruit. Our new form provided a better customer experience and seamless onboarding. In the coming months, we decided to revamp the onboarding form once again incorporating new and exciting changes. Needless to say, we will be discussing that in our blog very soon!

This blog is written on the basis of an interview with a former Redcarpet intern, Roopal Kumar.

About The Author: This post has been written by Balram Pandey and Etee Dubey.