What Are App Onboarding Screens And How to Create One

Galleries of app onboarding screens show you what good flows look like, but not how long they are or why. Counting helps. In the five flows below, the initial onboarding ran to four screens at most (Notion), three in Pinterest's sign-up, and two plus a hint overlay in TikTok's. The other two apps didn't use an up-front carousel at all: they showed one screen at the moment a feature became relevant.

This post covers what an onboarding screen is, why it matters on mobile, how to design one, and those five examples.

What is an app onboarding screen?

An app onboarding screen is a screen, usually covering the whole display, that introduces an app to users before they start using its core features. First-time users see it first and foremost, but the same format works for returning users and for introducing new features after an update.

A typical onboarding screen has a short headline, a sentence or two of copy, an image or animation, and a progress indicator. Users move through a few steps of instructional content to complete the initial flow. Later in the user lifecycle, other pieces of mobile onboarding (tooltips, slideouts, empty states) take over, but the onboarding screens are the first step.

Here's how the five flows in this post compare:

Why are app onboarding screens important?

App onboarding matters for the same reasons all onboarding does: it gives users a friendly, educational first experience, it supports long-term retention, and retention means revenue. On mobile, three things raise the stakes.

1. Mobile is where people spend their time

Mobile use keeps growing, from social media into almost every other area. According to Comscore's 2019 Global State of Mobile report, 70% of digital media time was spent on mobile devices. According to BroadbandSearch's mobile and desktop usage figures, 60% of searches and 80% of social media access happen on mobile.

2. Mobile users decide fast

App experiences happen quickly, and so do bad ones. According to Wyzowl's customer onboarding statistics, 80% of users say they've deleted an app because they didn't know how to use it. When users are that quick to leave, app onboarding can't be left to chance.

3. Mobile takes up new UX patterns first

Dark mode, animation and super apps all took hold on mobile, and mobile users span a wider age range than desktop users. That makes good onboarding screens both more possible and more necessary. See our mobile app onboarding best practices for more.

How do you create onboarding screens for a mobile app?

Design onboarding screens in five steps: know your users, choose a strategy, define what a good experience is, map the screens, and test them. If you've built the app, you have developers who can build the flow, so these steps focus on the decisions.

1. Know your app and your users

Before colour schemes or background shades, answer one question: what does your app do, and for whom? Most confusing onboarding screens, the ones heavy on cognitive load, come from skipping it. Ask:

• What industry or category is your app in?
• What are the age range and demographics of your users?
• What defines your main user persona or personas?
• How steep is your app's learning curve?
• What's the best way to teach your main persona? Which UX patterns would you need?

2. Choose an onboarding strategy early

Your answers point to one of three approaches to mobile onboarding:

• Function-oriented onboarding focuses on the core features and where they are (Notion's tips).
• Benefit-oriented onboarding focuses on what the app does for users and how they reach their goal.
• Progressive onboarding focuses on instant value and learning by doing (TikTok's flow).

Any of the three can produce good onboarding screens. The strategy changes the content and the copy more than the screen format.

3. Define a good experience for your app

You know your app, your persona and your strategy. Now decide what a good experience looks like for those users:

• What's the shortest route to your app's value?
• Which onboarding patterns would your users accept without friction?
• Do you need a sign-up step, video or contextual onboarding?
• How short can the flow be? Can it be shorter?
• What counts as success: the milestones, the aha moment, the first achievement?

4. Map the screens

Now draft the flow, and watch for overdoing it. These rules match the examples below:

1. Keep the initial flow to four screens or fewer. Notion used four, Pinterest three, TikTok two.
2. Give each screen one idea, with the key action in bold or in the headline.
3. Show progress when there are more than two screens, with dots, a counter ("1 of 3") or a bar.
4. Always offer a way out: Skip, "Take me to Notion" or Got it.
5. Ask for data only if it changes what comes next. TikTok's and Pinterest's interest pickers shaped the first feed.
6. Move feature introductions out of the first-run flow and show them when the feature is in use, as Canva and Twitter did.
7. Explain system permissions on your own screen first. Pinterest explained Apple's tracking prompt with a friendly pre-permission screen before iOS asked.

The screens also need to meet basic usability and accessibility rules: readable contrast, text that scales, and buttons large enough to tap.

5. Test, always

Testing is the most important part of designing onboarding screens. Usability testing and A/B testing will find problems you couldn't see when you thought you were done, and there are cheap ways to do both: guerrilla testing with a handful of people, or email tests of the messaging. See how to run user testing for onboarding for a step-by-step method.

5 mobile apps with good onboarding screens

There are plenty of well-designed mobile onboarding screens and some bad ones. These five were added to this post in 2022; each is described as it was at the time of the screenshot.

1. Notion

When users first opened Notion on mobile, a four-step flow covered the essentials, starting with "Touch and hold to reorder any content." Each screen had a counter (1 / 4 to 4 / 4), a sentence with the key action in bold, a Next button and a demo on a phone mockup.

It's a good example of function-oriented onboarding: short copy and a progress marker, two things every app onboarding screen needs. The last screen offered Download Notion or "Take me to Notion", so users chose where to go next. See the library entry.

2. Pinterest

 

Pinterest's sign-up flow did something hard: it got sign-up down to three steps. The first asked for an email above a "1 of 3" counter and a progress bar, the second asked for gender, and the third asked users to pick at least five topics before Next would work.

Its strength is brevity, which is why the counter and progress bar make sense: users can see the end from the first screen. The style, now common in apps like Netflix, suited Pinterest's users, and choosing topics felt more like a game than a form. See Pinterest's sign-up in our library.

3. TikTok

Like Pinterest, TikTok asked users to choose interests ("Get better video recommendations") so it could personalise the feed, with Skip and Next buttons. A second screen, "Swipe up", explained the gesture, and a hint on the first video repeated it. All of it happened before sign-up.

TikTok used no progress indicators, and didn't need them with two and a half steps. Getting users watching in seconds makes it a good example of progressive onboarding; see the library entry.

4. Canva

 

 

Unlike the first three, Canva's onboarding screen here wasn't part of the initial onboarding. Its overlay appeared in context, introducing a tool the user might want on the design they were editing, such as Effects on an image or Ungroup on a text block.

Because it's essentially a tooltip covering half the screen, it needs no progress bar; one would only help if it showed more than two features in a row. Instead of a skip button, "Tap to close" works anywhere on the screen. See Canva's overlay tooltips.

5. Twitter

Twitter's (now X) onboarding screen here wasn't an initial one either: it introduced Spaces, its live audio feature, when users opened the "Create your Space" page. Instead of a step-by-step series, each slideout put everything on one panel, such as "Welcome to Twitter Spaces" with three points and a Got it button, and users could also slide it down.

A single text panel can look like a weak onboarding screen, but the clear hierarchy, the icons beside each point and the illustration make it read quickly. It's a good, if unusual, example.

Which app onboarding screen is best?

The best app onboarding screen is the one that matches your app, your audience and your brand voice. The examples above might not work for you even if you executed them better; it depends on your product. Start from the rules in the mapping step, test, and see the rest of our onboarding UI examples for more patterns.