SaaS Application UX Design - Chapter #1: Client Onboarding

In case you do not see the framework well, please download it here.

Intro

The SaaS Dashboard UX Design Stack is a framework that breaks down the elementary components that form the overall experience of a SaaS dashboard. The stack is prepared for UX practitioners, product and marketing managers, growth hackers and CEOs of early-stage startups who have a leg in product development.

A few considerations

• This framework is an evolving piece that we will update over time.
• We will also write follow-up articles to demonstrate how you can apply the framework to a new enterprise or to an existing product step-by-step.

Terminology

Clients: We prefer to use the term "clients" instead of "users", especially when it comes to B2B environments. We make this clarification because we want to alleviate the negative connotation given to the term "users" as "addicts" by social media platforms like Facebook, Twitter or Instagram.

Customers: A group of people with certain need(s) to which a client serves through the offering of products and services.

History & evolution

The stack was initiated by Behrad Mirafshar in response to his exposure over the past few years to projects related to B2B and B2B2C apps in healthcare, organizational management, human resources and InsureTech companies. 

Framework anatomy

The framework structure is based on the evolution of a client mastery over a SaaS application. It is compartmented into 5 segments that each addresses a primary pillar of the application architecture.

Each individual cell is a key result that, if achieved, can enhance the client experience.

We will zoom in on each element and try to break it down into details. We'll also adjust each element in following updates.

Chapter 1: Client Onboarding

1.1 Step-by-step onboarding

Onboarding new clients is one of the most critical steps in the way of business generation. The entire business efforts turn to dust if the client does not sign-up into the app. 

The client onboarding is part of the overall product experience but it influences the business success independently. This is why in large organizations, there is a dedicated team continuously gauging the performance of the client onboarding flow.

Klara: An example of Manual Client Onboarding.

1.1.1 Self-Service vs Manual Client Onboarding

Manual Client Onboarding is for applications designed for large scale operations such as hospitals. Due to the scale of integration, the size of the contract and the time needed to close such deals, applications as such often nudge clients to book a demo first.

Self-Service Onboarding is widely defined as any registration process by the end of which a client can access an application. This is the most favourite type of onboarding amongst modern internet companies. The primary advantage of adopting such an approach is that potential clients get to use the product first-hand.

**OUR RECOMMENDATIONS**

We recommend you to choose the Self-Service option unless you work in an industry affected by large scale operations or tough security measures like the public sector. Please understand that a potential client always juggles between a few potential options. Furthermore, consider that in the context of B2B or B2B2C, you interact with extremely busy people — probably CEOs, CMOs, CPOs, COOs, etc.

Just imagine a potential client. He is sitting at the table of a nice restaurant and asks to taste the food of the 3 different chefs cooking today. If the three plates arrive together and your meal is the only one with a lid on, it will make a poor impression.

1.1.2 Self-Service Onboarding process

Expertlead: Forms - a good old pal of every internet user.

There are two primary archetypes when it comes to Self-Service Onboarding.

A) A typical registration form

B) A step-by-step onboarding

In the UX community, opinions are divided when it comes to which approach is the most effective. 

• More conservative designers vote for pragmatism and opt for a registration form. They argue that you can fill all the fields in one go.
• The other designers insist on not overwhelming clients by asking them too many information in one go. 

Both options have drawbacks. Registration forms can be painful to look at because of the high number of fields. On the other hand, step-by-step onboarding can turn into an interrogation session if too many personal questions are asked.

Regardless of which approach you choose, the effectiveness of a Self-Service Onboarding process lies ONLY in the brevity of the process. In other words, you do not want to directly ask all the required information to the client, there is no need to rush. Instead, consider asking for the least critical information required for registration.

Overall, you should understand that there are different degrees of importance when it comes to client information. You must prioritize the least critical information during your registration process so that the client will pass through the gate of onboarding.

You may ask: how about this and that information? Well, ask them later. Notify them in the app. Gamify the profile completion process and kindly nudge them to fill in the rest.

G Suite step-by-step onboarding successfully breaks down a complex process into digestible titbit.

**OUR RECOMMENDATIONS**

The research shows that splitting the registration form onto multiple steps yields +4.8% in client conversion. Here are some major tips:

• If you are dealing with a target group who’s relatively internet savvy, you can save them time by putting forth a concise registration form.
• If part of your offerings connects to consumers, a step-by-step onboarding process is more potent. This is especially true for B2B2C products (e.g. InsureTechs).
• If your offerings principally rely on services, make sure you display them clearly on your website and back them up with some social proof. The only goal you should pursue through this kind of onboarding process is to get the clients on the phone so they can speak further with your sales representatives.

1.2 Dummy Data is a MUST

Seeing a page like this reminds us of how life can be shallow sometimes.

Encountering an application which looks like a barren desert makes everyone anxious and confused. Having dummy data plays a crucial role when it comes to make clients feel comfortable and to facilitate their onboarding process.

Expecting clients to upload their personal data at this stage is a far-fetched presumption. This step is fragile and you need to establish trust between you and your client beforehand. 

Hibob: A filled app can communicate its purpose easier while making the client feel comfortable.

At this stage, the churn is extremely high given that clients must format their data according to your application data model. This is a considerable upfront commitment to ask from a client before they can paint a complete picture of how they can benefit from what the application offers.

**OUR RECOMMENDATIONS**

Approaches like demo calls, presentations or instructional videos are nice to have but are also proven to be ineffective. It's difficult to win the trust of clients unless they grasp the full potential of the application by themselves. In other words, USE DUMMY DATA.

1.3 Mass import 

This is the cherry on the cake for products in the process of finding their Product-Market Fit (PMF). However, after achieving a PMF, offering mass import becomes a necessity. This solution is a win-win-win for you, your client and your client's dev team. It reduces the back and forth and saves time for all the stakeholders.

[END OF PART 1]

Link towards the original article.

About Bonanza Design

We're a creative studio based in Berlin and our clients span from industry leaders to promising startups. Usually, clients start by asking a diagnosis. One of the very first area that gets our attention when browsing a website is the user experience. Crafting a well-thought UX is essential for any website having the ambition to convert. Feel free to discuss with us if you feel that this article resonates with you at some level.