SaaS onboarding screens: Examples from 50 leading companies

According to a study conducted by Arengu, 74% SaaS display onboarding content after signup form submission to guide the first interactions of their users with their product.

There are almost as many onboarding screens as there are products, but we have collected the most distinctive ones, so you can be inspired when creating them.

What is an onboarding screen?

Onboarding screens are interfaces that aim to welcome new users and guide their first interactions with the product. They are displayed for a certain amount of time or sessions, after a user has registered.

They are a part of the product onboarding flow, but they usually aren't the only element. Some companies display account settings forms between the signup form and the onboarding screen, which is also often used to better qualify the user.

Onboarding screen examples

The design of onboarding screens varies depending on the complexity of the product they present. From the simplest to the most elaborate, we have identified these types.

1. The basic onboarding screen

It allows the user to choose between two options that are usually to see a walkthrough or explore the product freely, like Toggl does. They are usually displayed in a modal window, including a welcome text and also some visual content, be it an illustration or video. 

As we see in the example, the walkthrough is usually available for later viewing even if we choose the option to freely explore.

2. The multiple-choice

In this case, the onboarding screen gives the user several options, apart from freely exploring the product, like Maze does.

Among these options, in addition to walkthrough and other onboarding content, are usually the use of templates and the option to invite other users.

These onboarding screens are usually seen either as modal windows or occupying the entire screen, as we can see in the example.

3. The contextual help

Instead of creating a separate screen, some products like Workplace modify the interface with contextual help messages and CTAs that prompt the user to take action.

This option is usually seen in interfaces with small learning curves, whose basic actions can be explained in a few steps and sentences.

4. The visual metaphor

This type of onboarding screen is a mix of the above options, and it usually appears in slightly more complex products. In addition to educational content, they reproduce or simulate part of the interface to explain the basic concepts.

For example, Segment’s onboarding screen invites the users to configure a data source and destination, using an image and CTAs to visualize the entire flow they are configuring, and helping the user to understand each element.

5. The checklist

In products that require diverse actions to complete a task, the onboarding screen usually is a checklist that summarizes them and provides the corresponding help content.

AWeber is one of the products that uses this option that, in longer onboarding flows, allows the user what remains to be done to make the product work. 

This is one of the most common options and many products adapt it to other displays, in which the checklist idea is not as explicit, but follows the same logic.

‍Twilio’s onboarding screen is one of these examples.

The help content related to each action or step varies by platform: walkthroughs, links to docs and tutorials on a website, while others like Drip display it on the side of the screen.

6. The dashboard

In this case, the onboarding screen is not a specific page that disappears after a period of time or a number of sessions, but a block of content within the product's homepage.

It combines elements of the checklist and the contextual help, to create a dashboard whose CTAs will disappear as we complete actions and see the metrics grow. Mailchimp's onboarding screen is a good example of this.

User onboarding forms: Account settings & Qualification

After the signup form and before the onboarding screen, many user onboarding flows display a form to finish configuring the user's account and qualify it a little better. Not all flows include them, but these are some of the most common questions in these forms.

1. Product use

One of the most common questions is to find out if the user has created the account for personal or professional use, as we can see in Bitly’s form.

Based on this answer, different questions are displayed: different paths are triggered using conditional logic, depending on whether it is a personal or professional account.

2. Company data

When the answer is that the account is for professional use or if the form detects a corporate email, it is usual to request more info about the company, as Workplace does.

It is also common to use data enrichment services such as Clearbit to get this data automatically, without the need to ask the user.

3. Used integrations

In these onboarding and account settings forms it is also common to ask which tools to connect with this account, as you can see in Drip’s example.

This helps us not only to set up the account, but we can also get valuable data about the stack of our users and the services that would be interesting to add.

4. Default settings 

In addition to asking for services and integrations, some user onboarding forms allow us to configure default data and other important settings for the proper functioning of our account. Drip is again a good example of this, but you can also take a look at Workplace.

5. Choose a template

Many of the platforms have templates so that the user doesn’t have to create their use cases from scratch. They are also a really useful onboarding content at Figma.

6. Pricing options

Finally, and although it is the least common option of all of them, some of the SaaS also choose to include the choice of a pricing plan in the onboarding form.

Conclusions

There are numerous types of onboarding screens and no single solution. Each company must find the one that works best for their product by iterating over an initial proposal. However, there is a series of contents that are worth considering:

• Greetings and welcome. It may seem obvious, but no onboarding screen lacks this content. A title and a short intro is the most used format. Just keep it simple, concise and positive: this is the first thing users will see when accessing your product.
• The gift of choice. Allow users to choose what they want to do, even if it is only between two options, such as exploring freely or seeing a tour. Don't try to force them to watch content or to take a walkthrough that they don't want to see right now. 
• Point the right direction. Always leave an access to the guided tour or checklist in a visible place so that users can open it even if they have skipped it at first. It must summarize the key actions and settings for the product to work properly.
• Guides, tutorials and help. Remember that at all times the user must be able to find help easily and quickly. There are several ways to do it, from the onboarding checklist itself, with tooltips and contextual help, a contact email, or a support chat.
• Account settings. If your product needs configuration to work, it is a good option to request this data on the onboarding screen or previously in an account settings form. This will allow the user to explore the product with the basic configuration done.
• User qualification. Reduce friction in the signup form by avoiding user qualification questions. If you need more information, you can use a data enrichment service or request it after creating the account and before accessing the onboarding screen.

‍Ready to improve your product’s onboarding? Arengu allows you to create fully customized registration, user qualification and account settings forms and flows.

‍