User Onboarding UX: Everything You Need to Know

Last week I was playing The Witcher 3 after a very, very long time.

Not too long after, I came to the conclusion that I had absolutely forgotten how to use the controls.

Not one thing did I remember.

So, I just started testing the buttons (and got killed several times) instead. But somehow, I managed to get the hang of it after about half an hour.

Now, I know I am not the best gamer out there, and maybe someone else would have mastered it in a matter of minutes, but there are still some questions to ask:

👉 Would it be better if the game figured I was gone for too long and offered some quick recap from the initial user onboarding?

Maybe.

First of all, it’s a game. I wasn’t there to learn.

All I wanted was to play.

👉 But on the other hand, would I like some quick tips without distracting me from the game itself?

Absolutely.

Like in my case, user onboarding depends on what the product is, who is using it, and so many other factors.

You should first acknowledge that your SaaS product isn’t a game.

Not all your users are looking forward to using it.

To polish your onboarding UX, you need to take it all into account and think from the user’s perspective.

In this article, we will look into:

• What user onboarding UX is,
• Why it matters,
• How to choose the correct onboarding pattern,
• How to design an onboarding process,
• How to improve an existing onboarding UX, and
• Best practices and examples of onboarding UX

What is onboarding UX?

User onboarding UX or onboarding user experience is a process that starts the moment a user steps into your website, app, tool, or digital product. This process, with the user interface and the overall app experience, is the first step that will determine your relationship with your user, and it also plays a role in the overall customer experience, user retention rates, and customer lifetime value.

Now, while onboarding UX certainly is crucial for customer acquisition and retention rates, we should keep one thing in mind.

👉 User Onboarding is not just about providing users with guides and tutorials; it is more. By creating a seamless product onboarding experience, especially for first-time users, you ensure the users can and will have an error-free product experience.

An onboarding experience with:

✅ A warm and friendly welcome,

✅ Easy navigation, and

✅ A good explanation of product value

Is ideal for any SaaS company.

Of course, there is room for change according to the specifics of each brand and product, but that’s up to your interpretation of the onboarding process.

Why is onboarding important for UX?

Then again, one cannot help but wonder why onboarding UX matters so much.

The answer is simple:

First impression.

I am not saying judging a book by its cover is okay. But sometimes we just end up doing it, and you should be prepared for that.

The truth is, a SaaS company’s approach to customer support and sales is crystal clear in the way they onboard their users.

Pick up the clues, people:

👉 No in-app tutorials? Lazy customer support.

👉 Non-skippable guides? Pushy sales team.

👉 Too many hotspots? Confused product team.

Jokes aside, there is solid evidence that onboarding UX highly affects the rest of the customer journey.

Here are some stats:

• 63% of customers report that the onboarding experience affects their decisions on making a purchase.

• 80% of users say they deleted an app because they didn’t know how to use it.

• 86% of users say that they would keep buying from companies that employ welcoming and educational onboarding after purchasing.

So, now you know that you need that flawless onboarding UX that matches your brand perfectly...

Let’s talk a little bit about onboarding UX patterns and how to choose the right one for your use case.

Onboarding UX Patterns 

Now, I am no product manager or UX developer, but I sure do know how UX works.

And if you asked me what I know exactly, the first thing I say would be this:

👉 Every product needs a different onboarding UX.

You cannot onboard Witcher 3 players with videos because it is a game, and it has to be interactive.

Likewise, guides may not be quite right when onboarding for a simple, one-page website. That’s why we have onboarding UX patterns.

“What is an onboarding UX pattern, though?” I hear you ask. Well…

What is an onboarding UX pattern?

An onboarding UX pattern is a specific method or type of UX design that designers use according to the type and use case of a product, as well as the specific needs of users. Walkthroughs, hotspots, and guides are all different types of UX patterns designed according to these criteria. In fact, it is safe to say that any user interface design that is designed to onboard users can be considered an onboarding UX pattern.

As SaaS people, even though we might not be part of the design process, we are in direct contact with UX patterns every day, one way or another.

Most of the time, we are onboarded and directed by them without even realizing it. So, now let’s get a bit more aware of them and talk about some main types of onboarding UX patterns.

Types of Onboarding UX Patterns

So, user experiences like guides and welcome tours are all onboarding UX patterns; we get it.

But what if we were to categorize these patterns properly?

According to our product team, there are 2 main categories of onboarding UX patterns:

Tour onboarding and contextual onboarding.

1- Tour onboarding

Tour onboarding is one of the main types of onboarding UX patterns that usually takes place in the initial onboarding; from product tours and product walkthroughs to interactive guides for updates, there are many onboarding UX patterns under this category.

Why use tour onboarding UX patterns?

Tour onboarding is possibly the best way of onboarding new users who are clueless about using your product.

This type of onboarding often utilizes checklists and progress bars to eliminate the bias toward the lengthy nature of the pattern.

Pros

• The ability to fully onboard active users and reinforce full product adoption 
• The ability to impact user behavior by introducing and promoting less-used product features
• The ability to leave a good impression quickly for higher customer success

Cons

• Stigmatized for its length
• Possibility of getting skipped higher
• Annoying for existing users who are coming back

2- Contextual Onboarding

Contextual onboarding is all about segmentation, place, and time – basically, context.

While tour onboarding has a broader scope over the product, contextual onboarding focuses on specific areas.

You might need a contextual onboarding pattern when onboarding users to a new feature, reminding them of a shortcut, or just announcing an update or campaign.

Tooltips, hotspots, and pop-ups are all contextual onboarding patterns.

Why use contextual onboarding UX patterns?

A tour onboarding UX has the potential to offer a fully hand-held walkthrough, but it may be too excessive sometimes.

That’s when you know you need contextual onboarding.

Hotspots and tooltips are perfect for small details you couldn’t fit in your initial product tour, while pop-ups are the way to go for an announcement.

Pros

• Helpful and usually fun for users in the beginner to intermediate stage of the user journey
• Good for getting users to use more features & overall feature adoption
• Can be used as initial onboarding for users who skipped the tour

Cons

• Might be annoying (especially pop-ups)
• Limited space for extended content

When to use which type?

It is pretty clear when to use a tour onboarding pattern or a contextual one by their definitions

However, choosing between sub-categories like guides and tours or hotspots and pop-ups might be challenging.

When you find yourself in such a situation, ask yourself these 3 questions:

❓ What is the content?

While choosing an onboarding UX pattern, the content you will offer through the pattern is of top priority.

You can’t just go on and design the initial onboarding for a complex product with hotspots. Likewise, a whole product tour for a more straightforward product is just unnecessary and pointlessly intimidating.

It is important that you consider your goal in creating a pattern in the first place. Don’t overdo it, or worse, underdo it.

❓Who will see this pattern?

The audience or the segment of users who will experience the pattern is also an important criterion.

While it is possible to tailor your onboarding UX pattern in such a way that will make it visible to only some of your users, it is still up to you to decide which one would match them best.

For example, in a scenario where you have to choose between a hotspot and a tooltip, the best thing you can do is to see which segment the pattern is for.

While a beginner might need a hotspot, it can be too annoying for an older customer.

👉 When in doubt, go with the most user-friendly option.

If the UX pattern isn’t for individual segments but for all users, the least you can do is use understandable language and a clear CTA.

❓When does it show up?

An onboarding UX pattern showing up at the wrong time is a recipe for disaster.

That’s precisely why you should consider just when the UX pattern will be triggered when choosing between options.

For example, the initial onboarding tool can never start too late, and it is just too annoying when a pop-up pops up when you have urgent business.

👉 Never underestimate the psychology of timing. One timing mistake is enough to put off even the most loyal customers.

How to design an effective onboarding UX?

So now you know what onboarding UX is, why it matters, and what types of UX patterns there are.

It’s time to get down to the real deal.

How does one design an onboarding UX and nail it?

A successful onboarding UX is no miracle.

In fact, once you know your users well and test the UX often, it is pretty doable. The trick is to follow the right steps.

Of course, steps to a good UX design differ drastically from sector to sector, company to company, and even goal to goal.

Still, it’s possible to come up with a general guideline.

So, let’s dive into it.

1- Determine user needs and expectations

Who are you trying to onboard?

Users.

So, naturally, it is no mystery that you should be looking into user needs and expectations.

Although they are not aware of them, users have many needs when they first step into your website/app/product.

👉 One of the major problems when determining user needs is that sometimes these needs and expectations can only be identified in the absence of a good onboarding UX design that answers these needs and expectations.

That’s why onboarding UX patterns are constantly redesigned and improved.

If you are redesigning an existing onboarding UX, determining user needs and expectations isn’t hard. You can conduct data analysis, have interviews with users, or simply use a customer satisfaction or NPS survey.

But if you are starting from scratch with your onboarding UX design, chances are you have no actual data. At times like this, you can:

• Conduct a market research
• Look into case studies from similar products
• Get in touch with existing customers through interviews or potential customers on user forums

Look for solutions in either one of these options, or just take a lucky guess; make sure to determine customer needs before you start your onboarding UX design.

2- Draw out a user journey

Just as an artist draws an outline, UX designers have to draw a journey map to make sure every onboarding goal is achieved, and there is no setback in the plan.

This journey map may include different goals and user personas for different onboarding processes, but it is still possible to draw a rough picture of how journey map creation works.

🧩 Deciding the range and persona

To create a proper user journey map, you should know where exactly the journey takes place.

After all, it is a map.

For example, the onboarding UX might cover the whole product, one page of a website, or simply only one feature of the product.

Then it is time to decide on a user persona, which is a crucial part of any user journey map.

It is typical for a user journey to revolve around a user persona, and that is exactly why you need to start onboarding UX design with user research.

Using the data from the initial research, designers can create a user persona that represents the audience.

🧩 Counting in the user needs, expectations, and intentions

You have a map range and a persona, but that is not the only use case of your initial user research.

Ideal user research delves deep into user needs, expectations, and intentions, and these are all factors that need to be factored into the journey map.

One thing often overlooked in this step is how the user might be feeling about each part of the onboarding process.

Wonder why annoying onboarding processes are annoying?

Because they don’t consider user feelings.

We have feelings too, you know?

🧩 Listing touchpoints

Once you know where the onboarding takes place and everything you need to know about your users, it is time to start creating the onboarding process with its main touchpoints.

These touchpoints are ideally aligned in a manner that also shows the emotions of the user.

For example, look at this user journey map template ⬇️

After these steps (and some more extra steps differing in different scenarios) you have a user journey map you can use for your onboarding UX.

3- Consider mobile and web-based options

Any UX designer with experience would know that onboarding UX works quite differently on mobile and the web.

Of course, principally, they both serve the same purpose.

However, technically there are differences, and you might want to consider building UX for either one of them or both of them if you have the resources.

If you really need mobile and web-based options, what really matters is that you can nail both.

Look at Duolingo’s web and mobile app onboarding UX, for example ⬇️

The quality for both onboarding UX is top-tier, and you don’t feel like missing out when you choose between the options.

❓Why design mobile app onboarding?

Although mobile apps feel easier to navigate and learn now that we are all zombies with a glowing screen, the technicalities and how each flow works may be different in mobile onboarding UX.

While the small screen can be a hindrance, the flexible nature of mobile apps can be used as an advantage.

❓Why use web-based onboarding?

In the professional world, the type of onboarding we all are used to is web-based onboarding.

With innovative solutions like Slack and many other originally web-based tools following them, we seem to have focused away from web-based onboarding.

But of course, this is not the case.

Web-based onboarding has just started getting better 💪

Just 10 years ago, we were still trying to read through user manuals.

Go back 5 years, and we would be walking around in knowledge base labyrinths just to figure out how to use a tool feature.

But today, web-based user education is better than ever, with a historical peak in user satisfaction.

“Wait, but what exactly is new? What changed?“

Everything.

✅ Guided tours that hand-hold users in product tours are changing the game.

✅ Interactive walkthroughs and guides are the future of user onboarding.

✅ User onboarding checklists are solid gamification and user engagement methods for better product experiences.

✅ Tooltips, hotspots, in-app messages are making the process more proactive than ever.

✅ NPS Surveys are just right to check your users’ satisfaction.

✅ Resource centers are there to navigate users through articles and guides – without leaving the main page.

“And where can I find all these?” Right here, at UserGuiding user onboarding tool.

👉Try UserGuiding for FREE 👈

4- Perfect the final design

After choosing the medium for your onboarding UX and unseeing a few steps that might differ from project to project, you pretty much have a finished design.

At this point, all you need is a bit of polishing and a few final touches.

👉 Before going live with the onboarding UX, our product team recommends going over the customer journey map one last time to make sure there is no unsolved issue.

5- Conduct user testing

User testing is a step that can be placed at any other position on the list, thanks to all the different types of user testing methods.

This step is for detecting problems on the onboarding UX and improving them.

When testing users with your product prototype or final design, the first thing you want to do is determine objectives. For example, you might want to see:

• How long it takes to finish the onboarding
• What is the mental and emotional state of the user
• If the user reaches the end goals easily
• If there are any suggestions for improving the onboarding UX

Then, depending on the size of the project and your budget for it, it is time to choose a testing method.

🧩 Essential types of user testing

User interviews – with this type of user testing, designers can get anyone to use the product and get onboarded. The interviews are individual, and therefore there is an error margin for the lack of a lab environment.

A/B testing – in A/B testing, users are shown two different versions of an onboarding UX, and the better one is used while liked parts of the other version can be added to the better version.

Remote usability testing – just like in user interviews, remote usability testing takes place out of a lab environment and can be moderated or unmoderated. It can be used for cost-efficiency reasons.

Guerilla testing – Also a good method for user testing on a budget, guerilla testing is picking random people to try out the product in any location. The users might receive a small prize for their contribution; thus, it is a popular method for startups.

Eye movement tracking – a more specific and detail-oriented method, eye movement tracking uses tools to track where the users mostly look at during the onboarding process.

After conducting the user testing, all that’s left is analyzing the data.

Since the user is the most important variant of the onboarding process, this step might play an important role in the whole onboarding UX design, so it is advised that user tests are conducted in as bigger groups as possible, and ideally more than once during the design phase.

How do you improve your onboarding process in UX?

“I now know how to build an onboarding UX, thanks, bye.” might be what you are thinking right now.

But let me tell you, both onboarding and UX are always changing, – both on the level of industry and the level of the company.

Bring them together, and you have a never-ending cycle of updates and improvements.

Fun, right? 🤩

Chances are you will either be unsatisfied with the onboarding success rates compared to your expectations from the user journey map, or you will do better than your expectations and start looking for even better ways of onboarding UX design.

In either case, we got you.

Let’s talk about what you can and should do to improve your existing onboarding UX.

1- Reduce the Cognitive Load

According to our product team, the worst thing you can do in an onboarding process is putting too much cognitive load on your users.

“But what exactly do you mean by cognitive load?”, I hear you ask.

Cognitive load refers to the cognitive load theory by John Sweller, and it means the amount of information your brain takes on at a time.

👉 According to this theory, there are three types of cognitive loads:

Intrinsic, extraneous, and germane.

1- Intrinsic Cognitive Load

Intrinsic cognitive load refers to the existing learning difficulty of a given concept.

For example, understanding 2+2 and understanding how coding works are two different things with different difficulties.

However, just because something is innately more difficult to understand doesn’t mean you can’t make it easier.

And that is our primary goal when designing an onboarding process.

2- Extraneous Cognitive Load

When you make something way harder to understand than it needs to be, you create an extraneous cognitive load.

This, of course, results in more irritation and less user engagement.

Don’t talk about what an apple is when you can just show it.

3- Germane Cognitive Load

Germane cognitive load is one’s own effort and willingness to understand new skills and concepts.

So, it all boils down to the willingness of the users. However, getting users eager to learn is another trick you can achieve through good onboarding UX.

👉 To guarantee less cognitive load, you need to minimize the extraneous load, maximize the germane load, and manage the intrinsic load. This means getting rid of unnecessary information, increasing users’ willingness to learn, and making sure nothing is more complex than it needs to be.

2- Analyze the data – then go deeper

If the onboarding UX isn’t onboarding the numbers you thought it would, there might be a problem with the onboarding UX.

And the best way to identify it is by looking at some data.

Now what I mean is not necessarily user testing.

User testing can and should be conducted before and after launch.

Still, before you go all-in on that one, there are other ways to try and capture what exactly might be going on in the onboarding process, such as machine learning and analytics tools.

You should be looking into:

• How long it takes for a user to complete a tour or guide,
• How long it takes for a user to interact with a pop-up
• Whether users interact with hotspots or not
• Which UX patterns are triggered and which are not

These are just a few examples of what you can do with a bit of data science.

Once you answer these questions, the answer will start to take shape in your head. Moreover, you might get extra insight into how to improve the UX on top of how to solve problems.

3- Stop forcing it down their throats

Remember when I said that our product team says too much cognitive load is the worst?

Well, to me, a forced guide is even worse 👎 

Thankfully, SaaS companies are starting to get rid of that hellbent UX pattern, ass well as something else that might surprise you:

Product tours.

At some point, a genius UX designer must have realized that, well, we don’t care about the whole product.

That’s why more and more apps and websites are employing skippable, bitesize UX patterns, and that is the best UX news of the decade.

Look at this adorable little checklist, for example ⬇️

4- Think like the user

One of our product designers Selcen Kökcü once told me:

“Onboarding is like a pedestrian crossing. The users can see how much time is left on the traffic light and walk across the lines on the floor. Take out the traffic light, and they don’t know how much time is left; they might panic and end up just standing there. Take out the lines on the floor, and they won’t know where to cross the road.”

Selcen Kökçü, Product Designer, UserGuiding

The point is, you don’t want your users getting in car accidents.

So understand that you need both the traffic lights, a time indicator, and the lines on the floor, something to direct them where they should be headed.

5- Go back to Square One

After everything, something’s still not quite clicking?

Go back to the very beginning.

If things didn’t turn out as you expected from your initial journey map, or maybe it all worked too fine, what you want to do is go back and check where you made a mistake or where you made a successful decision.

That is the only way of resolving it or preserving it once and for all.

Since the user journey map is the most organized piece of information you have, you might want to revisit it.

But be warned; sometimes problems may be originating from a wrong or inadequate understanding of user needs and expectations.

You might have to redesign the whole onboarding UX or just unclog a couple of problems, but it is for sure that the best place to look for problems in the final design is often the very beginning.

3 Onboarding UX Best Practices and Examples

Remember how I said you could get rid of extraneous cognitive load by just showing instead of telling?

Well, it is time to get rid of all that load.

Without further ado, let’s look at some great examples and best practices of successful onboarding UX.

1- Slack

A fan favorite and an excellent start for any onboarding UX list, first up, we have Slack.

With its always initiative and user-friendly onboarding, Slack does it just right for a team communication tool. Take a look.

Slack’s onboarding UX features a big “welcome”, with just the right amount of friendliness in font and punto.

Then, there is a button to start the onboarding process, which I find genius since some of us just don’t want to start right away only to lose all the information when it ends.

Yet, probably the best part is the “skip tutorial” button for users familiar with the product.

To top it all, you can end the tutorial at any moment and skip pop-ups as well. You don’t have to go through an Ikea nightmare with Slack.

Let’s not forget the Slackbot.

The onboarding starts after interacting with it and continues with his guidance. A great personal touch for a more hand-held feel.

And lastly, Slack is the best at using blank slates.

By adding a quick tip, information, or even a joke, the UX is made way more personal and friendlier.

Best Practices ✍️ 

• Don’t forget to welcome your users
• Let users start the tour themselves
• Don’t force users to take the tour
• Make it feel as hand-held as possible; bots can be a good option
• Blank slates are great for indirect onboarding and getting users to use new features

Check out our in-depth Slack UX breakdown here 👈

2- Notion

one of my favorite tools ever, and their approach to UX and onboarding plays an important role in that.

Both in sign-up onboarding and in-app onboarding, Notion is as straightforward and fun as can be.

Let’s look at it.

When signing up, Notion follows a 4-step process that only takes a few minutes and a few clicks.

You can always hover over the hotspots for more information.

Apart from the in-app hotspots that handle some of the onboarding processes for new users of the working space, Notion also introduces newcomers to a private page to get used to the features – in a checklist pattern too!

Best Practices ✍️ 

• Keep the initial sign-up process short and let the users know it is short
• To keep things minimal, utilize hotspots – during the sign-up process and in-app
• Let the users work in a sandbox environment if your product lets it
• Checklists don’t have to be in conventional patterns; you can use them on a blank page too

3- ClickUp

among the best options if you are looking for a team management tool, but we are here to talk about its immaculate onboarding UX patterns today.

So let’s get to it.

My initial onboarding to ClickUp was among my favorites because ClickUp not only uses checklists but also utilizes video tutorials since it is a lot harder for ClickUp to create a sandbox environment.

Not only that, but they also indicate how many minutes each step take.

In a matter of 7 minutes, you are good to go.

Since ClickUp doesn’t try to onboard you on all of its tens of key features, the rest of the features are often presented to the users as tooltips.

What’s really fun about these tools is that they often show a tiny gif to make sure you know what you can do with the feature.

Best Practices ✍️ 

• Depending on your product, you can opt for a video tutorial and still present it in a checklist pattern
• Progress and time indicators, even in the simplest form, are crucial to keeping your users engaged
• You don’t have to show all the features at one go, you can use tooltips to educate users as they use more parts of the product
• If you cannot offer full interactivity, gifs work just as well

To Wrap Up

Onboarding UX requires endless research efforts, analyses, and design updates regularly.

Still, if you manage to come up with a working design, the rest is improvements and additions. Nothing you can’t handle after you have reached the conclusion of this article.

Remember, onboarding UX is a pedestrian crossing.

If you don’t design it with the utmost care, your users might never get across it. Keep them safe and happy!

‍