Onboarding • Duration - 2 months • Feb 2022

Improving the dropoff rate in onboarding

Section progress
Section screen
One question per screen with progress bar
List select
Mid-flow section progress indicator
Application review + edit screen

Awarded

Pulse Pick of the Week

From 11:FS Pulse

“Our Pulse pick of the week goes to Countingup's onboarding journey. ❤️ The banking and accounting tool does a great job of nailing the key fundamentals of a good onboarding experience. ✅ With a one-question-per-screen approach, users are always clear on what information they need to provide thanks to the concise help text. The KYC and ID&V steps are quick to progress through with clear, dynamic guidance throughout. Finally, users can easily review their details before submitting before quickly getting access to the engaging dashboard.”

🙌 Pulse score = 4.4/5 ⭐️

The challenge

Our team was tasked with improving our account opening conversion. Countingup found that an average of 42% of users who started their application were able to complete it. An external review concluded that this number was in line with a number of other similar financial products, but the team believed they could make an improvement on that number.

Meet the team

On this project, I was working on discovery alongside the team Product Manager and the Lead Developer. As this project moved into delivery, I also worked alongside the three other developers on this cross-functional team.

Discovery

Reviewing the data

Firstly, we reviewed our analytics per screen, to discover where the biggest drop offs were happening. We found that biggest dropoffs happened around the ID photo and selfie photo screens, we wanted to find out from users why this could be, but hypothesised that it could be because they don’t have their ID to hand, or they’re out and about and not in a convenient place to take a photo, and then forget to continue.

Then, we laid out our current onboarding flow and map it into a user flow chart. Then we conducted a review of the flow to highlight any obvious problem areas. We noted some areas sent users on a loop which increased the number of taps.

User research

Our customer success team regularly tries to contact users who abandon their application process to try to find out why this is the case. We held a meeting with this team to understand what users were telling them about the process; we heard that users often didn’t have their card to hand and then forgot about the process. We were also told that some users started the process but didn’t know how long it would take and found they didn’t have time. Many users also experienced their applications getting rejected because of blurry or incorrect photos, by the time they had received this news they had already gone to another competitor and opened up their account. Some users also dropped off when they were asked to fill out enhanced due diligence questions, our current process required our users to this by email.

User interviews

We held some interviews with users (both current and non-users) to go through the onboarding process and highlight any problem areas. We were told that the design didn’t seem trustworthy. We also found that users were overwhelmed or struggled to quickly identify what was being asked of them because some screens contained many fields.

Competitor benchmarking

Using our access to 11:FS, we reviewed many of our competitors onboarding processes and identified areas which we felt they succeeded. We found the most clear flows to be ones that asked the user one question per screen, so there was no doubt what was being asked of the user. Many of the competitors also had education screens before flow, instructing the user of exactly what they would need to complete the process. Because this is a bank application users will often need their ID and a proof of address, which sometimes catches a user out and they could potentially never return. Preparing the user upfront for what is needed will set their expectations. We also found other competitors scanned photos that users had taken to identify any potential errors such as being out of frame or blurry photos which would help to reduce the number of denied applications for this reason.

Results from the research

After the research had concluded, we had made the following observation to keep in mind as we progress through the project.

It’s important to prepare the user and set their expectations.
Users should know roughly how long it will take, and where they are in the process.
They should be warned that they’ll need their ID and proof of address.
We should help users where we can with their photos, providing guidance.

Ideation session

We held a session with our cross functional team where we ran through the findings from the discovery. As group we proceeded to conduct a crazy 8s session to get any ideas that we have. We then discussed and collated our ideas. Following this we had a stickynote session, where we ran through the existing user flow highlighting areas where we could make improvements and changes.

The team then conducted a value/effort exercise to decide what we would work on. Out of that exercise it was decided that we would make improvements in the following areas.

Layout improvements
UX improvements to move to a one question approach
Addition of a progress bar, pre-flow guidance and interstitial guidance to keep users informed throughout the flow
Scanning of photos to warn of any problems
Bring enhanced due diligence questions in-app

User flow

First we planned out the new order for the application flow by reorganising the user flow and writing out the questions we would ask. We then decided where to split this up into sections and where the appropriate place for guidance was.

Wireframes

I proposed changing the layout of onboarding to request only one details at a time, for example a screen for name, a screen for email address etc. so the user can focus on what’s required of them at that moment, without having to be concerned about what they’ve already entered or what’s coming up, simplifying the process. In order to communicate this approach to the wider team, I created these wireframes.

Delivery

Design development

After getting agreement on moving to a single question approach, I progressed the designs for the onboarding flow. This includes a guidance screen with an engaging illustration, preparing the user for what is coming up and what they’ll need, an interstitial progress screen, informing the user of where they are in the process and what’s coming up and framing on the camera screen to improve the quality of the photos that users submit.

Stakeholder feedback

Once the designs were progressed, I presented this to my cross-functional team and key stakeholders to get their feedback. Owing to the simple approach, the feedback was generally positive, with the team suggesting minor updates to button layout and guidance wording.

User testing

Following testing sessions with 10 users, we found that users resonated well with the focussed single question approach, but users quickly skipped over the guidance. In order to combat this we shortened the guidance as much as possible so that it was much more easily read at speed, increasing the chances of our users reading it. Additionally we decided to add engaging animations which would provide a moment of delight, and we found this causes the user to pause on the screen for just a moment.

Design development

Taking into account feedback from the user research sessions, and from reviews with the cross-functional team and reviews held with key stakeholders, and my own reviews of the first designs, updates were made to the designs. The flow as over 70 screens, so I’ve collected a selection of the most interesting updates here.

Pre-flow guidance

The pre-flow guidance screen was updated to include a progress tracker, so that the user knows what the application process will look like. I also made it clearer that an ID will be required, and what types are accepted.

List select

The list select was updated to radio button-type list item, to allow the user the opportunity to review what they’ve entered before proceeding. The previous design was intended to reduce the number of taps, but as a result there was no way for the user to know they had selected the correct option. Plus, if they were to use the back button, the user would need to reselect their options to proceed.

End of section progress indicator

The screen was updated to better show where the user is at in the journey, using a progress indicator that more clearly shows where the user is current, what has been completed and what is yet to be completed. The previous design didn’t communicate this well, and feedback told us that this design made them look like navigation buttons

Guidance animations

Throughout the onboarding, animations were added to provide moments of delight and to visually signal to the user what is expected. We found that users were skipping over guidance screens with the informational icon as they assumed it wasn’t importance. We found that adding illustrations visually showed the user what was expected, and caused them to pause on the screen, increasing the chances that they would read the guidance beneath.