How to Design Onboarding Screens to Improve User Experience

How to Design Onboarding Screens to Improve User Experience cover

The onboarding screen is a vital part of your product design. In many cases, it’s your only chance to make a good first impression.

Well designed, it will lead the user on, giving them the motivation they need to engage with the rest of your tool. Similarly, a subpar onboarding screen only gives you bad reps and may end up repelling customers.

In this article, you’ll learn:

  • The key role and benefits of onboarding screens.
  • The main difference between onboarding on mobile and doing it for web apps.
  • Practical tips and examples of onboarding designed by some top SaaS brands.

TL;DR

  • An onboarding screen is an introductory screen a user sees when they open a new app for the first time. Onboarding screens typically consist of quick walkthroughs, tooltips, or other UI elements and end with the user taking key steps in the product.

The main benefits of an onboarding screen:

  1. Communicate product value and drive users to the Aha moment.
  2. Collect relevant data: you can segment customers based on their responses and use that to provide tailored experiences, helping them reach activation faster.
  3. Personalize the blank screen with relevant data to give customers a headstart.
  • What’s the difference between mobile app onboarding and onboarding for web apps? They’re the same. The only difference is the screen size, so keep in mind that some functionalities and user actions are limited on mobile.
  • Focus on these two screens for successful onboarding: your signup screen and the welcome page.
  • You have two options when creating signup pages: make them friction-based or use a frictionless approach. The method you choose depends on what you’re trying to accomplish.
  • Use your welcome page to 1) collect user data and 2) provide guidance through checklists and tooltips.

Popular onboarding screen examples (details in the article):

  • Slack: onboarding page for first-time users.
  • Prodpad: onboarding screen for returning customers.
  • Loom: onboarding page with a nice touch.
  • Fullstory: onboarding screen with gamification.
  • Linkgraph: onboarding page that enhances the user’s experience.
  • Todoist: onboarding screen guiding first steps.

What is an onboarding screen?

An onboarding screen is an introductory screen a new user sees when they open a mobile or web app for the first time. Onboarding screens typically consist of quick walkthroughs, tooltips, or other UI elements to guide users through the product,

The role and key benefits of onboarding screens in SaaS

Onboarding screens are extremely common in SaaS. They not just make users feel at ease with the product but also help SaaS companies collect valuable user data that are further used to create personalized in-app experiences.

Specifically, they help to:

Communicate product value and drive users to the Aha moment

The Aha moment is the emotional reaction users have when they realize the value of your product. And it’s key to ensuring users continue exploring the tool.

Onboarding screens are great for driving users to the Aha moment. This is especially true when they’re used during signup to show dashboard screenshots, positioning messages, etc.

multiple-aha-moments-onboarding-screen
SaaS onboarding process.

Collect relevant data

Your screen can include signup flows with multiple fields, as in the example below.

Collecting this data early lets you learn more about your users. You can segment them based on their responses and use that to provide tailored experiences, helping them reach activation faster.

Signup flow example from Miro.
Signup flow example from Miro.

Personalize the blank screen with relevant data

Empty states can overwhelm new users because they’ll be unsure of what to do. But it can seem like something you can’t find a way around—particularly when your platform requires users to populate their dashboards themselves.

However, you can learn a thing or two from Asana.

Rather than presenting users with a blank screen, Asana uses the data collected during the signup to personalize the user dashboard for the first time, so customers don’t have to start from scratch.

asana-signup-onboarding-screen
Asana uses customer data to create personalized dashboards and ease the user journey.

Mobile apps onboarding screens vs. web apps onboarding screens

They are the same. One thing to note is that a mobile user doesn’t have the same patience or can’t complete complex actions. So, mobile onboarding screens should be kept as simple as possible.

Some people argue that there’s no point in onboarding mobile users—your app should be intuitive enough.

While that’s a legitimate argument, keep in mind that onboarding is to help users start deriving value from your product quickly. They might still figure out your app without onboarding, but being new, users are bound to waste valuable time if they aren’t helped.

Why go that route when you can just provide simple guides?

Onboarding screens to focus on for a successful user onboarding process

You mainly want to focus on two screens: the signup page and your welcome page. This section closely examines the two pages and how you can make the most of them.

The signup flow

The State of SaaS report found that 76% of the 100 SaaS applications reviewed have a friction-based sign-up flow.

Frictionless-signup-flow-
Signup flow report for SaaS.

But does this mean you should copy them and create a friction-based experience? Not necessarily. The signup flow you create largely depends on your goal, so let’s consider the difference.

Frictionless signup flow

Frictionless signup flows allow users to get into the product within seconds. There’s absolutely no friction in the process—in most cases, just a password and email or integration with Facebook or LinkedIn are required.

The idea of this onboarding screen is to get users to the UI quickly and allow them to explore the product themselves. Use this when the product is easy to use and the user can easily experience value.

While frictionless signup has advantages, it also has downsides like spam signups and quick drop-offs. It also means you can’t get adequate data about trial users.

Friction based

Most users will prefer frictionless signup, but it’s hard to use when your product is complex or requires technical integrations.

The goodness is, the friction-based method comes with its advantages: asides from user education, adding extra friction to the signup process lets you filter out the wrong customers. You can also collect data to personalize your onboarding flow.

Friction-based doesn’t mean you need to remove Single Sign-On (SSO). You can still have this and have a signup flow with multiple pages, email verification, a captcha, credit card fields, etc.

The welcome page

The next screen users interact with after signing up is the welcome page. Like signup screens, the welcome page could be a single page or a sequence of pages, depending on how much content you want to put out.

Don’t just greet customers; use this page to show users the next steps to take. Here are two ways to make the most of your welcome page:

Personalized page UI using data

If you have any data on your new users, now is the time to use it. Tailor the page UI to their use case so they see how your app solves their problems.

You can use to-do lists or demo pages to prompt action like Notion does in the example below.

notion-blank-slate-ui-design-
Notion’s onboarding page.

You can also use demo data if it applies to your product. For example, imagine you run an analytics platform. Leading new users to a dashboard with demo data they can experiment with quickly helps them experience how your analytics work.

Use onboarding patterns to guide

Onboarding checklists and tooltips are great for guiding users through the different angles of your product. Use them to prompt users to take the first key retention correlated action that provides instant value and makes them want to continue.

How to ensure your onboarding patterns work well:

  • Keep it simple.
  • Use the right microcopy: sometimes, the difference between action and inaction lies in your wording.
  • Use a progress bar to give users a sense of motion—your customers will be more excited seeing that they’re 70% into the onboarding flow than when it’s just checkboxes they’re crossing off.
  • Thank your users for completing the process.

Userpilot makes it super easy to provide contextual guidance through checklists, tooltips, and other UI patterns. See it in action:

userpilot-onboarding-checklist-onboarding-screen
Building onboarding checklists on Userpilot. Book a demo to try it!

Popular onboarding screen examples and why they work

So far, you’ve seen the strategies for making effective onboarding screens. But real-life examples from brands that are killing it will provide another level of inspiration.

Below are six examples.

Slack: onboarding screen for first-time users

Slack welcomes users with a beautifully designed screen. Notice how warm and friendly the welcome message is.

The CTA is also clearly placed so the user isn’t left wondering about the next step to take.

slack-blank-slate-ui-design-onboarding-screen
Slack’s welcome screen.

Prodpad: onboarding screen for returning users

Prodpad is a textbook example of how user research and behavior analysis is key to growth.

The company uses the freemium pricing model. They initially allowed trial users to use the product free for 30 days, but later realized it took an average of 9 days for users to decide if they wanted the tool or not.

So they reduced the trial period to just seven days. But that’s not the best part. Customers had the option to increase their trial periods by completing key actions in the app, as shown below:

prodpad-gamification-example-
ProdPad’s onboarding screen for returning users.

It’s a win-win situation. The company stopped wasting resources on freeloaders; serious users get extra time to explore the product.

You can implement a similar strategy. The key is to identify value-driven tasks in your tool and reward users for completing them.

Loom: onboarding screen with a nice touch

Loom combines learning and showcasing its product in its onboarding. It makes sense, as Loom is a video tool. After recording a few videos, you’ll notice that your dashboard will look similar to the one on the screen you saw while onboarding:

loom-onboarding-videos-
Loom’s onboarding page.

Fullstory: onboarding screen with gamification

Fullstory uses its first screen to collect user data. That’s a common practice, but the company’s onboarding involves multiple steps and can get the user thinking, “will this ever end?”

So, they added gamification to the mix—a progress bar that tells the user how many steps are left. Implementing this strategy will increase your completion rates as users will feel motivated to complete what they’ve started—especially when they can see it’s just a few steps left.

fullstory-signup-product-trial-onboarding
Fullstory’s onboarding flow.

Linkgraph: onboarding screen that enhances the user’s experience

Unlike the examples on our list, Linkgraph is a case of something you could do differently.

Being a complex platform with different features, the software needed an in-depth guide to help users make the most of it. Going for videos was a good idea because blocks of text won’t cut it for complex tools.

However, displaying many videos at once can overwhelm users. It feels like taking a full course you didn’t sign up for. Users might feel demotivated and just neglect the whole thing.

Having one video per section would have worked better. The UI would be cleaner, and users wouldn’t feel swamped.

linkgraph-onboarding-screen
Linkgraph’s onboarding page.

Todoist: onboarding screen guiding first steps

At first glance, the image below appears like the standard checklists you see in SaaS companies. But this was created using Todoist to show users that it’s one of the things they can do.

It’s a powerful strategy. Demonstrating your features in this way leaves users feeling empowered. They’ll finish the onboarding fully ready to start using your app.

Todoist-onboarding-
User onboarding on Todoist.

Conclusion

The first few interactions a customer has with your product can make or mar your relationship with them.

Engaging onboarding screens ensure users develop the right perspectives about your brand. That’s not to mention the main benefit—contextual guidance on how to use your tool.

Hopefully, this article has shown you some strategies to make the first-time experience worth it for you and the customer.

Ready to build/update your onboarding screen? Userpilot can help! Book a demo now to see how our tool lets you get the most out of your onboarding screens.

previous post next post

Leave a comment