The Only Onboarding UX Resource You’ll Need In 2023 [Guide]

The Only Onboarding UX Resource You'll Ever Need

No matter how good your product looks, it won’t be revolutionary unless the onboarding experience captures users’ attention and immediately shows the value that you provide. Softletter’s SaaS University Reports show that as many as 75% of the users who sign up for a free trial don’t convert into paying customers. The good news is that you can reduce that number through an engaging onboarding UX that demonstrates the value of the product. You literally have the first five minutes to leave the user with an exceptional impression that will make them hungry for more.

What is onboarding UX?

As Tom Browne of Mdevelopers.com, a senior SaaS product designer, put it: “Onboarding UX uses psychology to understand users’ goals and motivations so you can design an experience that helps them to see how the product meets their needs. The goal is to keep them moving along the customer journey and to increase the chances of converting them into paying customers.”

This pretty much sums up what onboarding UX stands for.

Before we keep moving, let’s take a look at what makes a good product. Justin Jackson from transistor.fm explains it beautifully:

Onboarding UX

Crafting an engaging onboarding UX requires marketers, product managers, designers, web creators, and even customer success teams to work together to deliver value and to push the users towards an “aha moment”.

What are the benefits of an engaging onboarding UX?

Customer satisfaction

There are already thousands of SaaS products, and the marketplace is becoming more competitive every day. You can see the growth in action in the image below, which shows how much more competitive the marketing technology SaaS landscape has become. And that’s just one vertical!

SaaS landscape

This means that the end-user has more choices and alternatives than ever before. So how do you drive customer satisfaction to encourage brand loyalty? If the onboarding is solid then it helps users to get results and leads to positive outcomes. This directly improves customer satisfaction, and it all starts with a great onboarding experience.

Conversion rate

Remember, 75% of customers won’t buy your product if you don’t have a great onboarding UX.

One of the best ways to improve your conversion and activation rate is to focus on your onboarding.

In fact, Rob Walling from Drip doubled his conversion rate simply by improving his onboarding UX

Retention rate

According to Patrick Campbell, the CEO of ProfitWell, Churn is the silent killer of your company, and if you don’t tackle churn early, you’ll end up working too much just to stand still. Better onboarding UX will increase your retention rate and decrease your churn rate. You can find out more about this by reading Patrick’s ideas on how a great onboarding UX will help you to retain customers.

Fewer support Questions

Simplified, engaging and easily digestible onboarding can lead to significant reductions in the number of support tickets you receive. Userpilot customers have confirmed that installing our app as part of their onboarding process reduced support tickets and duplicate questions.

How do you create a persona-based onboarding UX?

Is your app used by different stakeholders and departments? When this happens, it’s important to remember that people have different job roles and designations and that each person uses software differently for different needs and use cases.

For example, a collaboration tool like Slack will attract a wider variety of users than tools like InVision or Sketch App, which are geared towards designers.

If your product attracts different types of users, you should segment customers to personalize their onboarding experience as much as possible. Try collecting more user information during the sign-up process to make segmentation easier.

<span “>

This is an example of identifying the user persona and segmentation.

This how Airtable segments personas:

<span “>

Once you’ve identified “who” the user is, creating an engaging onboarding UX becomes much easier.

What are the common mistakes when it comes to onboarding UX?

There are hundreds of mistakes that people make when creating an onboarding UX, but some of the most common include:

Thinking all users are the same

If you start out with the assumption that each user has a standard query, problem, or unmet need, the onboarding UX is doomed to fail.

For example, CRMs are used differently by the following personas:

  • Head of Sales: Uses it to analyze performance.
  • Sales Development Representative: Uses it to log leads and to store data.
  • Marketing Operations Manager: Uses it to log marketing qualified leads (MQLs) for newsletter subscriptions

Now imagine that you show the exact same features (such as “import contacts”, “create a campaign” and “send email”) to all of them. Will it work?

Too much friction

This happens when you put your own needs ahead of your users’ needs. Every friction point reduces the chances that a user will complete the process. After signing up for 200+ SaaS companies, we discovered that around 40% of companies think about themselves ahead of their users.

Your goal should be for users to move forward and to provide their phone number so that you can follow up with them if they don’t convert. Say no to lengthy forms and ugly verification codes like the one shown in the image below.

<span “>

Lack of support in the early stages

Once a user sign ups to your service, they’ll still need support in the form of the following:

  1. A clear explanation on how to use your software
  2. Information on how the software will impact their workflow
  3. Ongoing support when a new hire is using your software
  4. Training when a new employee joins the team and starts using the software

Setting the right expectations will help users to understand the software’s value and how to use it. At the same time, the customer needs to know that you’re always there to help. Providing great customer support and creating customer delight will become your key differentiator. Alore.io figured this out when they launched in a crowded marketplace.

Failure to deliver value in the long term

One of the key problems we see is that software companies take too much time to show the value. The “aha moment” comes very late, when it should be delivered as soon as possible. Even worse is their failure to continue delivering value over longer periods of time.

You can solve a customer’s problem now, but you need to find ways to continue solving their problems over time. Intercom suggests that product education plays a critical role in the user journey and that you should use that to overcome the failure to deliver value. They use a CARE model (Convert-Activate-Retain-Expand) to show long-term value, as shown below.

<span “>Intercom Onboarding UX

To expand your onboarding experience, when the user has explored key features, you could show different use cases based on the page event and mouse event. For example, making use of the search bar if you have one.

Brute forcing the tooltips/interactive tour

A lot of companies have started using tooltips in their onboarding. It’s good to have an onboarding tour, but we find that users often click the buttons without learning anything about your software. That’s why instead of brute-forcing it, you should try to wait for the user to take an action.

<span “>

Failing to celebrate success

This one is by Samuel Hulick, the user onboarding expert, who says that many companies fail to celebrate success. He says:

It feels great to cross out an item on a to-do list, doesn’t it? Now think of how satisfying it is to knock everything off the to-do list, crumple up the entire completed list, throw it in the trash can, and look up into the skies in a super hero pose! Why not let your users experience the same thing when they get to their first quick win?

I find it odd that in many cases, when a user defies the odds and makes it all the way to logging their first real victory in someone’s app, the company isn’t there to celebrate. The moment a user completes an important task is a great opportunity for you to forge a positive emotional connection between them and your company.

Let your users know that they are doing great by acknowledging their progress and giving them a figurative high-five!

I call these design opportunities “success states,” and I see opportunities for them all over. Get ahead of the curve by finding the “fist pump” moments in your own UX and crafting something that makes them concrete. They don’t have to be grandiose gestures, either—even a well-timed “Nice job!” can do wonders.

Disappearing after implementation

Don’t stop at the point of implementation. Just because you got the sale, it doesn’t mean that the job is over. Once you’ve successfully helped a customer to use your product, you should follow up to see if they need anything else to help them to be successful.

If you can access their account, check the analytics to see how they’re interacting with your software. This can set the tone for how often, when, and with what information you need to follow up.

What are some best practices to follow for an engaging onboarding UX?

Here are just a few of the best practices to know you need to consider if you want to create an engaging Onboarding UX:

Onboarding UX best practice #1: Choose a specific end goal

Add social accounts to Postfity - Userpilot tooltip

What does success look like for your users? For example, for a social media management tool, connecting the social profiles is an activation point and is, therefore, a success. Creating the first two campaigns through those profiles could be a further success. Define an end goal (such as “activation” or “feature adoption”) and help your users to celebrate them.

Connect your social accounts goal

Onboarding UX best practice #2: Start with the right type of onboarding

There are five main types of onboarding, and you can focus on any of them depending upon your app’s functionalities and values. The different approaches include:

Benefit-Focused: Explains the 2-3 core benefits and how to achieve those benefits via the site/product/app.

Function-Focused: Explains the 2-3 core functions of the site/product/app and how to use them.

Doing-Focused: Walks the user through the first or most common actions.

Account-Focused: Walks the user through the account/profile creation process, including finding and adding friends or interests.

All: For particularly complex sites/products/apps, it may be necessary to combine one or more of the other onboarding approaches.

Onboarding UX best practice #3: Break your onboarding into smaller steps

Don’t overwhelm the user with too many tasks. Focus on the two or three features that will help the user to understand the “aha moment” or “magic moment” and focus on them.

For example, for FunnelCRM, it is all about creating a form and creating a deal:

<span “>funnel crm onboarding ux

Editor’s note: If you’d like to dive deeper into the topic of user onboarding best practices, I’d highly recommend this article.

Onboarding UX best practice #4: Measure and understand the user journey

Once you’ve created a user onboarding UX, you need to understand drop-out rate and engagement rate. This will help you to figure out how to further drive engagement. You should also check whether your initial goals are being met or not.

How do you choose an Onboarding UX pattern?

There’s no one-size-fits-all method. If you’re having design problems, you can find the solution on Google or hire a professional designer, but when it comes to choosing an onboarding UX pattern, it gets a little more difficult.

There are three different Onboarding UX patterns:

Annotated: Overlaid product commentary

Embedded: Co-mingled with the actual product experience

Dedicated: Isolated and distraction-free

Annotated: Tooltips or coach marks

The annotated UX pattern typically consists of tooltips and/or coach marks. Both are widely used, but users often automatically ignore them. Still, they do at least point users in the right direction.

Example of Coach Mark

Embedded: Provide broad guidance and context

Embedded UX patterns often use popups, slide-outs and alert banners. These are great for providing context, but users often find them annoying. Embedded patterns are perfect for announcements, product changes and for feedback.

<span “>

The above is a popup from storychief.io

Dedicated: Capture data and build motivation

The dedicated approach is mostly used for welcome and lead pages. Slack does a great job of this, as you can see in the screenshot below. It works well when capturing data and building motivation to use your software.

Slack Onboarding UX

How do you apply psychology to onboarding UX?

Applying psychology will improve your activation and help the user to finish steps/tasks inside your app. Here are just a few of the different ways that you can apply psychology:

Influence

Use social proof (the phenomenon where we trust friends’ recommendations more than what brands say about themselves) to encourage users to sign up.

<span “>

ProveSource gives you this powerful feature to show how many people are using/signing up for your services.

Another way of tapping into influence is by using testimonials on your account creation page.

<span “>

Account Creation Page Influence

Goal gradient effect

Making progress towards a goal can encourage people to engage more than they might have done otherwise. Even the illusion of progress will work, so make sure that users feel as though they’re accomplishing things.

Quora’s Goal Gradient Effect

Give fewer options

Brian Schwartz explains the paradox of choice in his book on the subject and suggests that we should be more prescriptive with the choices we offer users.

HelloBar does it by giving only three choices.

Focus on uncompleted tasks

Human brains focus more on uncompleted tasks than on completed ones. Whether it’s a waiter recalling a long order, a meaningful consumer transaction or a cliffhanger on Netflix, tasks occupy our minds until they’re complete. This is called the Zeigarnik effect.

StoryChief‘s Onboarding UX is a good example of a brand tapping into the Zeigarnik Effect.

StoryChief’s zeigarnik effect example

Understanding the human brain works wonders if you want to have a perfectly engaging onboarding UX. This is how psychology and your onboarding UX come together.

How do you test the onboarding UX?

Onboarding UX testing is critical to your user onboarding process. If there are problems with the onboarding, you’ll lose users and money.

There are hundreds of ways to test Onboarding UX. We recommend the following:

    • Guerrilla usability test: The idea here is to ask the general public. It’s defined as “the art of pouncing on lone people…[and] filming them whilst they use a website for a couple of minutes.”
    • Use drunk test: Richard Littauer gets drunk and provide feedback on your website. You could hire Richard, or you could just invite a few friends over for a few beers and then get your feedback.
    • User recording tools: Tools like Fullstory, Livesession and Smartlook help you to observe users’ actual behavior. They capture the whole session and allow you to use replays to see where users click and where they drop out.
  • Onsite customer feedback: Customer feedback is the most essential type of feedback and can never be replaced. We recommend hosting an onsite customer feedback session so that you can watch real customers and see how they interact with your website. Churned customers can also provide valuable feedback about why your product failed to provide the value they were looking for.

What tools do you use to create an onboarding UX?

There’s no shortage of tools out there that are designed to help you to improve your onboarding process. There are specific tools for specific tasks and more general multi-purpose tools. Here are just a few of the main onboarding tools that we recommend:

  • Hotjar: Helps you to collect feedback, check funnels and heatmaps and to record the way people are using your site.
  • Userpilot: Helping you creating onboarding at scale with popup modals, tooltips, driven actions, slide outs and checklists. It also helps you to study the net promoter score and to collect feedback from real customers.

NPS Userpilot

  • Drip.com: Designed to help you to develop a smooth email onboarding sequence.
  • Fullstory: Another excellent tool for understanding page insights and viewing clickmaps.
  • Mixpanel: Mixpanel will give you product usage analytics and help you to understand what’s causing visitors to drop out.

To dive deeper, we recommend Userpilot so you can understand user onboarding, user adoption and feature adoption. We help to create tooltips, modals, hotpsots and checklists based on your users’ in-app behavior.

How do you optimize an onboarding UX?

Here are just a few tips to help you to optimize your onboarding UX. Be sure to carry out tests and to track the impact that these have on your conversion rates and to adjust accordingly.

1 – Make it uniform: Uniformity is key. The application’s design, content and tone should be uniform across the board. Userpilot allows you to customize any element of your onboarding modals’ interface – through an editor, or custom CSS.

tooltip edition userpilot

2 – Make it predictable: Creating predictable design and content might sound simple, but it requires a lot of end user understanding. By predictability, we’re talking about providing a goal and then walking users through a key user journey, an important feature, or the first level of your game.

3 – Optimize your emails: Keep checking and optimizing your emails, their subject lines, their content and their calls-to-action. Check out Val Gieseler’s blog to learn more about the crucial mistakes that SaaS companies make during onboarding.

4 – Measure: Use smart goals to measure your onboarding UX. Once you have a goal, try to improve it. For example, measure if a feature is being adopted due to a good onboarding. Measure your activation, conversion and retention rates if they improve. Like, In Userpilot we give opportunities to see how many people saw the flows, how many clicked, how many completed it and how many achieved the goals (adopting a feature).

5 – Resolve issues: Offer one-on-one conversations to resolve issues if users are having any problems.

6 – Reminders: Remind users to complete your tutorials.

7 – Perform analytics and A/B tests: We all tend to make mistakes. We need to learn from those mistakes and to quickly resolve them.

8 – Test: Test everything and introduce designs and journeys to limited users over time.

9 – Rinse and repeat: Iterate the designs and see what works and what doesn’t.

What’s next?

Building an engaging onboarding UX is a challenge, and it’s the primary reason for high churn rates after users sign up for a free trial.

Once you’ve nailed onboarding UX practices, avoided the common mistakes, picked the right patterns, applied the psychology, measured and optimized, you’ll be in a good place. Then your drop-off rate after free trials will reduce significantly. The only question is, which Onboarding UX strategy are you going to apply? Be sure to let us know. And if you need a hand – we’re here to help.

 

previous post next post

Comments

  • reply
    Gohar
    Posted on February 26, 2019
    This is gold. Thanks for sharing this.

Leave a comment