Welcome on board: Turning users into fans

Dos and don’ts to a warm onboarding process to quickly engage your users.

Juan Lasarte
6 min readNov 13, 2017

We can define the onboarding process as assisting new users to understand an experience of how a digital product (websites and apps) is going to help achieve a task or a goal. It’s all about turning new users that are not familiar with your product into activated and engaged users.

A good approach might include unwrapping the value and special features of your website or app.

The results of our UX research will have an important role in the process of designing a successful onboarding experience. It’s important to ask ourselves;

  • What’s the user’s motivation?
  • What has driven the user to sign up to your app?
  • What is the user's task or goal?

As you start getting data, you are going to be able to identify patterns and categories based on what your users are trying to do for their first experience.

The WHY

Why is this important? Because the onboarding process is very related to the engagement of users, there’s no second chance for a good first impression and we definitely want to avoid the user feeling lost or frustrated because they cannot accomplish their goals.

Many users might have arrived at your site from a link in an article, or by recommendation from a friend. If they do not have any sense of direction or purpose, they might feel anxious, overwhelmed, and confused about what they’re supposed to be doing there. Furthermore, they might never want to come back to your website or app, and even worse they might talk shit about your product. Onboarding your users are going to help to overcome the cold-start problem and definitely improve retention and engagement.

Types of Onboarding:
There are different methods to onboard users, we can divide them into 3 different categories; Explain, Show, and Do.

Explain

The explain method is used by products who solve lots of problems and they have many use cases. Normally they don’t have an onboarding process, however, they do provide users a support website or section with videos or articles in order to explain how the product works.

A good example to understand the “explain” method is Adobe Photoshop. New users download the software and get into the workspace with no onboarding at all. If they have doubts of how the program works, they have to click the help button and then they are going to be re-directed to Adobe’s support website.

I would not recommend “explain” as a primary method since it only works with users that are very motivated. Explaining how the product works is a great supplement to a good onboarding experience.

Adobe Photoshop Tutorials web page.

SHOW

The show method might be one step above “Explain” but it still might have some issues.

We can detect many ways of applying the show method. One of them is the “screen overlay”. The overlay consists of highlighting the functionalities and parts of the user interface. Usually, this includes lots of indicators. Please see the example below.

Please don’t do this.

Now, as you can see in the example this can be extremely overwhelming, people will most likely not read it and even if they do, how can they remember the instructions at the same time as they are using the app? It’s impossible. I would not suggest using the overlay pattern.

Another way of applying the Show method is the product tour, this is a very common pattern on mobile apps. It consists of showing the users a series of slides that highlight the features of an app. It’s definitely easier to digest in comparison to the screen overlay because it shows one thing at a time. But most of the time, users will probably skip it, at least for me as an anxious user I will always try to jump into the app and skip a product tour.

Anyways, if you design a product tour try to not include crucial information because it is probably something that users won’t see at all. Keep it short and to the point, and try to explain the value of the product.

Mobile App product tour. Credit: https://dribbble.com/shots/3373149-Onboarding-screens

Tool Tip Walkthrough.
The tooltip walkthrough is a contextual method, it consists of showing tooltips to the user that will highlight an action of the user experience. This method is commonly used as a first-time user experience and it is attached to a specific user interface element.

The whole intention of this method is to assist and help users. It’s not to fix the user experience, this should not be a patch. Also it’s pretty important to test this methodology before launching the product because you might find that the users don’t need some of the tooltips in order to accomplish their tasks. My advice is to try to be as contextual as possible and doesn’t expect users to read everything, so again… don’t include any critical information in the tooltips.

Classic example of a tooltip walkthrough. Some of them might include navigation items.

DO

The “do” method is the best way to onboard users. The main idea of this contextual methodology is to encourage helpful actions for the user. Basically, it’s all about offering guidance to the users in their journey while they navigate your product.

A good example to quickly understand the DO methodology is Trello:

Their starting screen is a “Welcome Board” that includes to-do list items, each of the items explain a different interaction or functionality of the product. They adopt the interface to encourage users to explore and try these interactions in a practical context that users might need in the future. This is a better approach than showing a static screen with some instructions impossible to memorize. Trello also gives the user the possibility to explore a product tour or watch an explanatory video.

The user interface is showing elements that demonstrate the value of the product and also educates the audience on how to use them.

Another reason why it’s so important to follow a contextual onboarding approach is that it provides you with more scalability. As your product grows you can introduce the changes or new feature updates contextually.

Tool tips can be very helpful to notify users about new features on a website or app .

Moreover, I would like to highlight the importance of maximizing the use of empty space. What’s an empty space? Its when you start using a product, for example, a social feed and you do not have any content yet. An empty screen is a great opportunity to encourage users to perform an action. For the example of a social feed, maybe the user has not added any friends or the app requires some input data to generate content. This scenario is a great opportunity for onboarding users and demonstrates the value of the app.

An empty screen is a great opportunity to encourage users to perform an action.

Now let’s imagine a dashboard scenario where you do not have any data to show. You can demonstrate the value by providing your audience an idea of what they will see once they get started. Like an appetizer. And obviously, we must show a simple way to move forward or drive users to a basic task.

MailChimp dashboard first-time experience encourages users to perform actions.

Conclusion

  • It might be obvious but it is crucial to know the user’s motivation and needs.
  • If you design a product tour try to not include essential information because it is probably something that users won’t see at all. Product tours can be a positive complement to a good onboarding experience.
  • Be contextual, encourage users to perform actions and don’t forget to demonstrate the value of the app.
  • Explain is good, show is better and do is the best.

Sources: uxmag.com, uxplanet.org, dribbble.com

--

--