Short description

The purpose is to guide or introduce the user to new features, products or functions. This pattern is still being discovered and open to feedback.

When and how to use it?

Onboarding is the process of familiarizing a user with products and/or systems that are new to the user.

This design pattern should be considered when introducing something new to the user. This something new can be be either a big introduction for a new customer or a small feature in a product page.

Big onboardings:

• New customer at SEB, first time logging in to for example IBP.
• A new platform is launched (Business Arena, Morning and Nexus).

Small onboardings:

• A new option in the menu is available.
• A new feature on a product page is implemented.

Don’t overdo it and use onboarding components only once. However, consider providing the information from the onboarding to the customer at a later stage.

If the task the user needs to complete is especially complicated, you may need to complement with “help components”, which could include the same information as in the onboarding.

Onboarding components

We see the following types of components:

1. Coach marks
2. Walk-through tour
3. Blank-slate tips

1. Coach marks

Coach marks are contextual tooltips that focus' on the benefits of a feature. They can appear automatically when users see a new feature.

• Once they are dismissed, they don't appear again
• Often the surroundings is opaque to bring focus to the coach mark.

Component: Coach marks

FX example

Internetbank private example

Slack example

2. Walk-through tour

Use the walk-through tour when you want to motivate the user to start using the system, or show best practices. Think of it as a wizard to give the users the best start.

Component: Walkthrough

Rocket bots example

Trello onboarding example

3. Blank-slate tips

These are used when you want to guide the user AND give them some foundation to start with. It's an interactive guide where the user is using the product itself, so you give them more than an empty state. 

lookback.io example

manage.ensighten.com example

Do's and don'ts

Do

• If repeated help is needed, use “help components” instead.

Don't

• Avoid showing the same customer the onboarding component more than once.
• Don't rely too much on onboarding components, the design should be easy to understand on its own.