Welcome: How to Create a Successful User Onboarding Experience

When you’ve created a piece of software and follow the SaaS model, you will most likely be offering a free trial to your users. During this trial, your user can test the product and decide if he needs it.

And that is the hard part. You have to show the user why he or she needs your product and that its use is easy and pleasant.

That’s why I want to give you some tips about how to make a good impression and create an outstanding user onboarding experience.

Let’s go!

If you like this article, give it some sharing ❤️

What are the Benefits of an Outstanding Onboarding Process?

Your user has signed up for a trial, which means he or she probably already knows something about your product and is generally interested.

The next step is presenting your product and possible applications and features in a more detailed way. The onboarding process should answer the following questions (either through explanation by you or through testing by the user):

  • Which features does your app contain and which ones are especially interesting or valuable to the user?
  • What are the first steps the user should take?
  • How can you guarantee that the core-value of your product is presented to the user?
  • Where can he get help in case questions emerge?

So, onboarding means that the user is getting to know your site or application. This process and how the user perceives it determine the amount of trust the user will put into the product and what he will feel like when using it.

How to Design a Good Onboarding Experience

From an UX perspective you now have different options of presenting the product to your users. The important thing is that the user quickly understands your product and certain features and that he or she has fun exploring it.

The goal of onboarding is getting the user to want to use your product.

To ensure this I want to show you 3 different UX flows: The tour, the jump into cold water and the contextual approach.

The Tour

A tour allows your users to get to know the product. It can be placed directly on the welcome screen or greet new users as a swipe-through. It gives you the opportunity to inform and entertain your user in a short tutorial.

Sometimes the tour consists of a step-by-step setup process like it is used by Drift.

A long swipe-through tutorial can feel a bit dated at times though. The challenge is to not overwhelm the user with information (because who really remembers all of those features and buttons?), while at the same time not boring them.

drift_onboarding

A tutorial can often feel like something you have to get through before you can finally start with the actual product.

I can tell you from my own experience that I rarely read and memorize the different slides. Instead, it’s the overall impression of a product that is much more important to me.

The approach therefore is not “learning by doing” but the equivalent of a theoretical presentation that takes place before the practical test.

Pro: The user receives an overview of the features and possibilities.

Con: The user can’t try out the things he’s learning straight away.

Jumping into Cold Water

When signing up with Snapchat, you are immediately taken to the camera screen. The first thing you see is whatever the camera is showing. You are thrown directly into the application and you don’t have to spend time discovering the functions and possibilities. This could explain why the app is not as popular with users aged 35 and older compared to the younger generation.

The idea of Snapchat is that you immediately start creating photos and videos. The motto of the onboarding process is literally “show, don’t tell”. The user should start using the application straight away.

After a short login process, the Snapchat user is first greeted with the camera screen.

The idea is that you demonstrate the app’s potential instead of explaining it.

snapchat onboarding

A similar example is Twitter: During the sign-up process, Twitter automatically suggests 20 accounts to a new user that he or she can follow. The idea behind this is that it takes 20 accounts and their tweets to create an interesting experience for the user.

Pro: The user can try out features and applications straight away.

Con: It requires an inquisitive nature and joy of exploring unknown things in order to understand them. Depending on the user’s skill level, he might abort the test and lose interest in the application.

Explaining with Context: Learning on the Go

One example combining explanations with trying out the product is Trello.

Here cards are used to explain Trello’s card-based system and structure. Trello contains different project stages that cards can be categorized into. The user is shown how the system works while he is applying it at the same time.

trello_onboarding

The advantage: individual steps can be carried out without an overload of information for the user, who can instead learn at his own pace.

This approach resembles that of having a coach guide you through the different stages of the learning process.

A similar experience is signing up with Slack. You are immediately asked by the Slackbot to type something into the message field.

Pro: The user can see what the app has to offer and is encouraged to try out functions straight away.

Con: Users learn on the go what an app or service has to offer. But is this enough to create sustained interest? You can get users to move a card in Trello, but that doesn’t mean that they already know how to add new members to a card or integrate Trello with Slack.

Wrapping it up.

I tried to highlight the cornerstones of user onboarding with this blog post.

On the one hand, there is the tutorial approach that is basically a one-sided presentation.

On the other, there is the jump into cold water, where users are expected to try out the app directly.

Between these two is contextualization, which combines explaining the product to the user while letting him or her test it at the same time.

I’m excited to see your UX flows and examples. If you’re interested in additional examples of onboarding experiences, I can recommend the following page by Samuel Hulick: http://www.useronboard.com/. It shows onboarding processes in a visually well-presented way and contains comments on the individual steps and designs.

Have fun exploring!

We at Usersnap hope that you like this post and would love it if you follow us on Twitter. We tweet about web development, web design and UAT on a regular basis.

Usersnap is a bug-tracking and screenshot tool for every web-project. Get immediate feedback from the visitors of your websites. Try it now for free!

If you like this article, give it some sharing ❤️