App Onboarding Design: How to Build a Beautiful Onboarding Experience for Your App

App Onboarding Design: How to Build a Beautiful Onboarding Experience for Your App

Perhaps the most common app onboarding design problem is trying to build your entire onboarding process from scratch.

Sure, it can be done, but do you really have the time and money to make all your own mistakes and reinvent the wheel completely?

It’s much smarter to study app onboarding best practices and work with onboarding software that will massively reduce your labor time.

Let me show you how.

TL;DR

What is app onboarding?

Imagine you have a financial app and want to acquire new users.

You could invest in your sales process, and, to be clear, we’re not here to argue against the value of sales in business.

But how valuable are those sales really if your new customers end up churning within a day or two because they don’t understand your app?

That’s where app onboarding comes in.

You can think of user onboarding as teaching your users how to get the most out of your app.

It’s an ongoing process, one that continues throughout the user journey. But it shouldn’t be confused with educating new employees — that’s employee onboarding.

Typical milestones in the app onboarding process

There are two key milestones in every app onboarding journey.

First, there’s the Aha Moment. This is when a new user emotionally understands the value of a new app to them as an individual.

Once this is achieved, first-time users can then proceed to the holy grail of onboarding: activation. Activation is when the user has experienced the value of your product first-hand.

There is a subtle, but important distinction between these metrics.

The Aha Moment is emotional, whereas activation is practical. The Aha Moment is hypothetical, but activation is visceral.

So to return to our financial app example, if you run a typical banking app, a new user might experience the Aha Moment during the signup flow, at the point where they see images of your UI and think “Wow, that looks like a great way to keep my finances organized.”

But activation would only occur after the user has logged in and deposited money with you.

Why is app onboarding design important?

That’s all well and good in terms of theory, you say, but why should your business care about the user onboarding experience?

Well, the better your user onboarding flow, the more of your customers will activate.

The more users who experience the value of your app, the more customers you will retain long-term.

And that translates into more monthly subscription payments for you and your team and account expansion opportunities.

Investing in an in-app onboarding design will even save you money as well.

Consider that you have to pay a customer support agent every time a user has a question that they don’t want to solve alone.

If you have hundreds or thousands of such interactions per day, those customer support salaries will rapidly get expensive.

But if you invest in user onboarding instead, your users will be more inclined to look up the answers to their own questions via an in-app help widget or learn from onboarding UX patterns such as tooltips and modals.

Those onboarding elements will, in effect, work for you every single day — without requiring you to pay them!

Maybe it’s just me, but I think that’s pretty neat.

General principles of app onboarding design

Before we get into the particulars of designing an onboarding process for your web or mobile apps, let’s look at some general principles which apply to user onboarding in general.

To be completely frank: if you don’t understand these principles, none of the rest of this article will help you.

App onboarding design principle #1: Segment your users

If the purpose of app onboarding is to teach users how to derive value from your product, your first consideration should be that the concept of value is subjective.

Put another way: what one user (or group of users) values will likely be of no interest whatsoever to another group of users.

Say that you have a project management app.

Do you think that the average employee using your app cares about the bigger picture of all the users in their organization?

I can guarantee they are far less interested in that — and far more concerned with feature onboarding regarding their own individual tasks.

So, from an onboarding design perspective, treating employees at the operational level the same as a CEO who wants to see the big picture makes no sense whatsoever.

The solution here is to segment your users into groups according to what their product needs are — sometimes referred to as “Jobs to be Done.”

Create user segments with Userpilot and build personalized onboarding experiences. Get a demo and see how.

App onboarding design principle #2: Gamify your onboarding process

Psychological studies frequently find that we learn best through play.

Play is meaningful, it’s engaging, and you remember more of the information afterward!

So you should definitely look into adding a degree of gamification to your app onboarding.

By gamification, I mean the implementation of game-like principles into something that is not inherently a game.

For example, you sometimes see apps integrating points, leaderboards, badges, or competitions into their onboarding screens

A simple progress bar added to the account creation onboarding screens will improve the onboarding experience. Check out how Fullstory clearly tells the user what’s their progress.

We all tend to engage and finish a set of tasks when we’re closer to completion and progress bars are a confirmation that the finish line is close.

App onboarding design principle #3: Keep testing until you get it right

At Userpilot, we’ve seen a lot of apps try to figure out their onboarding, and we can tell you this: no one gets it right the first time (or the second, or the third!).

The apps that succeed in the long run do so due to dogged persistence. They continue to try different permutations of onboarding until they hit upon a system that works.

It’s advisable to set onboarding goals, such as a certain activation rate or feature adoption rate- focusing on key core actions of your product:

Tracking different goals in Userpilot

…and then A/B test different onboarding flows to see which drives your goals up.

A/B testing in-app flows with Userpilot to drive goal completion.

Conducting deep user research will help you a lot with figuring out what your customers find valuable.

UI Elements: The pieces of the app onboarding design puzzle

Now that you understand the bigger picture of how app onboarding works, let’s look in more detail at the individual design elements you can use to inform users about your app’s features.

Use modals to grab your users’ attention

Modals are commonly used during app onboarding to grab users’ attention.

This works well due to the size of modals: frequently, they take up most of the screen with their eye-catching graphics.

Beyond graphical elements, a well-designed modal will normally include a header, some body text, and a CTA button prompting users to take a particular action.

modal design in app onboarding
Modal example: source Figma

To reduce the odds of customers finding your modal intrusive, UX designers should always ensure that modals come with an X button. This gives users an out if they don’t want to click on your CTA.

Because modals are so disruptive, they shouldn’t be used excessively, particularly if the modals are system-generated rather than user-generated. One modal in a sequence is plenty.

Typical design ideas that involve modals include micro surveys, upsells, success messages, and feature announcements.

Welcome screen design

welcome screen design
Welcome screen built with Userpilot. Get a demo today!

If there’s one particular type of modal design that is worth discussing in further detail, it’s the welcome screen.

As the name suggests, apps use onboarding screens like this to greet new users to their platform.

When designing a welcome page, make sure that you include a smiley photo of someone on your team who is customer-facing. That will cement your brand image in your user’s mind as friendly and approachable.

Keep the text part of the welcome screen brief, but include the first name of the customer for a nice, personal touch.

Since this is a commercial exercise and not merely a way to be friendly, it’s also worth restating your value proposition in the copy, as well as explaining to your customer what the next steps will be. Normally, this will be a product tour of some kind.

If you’re looking for an opportunity to divide your new users into segments, the welcome screen is also a great place to do that.

Sometimes, you can even build an onboarding survey directly into the onboarding screen itself.

Create checklists that prompt users to adopt your app’s main features

Remember how we said earlier that activation was something visceral? It requires your users to get stuck in and get their hands dirty.

But which features should you try first if you’re new to an app for the first time?

That’s where a checklist comes in handy to introduce users to your core features.

checklist
Loom checklist example

Simply make a note of 2-3 tasks that each of your user segments needs to learn in order to activate.

From a design perspective, it makes sense to keep your checklists short, so as not to overwhelm your customers.

To improve motivation, give your users credit on the checklist for a task that they already completed during signup, and include a progress bar so that they can see how much more they have to do.

See how Loom has some of the tasks in their checklist ticked off? Or course the user has created an account, otherwise, they wouldn’t be seeing your checklist.

These ”already done” tasks are called dummy tasks and you can easily set them up when you create your checklist with a product growth tool.

Not all tools are the same, but in Userpilot, all you need to do is click ” Do nothing” and ”Automatically mark as complete” when you set a task to show in your checklist.

Setting dummy tasks in checklists with Userpilot

Build tooltips to make individual elements more intuitive

If there’s one particular element in your app’s product tour that your customers just can’t seem to figure out, try adding a tooltip to it.

By tooltip, I mean a short piece of text that’s connected to the element by a little arrow.

tooltip design

If you’re designing tooltips for your app, do ensure that you keep the body text short and concise. Tooltips are subtle; you don’t want to overwhelm your user with too much information at once.

Likewise, it’s generally not a good idea to string too many tooltips together in an extended sequence, which is the mistake that Pendo makes. It’s better to throw in a few hotspots or driven actions into your onboarding flow, just to mix things up.

Keep your tooltip close to the element it’s explaining, but without obscuring the element itself so that it’s impossible to read.

App onboarding design examples that will inspire you

Now that you’ve understood what app onboarding is and how to design the individual parts of your onboarding flow, let’s have a look at onboarding examples from other SaaS apps.

App onboarding design example #1: Kontentino

Kontentino is a social media scheduling app.

Their welcome screen is a work of art!

kontentino

Note the smiley picture of Hana, Kontentino’s customer success manager.

To activate, Kontentino’s users need to complete two steps: connect their social media profile and then schedule their first post.

Kontentino used Userpilot to design one tooltip for each step. So here’s the tooltip for connecting your social media profile:

app onboarding design tooltip

And here’s the follow-up tooltip to schedule your first post:

app onboarding design tooltip 2

Implementing this onboarding flow allowed Kontentino to increase the activation rate of their new users by 10% in the first month of using Userpilot. Impressive!

If you want to see what Userpilot can do for your activation rate, grab a demo today.

App onboarding design example #2: Kommunicate

Kommunicate provides a suite of customer support tools that help businesses integrate chatbots alongside human support agents.

Through looking at their product analytics, Kommunicate learned that customers were experiencing an Aha Moment when they integrated Kommunicate’s chatbot.

For this reason, Kommunicate built an onboarding checklist, complete with an additional notification banner that doubles down on the importance of installing the chatbot:

kommunicate checklist

Once users have installed the chatbot, it’s important to Kommunicate that they learn how to customize it to their brand.

So Kommunicate created a series of tooltips that walk customers through how to do just that:

kommunicate tooltips

App onboarding design example #3 Touchright

Touchright is an app and software suite that helps agents and property managers create property reports in rapid time.

Their interactive walkthrough begins with a welcome screen with a clear CTA that encourages users to list their first property. This is one of Touchright’s key activation points, so it’s important to stress this to users upfront:

Touchright welcome screen

This is followed by a series of tooltips that show the customer how to list a property:

Touchright tooltip
Touchright tooltip 2

Touchright built all of their interactive walkthroughs with Userpilot.

The result?

Touchright’s trial-to-paid conversion rate increased by 11%. It’s now averaging 40%, which is fantastic!

If you want to see how Userpilot can help you get more paid customers from your free trials, book a demo today.

Conclusion

Now that you’ve finished this article, you should know:

  • What app onboarding is, and why it matters
  • Timeless principles of app onboarding that can be applied to any situation
  • How to design the individual elements of app onboarding

If you want to design an app onboarding flow for your business that’s similar to the examples we shared, why not give Userpilot a try?

Trust me: it’s much easier to build tooltips and modals without code than it is to hire a bunch of developers!

Get a demo today and you’ll see what I mean.

previous post next post

Leave a comment