Case Study

Revamping the process of onboarding customers to a financial market network.

Senior UX Designer @ PaySupp
Project Overview
PaySupp was in the middle of a big business strategy shift, from a single to multi financial products provider. During this shift, the onboarding process of businesses was falling short and needed a big fix.
My Contribution
I was the senior designer responsible for the redesign of the whole platform, part of that was working on user research and stakeholders to pinpoint the problems with the current onboarding process and then offer a new onboarding process that meets stakeholders' requirements and solves users' problems.

Duration: 6 months
Context

Expanding from a single financial product to a multi-financial products provider.

PaySupp was offering a supply chain finance service to SMEs in Egypt, and as time passed, the vision of the startup shifted towards expanding to a multi-financial products provider, which then expanded to a financial market network, serving different users with different needs through different portals.

The onboarding process in PaySupp was very limited when it came to onboarding different customers on different financial products, and there was a clear need to redesign a new onboarding process. A new process that enables easy onboarding for different users with easy access to multiple financial products, while at the same time paves the way to easy expansion in the future to add more portals and/or financial products.

The Challenge

Onboarding process that didn’t put the user in mind.

It was clear to me that the current design of the onboarding process didn’t put the user in mind; no user testing was performed, no interviews with users were conducted and the whole process was designed to serve only the current business need; which is to collect specific details and documents to offer the financial solution.

Here is how the old onboarding process was:

The main issues we were facing with this onboarding process are:

  • Lack of flexibility for PaySupp to add new products.
  • Onboarded customers couldn’t apply to new products.
  • Couldn’t allow for different users to onboard different portals.
  • Long process, causing multiple dropouts during registration.
My Role

Redesigning the onboarding process to meet our goals.

I was leading the redesign of the onboarding process, which was a part of a bigger redesign of the whole platform to meet our new business mission and vision (turning into a financial market network).

For this case study, I am only talking about the onboarding process, part of the platform transformation.

User Research

Understanding the user we are onboarding.

Even though the issues with the onboarding process were clear, I still was expecting more information, feedback and issues to be raised once I talk to users and conduct some testing with them on the current onboarding process.

In my research efforts, I looked at other competitors in the market and other fintech companies around the world offering the same or similar services. I analysed their onboarding flow, to get some ideas and insights, and looked into other case studies published online from other designers.

I also moderated multiple online user testing sessions, where we would have customers onboard the system while we monitor and see the issues they are facing. The sessions were recorded, along with notes and feedback logging to use further in our research.

Part of our user research for the redesigning of the whole financial process were contextual interviews. I went back to our findings from these interviews and notes, to take any relevant notes into consideration when redesigning the onboarding process.

From the user research phase, I came to new findings that were not put into consideration when designing the first onboarding process.

Insight #1: Our end user’s attention span is not long.

Due to the nature of their roles. Our end users were easily distracted by unexpected calls, meetings, emails and other work stuff that kept their attention span short.

Insight #2: We don’t have one user for the system.

Our end users didn’t have one specific user designated for the system. Instead there were multiple people in the company (at least 2) responsible for managing the system. Sometimes with different roles in the company.

Insight #3: Single users with multiple companies.

We noticed that some users will operate or handle multiple companies on the system due to financial reasons.

The Solution

Ideating, sketching & testing a new version of customer onboarding.

Now, let me show you what we got after our ux process and I will explain the story behind our decisions. I will try to compare between the old version and the new version of some screens.

1) Changing the hierarchy of account creation

Instead of onboarding users to solutions directly. We decided to separate the hierarchy to three levels: 'Customers, Companies, Solutions’. Solutions are assigned to companies, which are created and managed by customers. This separation allowed to:

  • Achieve complete flexibility over adding unlimited solutions in the future.
  • Give users the ability to add and manage multiple companies at the same time, a case we found from our user research.

Before

Users should enter all the details required in the onboarding process including (personal, company, solution information and upload verification documents) to be able to start an account.

The Problem

Many users didn’t complete the onboarding process for multiple reasons “as discovered from user research”

  • Limited attention span, getting distracted by other tasks.
  • Issues with internet connection, sometimes a delay or technical issue with the internet or our website caused the whole process to stop.
  • Lack of understanding, some information listed in the registration form were not clear and required users to contact our sales team for explanation.
  • Lack of verification documents. Some customers didn’t have all the needed documents to apply for a specific solution.

The Solution

Create your account in one click. After changing the hierarchy, we decided to start an account for our users only based on their personal information.

New user flow looks like this:

Before

This is the old design for the registration screen. The screen below was the first step in the old onboarding process (personal information), after completing all the information required in this page, the user will click Next to go to the next step and complete other information.

After

We redesigned the registration screen making it more simple and direct. On this step, the user can choose to register using social media accounts in one click, or use their email address and enter personal information in the next step.

In the new design, we took multiple points in consideration

  • As per Hick’s Law more options leads to harder decisions. That’s why we limited it to two options, either social media or email. Both accessible in one click.
  • To reduce Cognitive load we decided to move the registration form (for entering information manually into a separate step). Even the logo, main menu and footer were removed to allow users to focus only on the registration process.
  • Allowing social media login, gave users the ability to open an account in one click. Even if they get distracted, they can come back to their account later and continue adding their company and apply for solutions.

Incase of registering using an email address, the required information is loaded in the next step.

After entering required details, a new account is created for the user and registration is complete (after verifying email address), or directly after signing up using social media.

2) How contextual interviews changed our email verification process.

We used to send an email verification URL to the registered email address. The user will then go to their inbox, open the message, click on the verification link, where they land on our website and verify their email address.

Looks easy, except when we did our user testing we found a couple issues here.

Issue #1: Some users didn’t access email from the same device.

It goes like this. The end-user is signing up through their laptop, a verification link is sent to their email address where it pings on their phone. Users will then open the message on their phone, click on the link, and open the website on their mobile device. Since this is a new device, the user is required to login using their password to verify, which even if they did will not refresh the verification page on the laptop leaving the user stuck. This issue alone caused multiple phone calls and registration abandonment with multiple users.

Issue #2: Delays in email delivery caused abandonment.

Sometimes the verification email will not be promptly delivered to the user for any technical reason. There was no way for users to continue, except for exiting or waiting. Most users would leave the page open, and get distracted by other tasks and forget about the email. Some tried to sign up again, when they were stopped by an error that the email address is already registered in the database.

Issue #3: If the email address was wrong, there is no way to know, there is no way to fix it & you have to restart the whole registration process.

Since email verification was the last step in our old onboarding process. Users who entered a wrong email address, will not receive the verification link. Plus, there was nothing on the page that mentioned what email message was the link sent to, the design assumed that the user already knows. Even if the user realised that they entered a wrong email address, there was no way to fix it. Resulting in the user redoing the whole onboarding process, including typing all information and uploading all needed documents again. Which caused a hassle to the user and also to our resource consumption.

The Solution

After testing multiple ideas for email verification, this was the best option.

After typing all information, a verification email is sent to the user with a verification code. The user here can access the mail from their mobile device and just type the verification code, or pass it through WhatsApp. Verification link was still available in the message for fast verification.

The user’s email address is shown and they can change their email address incase of typos, without having to go through the whole registration process again.

Incase of registering using an email address, the required information is loaded in the next step.

If for any reason, the user is unable to access their email address, or didn’t have time, or there was a delay in the email delivery, they can still choose to do it later without having to redo the registration process.

The email verification step happens directly while opening the account, which prevents any complications in the future after uploading documents and using our resources.

Now that our user has started an account, they still need to do a lot. They need to add their company information, choose their needed solution, go through the approval process and upload needed documents.

3) Progressive disclosure through welcome wizard.

“ To maintain an easy onboarding process despite the amount of data required, we took into consideration a very important UX principle called Progressive Disclosure, which means in a nut-shell to defer advanced or rarely used features to later steps.

We wanted to guide our users to take it one step at a time, in an easy digestible way that makes sense to them.

Before

Our old registration was long, and after adding multiple financial products to our platform and adding some additional requirements from financial regulators, we still needed alot of information and/or documents from our users, it was something we cannot avoid to offer our customers the solutions they need.

The Problem

But we were still facing the problem of our users' short attention span as discussed in the research step. We needed to collect all the information required to offer the solution, yet don't impose with users' busy schedule and put in consideration the short attention span.

The Solution

We fixed that here, with a multi-step welcome wizard that onboards the users and gives them the ability to stop at any moment and continue later without losing progress.

The wizard guides the user through a very direct step with a clear CTA button to what to do. User can take the action or close the screen and revisit your account later whenever they  are ready.

The wizard consists of three main steps required to complete the registration to a financial solution. Verifying the email address, adding a company and applying for a financial solution.

Once every step is completed, the user gets a confirmation that the required task has been completed.

4) How contextual design approach changed our onboarding design.

During our first phase of redesigning the onboarding process, we designed a document upload step that allowed customers to upload the required verification documents needed for the selected financial solution they are applying for.

The Problem

When we started testing our prototypes with users, issues showed up that we didn’t expect.

  • Users didn’t always know what the needed verification documents were.
  • Some verification documents were not easily accessible at the moment.
  • Size limitations and formats were confusing.

We also had an assumption that users will know the verification documents needed for each solution they are applying for. That assumption was made due to the fact that we have the documents listed on our website front-page, and that users are usually in talks with our business developers before onboarding the system.

But in reality, users didn’t remember all the needed documents, and most users didn’t take the time to prepare all needed documents before starting the process on the system, and in some cases we had different users than the ones who were making the decisions actually doing the onboarding process on the system.

The Solution

We added some modifications to the document verification process.

  • First fix was off the system, where we had an automated email sent to users containing all needed verification documents before applying for the solution. Emails are easily forwarded to other members who might be responsible for onboarding the system and/or preparing the documents.
  • We allowed an auto-save feature in the apply for solution wizard. Which allowed users to continue the process and upload documents steps later without losing any progress when it comes to their solution application.
  • We allowed the option to send documents via email/WhatsApp, which allowed users to complete their application to start the review process and send the documents later via easier means for them, or any other person responsible for this in the organisation.
  • Since our users didn’t understand size limits, giving them the option to forward big documents via email/WhatsApp when size limit was reached allowed them a second option when they are faced with a dead-end.

5) Finally, we allowed users visibility of system status for their applications.

Before, users were blind. They would complete the onboarding process and just wait for the application to be reviewed with a process that takes days and maybe weeks.

The Problem

That added to the customer service cost on our company, where we had multiple calls from our customers asking about the status and the progress of their application.

The lack of visibilty also made us lose a very good opportunity to build trust through transparency with our customers before they start doing transactions with us. A competitive advantage we could easily build over normal banking.

The Solution

To solve this we sketched and tested some ideas and came up to this solution, where we should the user a real-time updates over the status of their application review.

Users were able to review the status of their applications and review the progress of their approval process step by step with time estimations for each step of the approval process.

The Impact

Easy! Fast! Efficient!

As a result of our work on the redesigning of the onboarding process, we were able to onboard all different targeted customers without problems.

We reduced the amount of development time and effort needed to add new financial products in the future.

The new onboarding process allowed us to have a seamless flow to add more solution and for over a year after implementing the new onboarding process we were able to add six financial products with different personas without having to change the onboarding process.

The onboarding process minimised the amount of time needed to onboard the system, increasing our conversion rate and cutting registration dropouts to “0”.

The takeaway

What I learned from working on this challenge.

It was not all sunshine and roses. Some mistakes were made and some challenges still exist with the new onboarding process, yet here are some the takeaways from this project.

  • Testing early on is key. I did the mistake of testing after finalizing my prototypes because of the time limit. But that ended up costing me some added time with surprising issues that I didn't see before. I won't be testing every iteration with all our targeted users, but I would test key iterations at least with two users as soon as I can get something working.
  • Social media login was not implemented in the final version. Communications with dev team before presenting the final prototypes would have helped to understand the obstacles and put them in consideration during the design phase. I learned to have early meetings with developers to discuss technical limits before working on the design and another meeting to present the prototypes and features once I have something to show.
  • Putting resource limit in mind from the beginnging. Understanding the limits and the available resources allowed me to get the best results and choose what tools to use within our resource limit.