User onboarding is a term that we have been hearing more often in recent years. User onboarding is usually at the beginning of a user’s journey, usually right after signing up. It’s a user flow used mostly for B2B SaaS but can also be seen for some B2C. A simple definition of user onboarding would be the user flow of improving a person’s success with a product or service.
In this article, we will demonstrate the user onboarding flow of a popular B2B SaaS: Slack. An example of B2C SaaS having a user onboarding flow would be Spotify. After signing up to Spotify, a guided tutorial will help the new user to create its first playlist and add a song to that playlist. Remember the definition in the previous paragraph? The user flow of helping a new user to create a new playlist is exactly like improving a person’s success with a product.
User onboarding is sometimes included in the sign-up user flow and sometimes happens after signing up. At SaaS Websites Pro, we record a lot of sign-up and user onboarding user flows and we have found a popular trend recently. That trend is not new but it’s being used more frequently now. The trend is to separate the sign-up process and the user onboarding process in two distinct steps. For example, see the sign-up user flow of Asana. The user creates a new account without having to give any information other than an email address. The goal is to have a new user and then start to build the account during the user onboarding.
Slack Onboarding Flow
The First Step of the User Onboarding Process: The Name
This first step of the onboarding user flow shows a clean and minimalist style. Slack removed all navigation options, the only action we can do is complete the onboarding user flow. The first step is used to name the account with a company name or a team name. The placeholder in the text field shows two examples, a company name and a team name. If you have used Slack before, you will recognize a blank chat screen on the right part of the page. Further you get in the user onboarding process, more personalized the chat screen will get. You can see what I mean in the screenshots below.
Create Your First Slack Channel
This page is the same as the previous page. One question and one text field. It does not specify that the user will create a new channel, simply “What’s a project your team is working on?”. The reason behind that might be to not confuse new users with a term, a channel is this case, that they don’t know yet. Please note how the bank chat screen has now an active state with our company name at the top.
Example of Validation Error
The error was created by typing a channel name with a special character. The error message starts with “Slack can only…”. Again, as we said in the previous paragraph, Slack is not using the term “channel” yet.
Inviting Teammates to Slack
In this new step, you can see that our new channel was added to the Slack mockup. The goal of this page is to invite teammates to the new Slack account. The form itself is practical because you don’t have to manually invite your teammates by sending email messages. An indirect goal of this form is user acquisition. Slack’s pricing model is pay per user per month which means, more users, more money. There is also the option to skip that step and invite teammates later.
This page is the same as the previous one. The only reason why we added this screenshot is to show the green check next to the email address. The green check appeared after the email address was entered. The green check signifies a valid email address.
Tada! The Account Is Now Ready
This page is the final step in the user onboarding flow. There is no action to do by the user, only a confirmation message and a short explanatory paragraph. Note how the chat mockup is now complete. The teammate that we previously added is now listed. It might be hard to see in the screenshot but there was a confetti animation when the page loaded.
Ready to Chat: The Customer Onboarding Process Is Finished
We hope you like this user onboarding flow as much as we do. Here is a small summary of how to create good onboarding user flows. Simplicity: it’s important to keep your process simple. If some tasks are complicated, divided them into smaller tasks. Remember how Slack has created one page for each task. No navigation: there should be only one call-to-action per page. Clear validation: if there is a possibility of error, make sure to have a validation mechanism.
Discover more with SaaS Websites Pro
If you are interested in learning how some of the biggest SaaS companies and web apps have built their user onboarding flow, we invite you to join SaaS Websites Pro. SaaS Websites Pro is a library of hundreds of annotated user flow videos.