CASE STUDY

Overview

Sylq Automated Onboarding

The registration process that merchants need to complete in order to be able to accept payments from customers and be settled directly in their bank account

Navigate faster!

Let's start!

The Automated Onboarding process is a critical feature in fintech companies, especially for those that are PSP (Payment Service Providers) like Sylq and need to become the middle man in a payment.

It's hard to get this through, not because of users, design, or business needs but because of all the regulations Fintech companies need to comply with in order to avoid Anti Money Laundering and fraud.

WHY WAS AUTOMATED ONBOARDING NEEDED?🤔

At the time we started this project the process to onboard merchants was crazy. Imagine our Compliance Colleague (we'll call her Maria for privacy reasons) had to manually like: get all the merchant details, filter it into 3 separate programs to get the right risk scores, fill in documents alone, and also send and receive documents for their signature.

PRETTY CRAZY, RIGHT? 😱

Right, so imagine our main objective was to automate everything, not overload the merchant with this (of course) and also make it an enjoyable and beautiful experience.

So I started the iteration process along with the Product Manager, let's call him Ben.

During our 1-1 meetings we set up the main user-flows, number of screens, and then we needed constant answers from Maria to fill us in with details from the "programs" she was using which were actually partners that were giving us APIs to check the risk scores of each company.

WE UNDERSTOOD MOST OF THE NEEDS AND LIMITATIONS 🤩

We created the user flows that would include: UI screens, Backend screens, and the Conditions for the backend.

We validated them with the Stakeholders which was the CEO and after that, I could start wire-framing the MVP.

User flow

User flow (View on Computer)

We're designing this!

Actually, not yet. Let's first start with competitor benchmarking.

This is a serious project, I can't draw wire-frames based on assumptions and also since my background was not in Fintech until now I had to understand the industry a bit more, with some lovely research 😍

OK THIS IS HARDER THAN I THOUGHT 🙃

So what, let's dissect everything and see what's working in the industry and where we could add improvements.

AHAAAAAAA! 💡

First AHA Moment. Onboarding merchants for finance is annoying, consuming, and interminable sometimes. I had to make it simple, effortless, and even though all the legal requirements were holding me still, I found the key.

I RESEARCHED A LOT ON DOING A FRICTIONLESS ONBOARDING

I even took a course at Uxcel on this topic and it was a goldmine. The key solution is to let merchants know wherever they are in the process and how many steps they have left as it keeps them more engaged and get to the end of this annoying yet necessary process.

I got what I needed to do in the first wire-frames focused on showing the merchant exactly where he/she is in the process, completing checkpoints, and feeling less annoyed by the whole process, while being fully aware of where he is in this journey:

First wireframe sketch showcasing milestones and progress screens

We're halfway!

Next, I found that would be better to show the progress screen only AFTER completing the first check as the merchants will feel good for a small win, knowing that they've already completed the first step and 2 more to go!

LET'S VALIDATE IT WITH THE DEVELOPERS 🚀

In order to check if the flow is correct before jumping into high-fidelity screens we had a meeting with the CTO who noted down a technical constraint:

We must request the email and phone number verification in the first screens because that was the only possibility the merchants could resume where they left off in the process by getting recognized using their phone number.

WHAT ABOUT COMPLIANCE? 🧑‍⚖️

The contract signature was a requirement that needed to be added in there too, making the merchant agree with the Terms & Conditions and everything from the beginning simply by ticking a checkbox.

WHAT ELSE?

Checking again the drawings, I realized holy.. why are those check boxes so cluttered, let's simple things out a bit..

I then started designing the high-fidelity screens as we already had a design system in place created by a design agency before I joined the company.

Here's the result. Not the actually first draft because that would take us forever but where we got eventually from all the iterations.

High fidelity screens for the first milestone checked

WE KEEP GOING! 💪

Luckily, I and Ben were both advocates for our merchants and we would have done everything to make this consuming process just a bit easier for them.

From the huge pile of legal constraints we had from Maria, we challenged it and researched more in order to diminish them, a lot of back-and-forth messages, meetings and eventually we had fewer screens with inputs 🚀

SO WHAT'S NEXT? 🧐

Me and Ben iterated and grouped the legal requirements in a logical order, while also adding AML (Anti Money Laundering) questions, all while keeping a simplistic and uncluttered approach

All these 7 steps were now completed and we display again the milestone screen, one more to finish!

High fidelity screens for the second milestone checked

KYC VERIFICATION 👤

The last step in our process was the KYC Verification (Know your Customer) which requires the merchant to scan their ID and also their face in a video environment, not a selfie as we were used to.

For this process, we didn't have the resources to build this in-house so we got a supplier that could give us the APIs and we will use their User Interfaces and eventually white label it to fit our brand colors at least.

Showing the screens for this won't make any sense as no design thinking was put in here (and for NDA reasons) and we will just go along with our supplier solution as we believe is the best and the User Experience is really amazing.

Final insights

Throughout the process, I’ve worked very close with Ben and at any step in the process where we saw some room for improvements but we were constrained by legal we went straight to Maria for validation. If Maria was ok with everything we would eventually double-check with the CTO to see if the APIs from our KYB Providers could match our solution.

EASTER EGGS 🥚

The Automated Onboarding finally had 3 big milestones:
  1. Phone, Email + Terms acceptance
  2. Business details + AML questions
  3. KYC Verification

I planned this order intentionally so we take the merchant first into something easy, adding the phone, email, and ticking a box (right?). Secondly, we give them all the annoying yet necessary inputs that they need to fill in and answer AML questions (really annoying). Lastly, we leave them with the fun and interactive KYC Process which will end the process on good terms.

In this way, all the process was digestible, not that annoying, the merchant knew at all the time where he/she was in the process and no surprises were added which results in a pleasant User Experience and exactly what me and Ben wanted to achieve from the very first iteration.

Wrap up

WHAT HAVE I LEARNED FROM THIS PROJECT

I've learned that where there are legal constraints while designing, you need to put tons of questions, double-check all the answers and then jump to design and not before. Otherwise you'll end up redo-ing everything because a legal constraint was omitted.

WHAT WERE THE CHALLENGES?

Our main challenges were only understanding everything, like literally everything in order not to miss any legal requirement but at the same time to protect the merchants, be a true advocate for them.

HOW DID WE SOLVE THESE CHALLANGES?

With good async communication, while also setting up some meetings. Well organised management done by Ben with his Product Requirements Document (PRD), and ultimately with ownership from each party involved.

Thanks for reading!

Let's work together!