Finoa Onboarding Platform

role

Junior UX Designer

timeline

Jun - Nov 2022

team

Senior UX Designer

Junior UX Designer

deliverables

Concept

Wireframes

UX & UI Design

Prototype

description

Finoa is a leading European digital assets management platform. As a German-based regulated custodian, it has to follow high regulatory and security standards. I designed the onboarding web app for users to submit all required information and documents about themselves and their entities.

Introduction

As I mentioned above, Finoa is supervised by a German financial regulator BaFin. This means that all customers have to go through careful background checks by the Finoa AML & Compliance team.

When I joined Finoa, onboarding new clients was done over email communication. We needed an upgrade because we were dealing with confidential information.

So the task sounded simple: design a platform for users to provide all information about themselves, their entity, and future users of that account.

Problem

Onboarding new clients was a difficult process that was done manually by Finoa teams.

Goals

- Design the first version of the Onboarding Webapp
- Increase customer satisfaction and ensure a great user experience from their first interaction with Finoa

Constraints

This task required close collaboration between almost all departments since various bits of information would be used by different departments. We had to take into account everyone’s expectations and present the best solution that would suit them all.

Moreover, on a technical side, it was important to create a secure and encrypted way of storing data (which wasn’t really affecting me but still was important for developers).

Benchmark Research

I started by researching other crypto custodians. I looked at how they were onboarding clients, how many steps they had, how they requested information and it the process made sense or required further assistance.

As a fresh Finoa employee, I had to study the main WebApp: what patterns were used, how information was laid out and get familiar with the design system.

Early Sketches

Together with the product manager, we started by making sketches in Figma to visualise how the platform could look like. Nothing fancy, just a few screens.

User Flow

To better understand what users will have to deal with, I created a user flow which we discussed with the product manager. We decided to split the application process into three parts:

1. KYC (Personal Information)
Information about a user.

2. KYB (Entity Information)
Information on the entity.

3. Account Users
To add future account users and let them start the KYC process.

Within each part there were some steps:
KYC had 3 three steps and KYB had 4 steps. Account users consists of a single step. This is a rough idea of the user flow.

Iteration 1.0

The very first iteration was based on the early sketches we created. It was quite simple and colorless. Despite that we were able to dive deeper in the UX of the platform.

We spent plenty of time with PM and developers trying to figure out all possible scenarios, application statuses, if division into parts and steps made sense. Developers were included in our meetings almost from the very early stage which helped us a lot and eliminated ideas which were not feasible.

Some of the layouts from the first iteration are below.

User Testing

After creating the first iteration, we decided to carry out interviews within our company and test UX side of the platform. This was my first time ever interviewing people.

We talked to 9-10 people. I was talking to people and senior designer was taking notes. The task was to complete the onboarding from the first login until the whole application is submitted.

These interviews turned out to be crucial for us because we identified some big flaws in UX even before final development. It was much easier for us to change layouts that for developers.

Testing takeaways

1. New flow

We needed to upgrade the flow because having "Add Users" in the middle of submitting of KYC and KYB information was confusing to users. And it was easy to agree with them because KYC and KYB are far more important than adding new users for Finoa.

Personal Information
Arrow
Entity Information
Arrow
Add Users

2. Application Status

People were pointing out to us that it wasn't clear what was happening with their application after submitting information. In addition to sending out email updates, we added this little widget to the home dashboard that indicated how many steps have been completed.

Progress bar

3. Modals with additional information

We saw that having too many nested pages confuses people. This was happening on the "Documentation" page. We decided to stick with the following pattern: only steps would have their dedicated pages and any additional files should be uploaded in a modal window.

Modal window

4. System feedback & Toat messages

While testing I noticed that people had milliseconds of confusion after completing certain steps. I realised that our first iteration lacked feedback for users actions. This led to creating of toast messages.

Example of a toast message

5. More Finoa brand colors

The iteration 1.0 was quite pale in colors. Its main goal was to focus on the UX side. But users told us they'd like to have a more Finoa feel to it. We were in the middle of creating our branded illustrations at the time. So we decided to use them.

Finoa Illustration 2Finoa Illustration 1

Final Deliverable

For the second iteration, we changed navigation in some places, revised the user flow, added color, and added more descriptions and tips. These changes not only increased usability for people but also made the life of developers easier since we used simpler logic in navigation.

Key Takeaways

After 6 months on this project, I understood what could be done better. So here are my thoughts:
- Never underestimate the importance on user testing
- Even if this looks evident to you, it might not be for others
- Make sure all responsible parties are on the same page
- A simple solution is always better even if it’s too simple

It was my first big project designing interfaces and being in close collaboration with product managers and developers. I'm proud of it.

thank you meme