Are you familiar with the user experience quote, “User interface is like a joke. If you have to explain it, it’s not that good.”? While clever, that statement is far from true.
User interfaces shouldn’t be complicated, but you can’t expect a new user to understand a new interface without any sort of direction. Similarly, you can’t expect an existing user to understand an updated interface or a new feature without any sort of direction.
That’s where user onboarding comes into play. Proper user onboarding leads to more money in the bank. It’s a familiar concept for most, yet user onboarding flows are often created during development and forgotten about.
They deserve innovation, experimentation and optimization, too. You might be surprised by the ROI.
Types of User Onboarding Flows (and Why They Matter)
There are two different types of user onboarding flows: mobile and desktop. Mobile user onboarding flows introduce you to a game, a productivity app, a banking app, etc. Desktop user onboarding flows introduce you to a task management tool, a conversion research SaaS, etc.
5 Ways to Onboard New Users
There are also different subtypes depending on how you are onboarded.
Benefit-Focused: Explains the 2-3 core benefits and how to achieve that benefit 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 the four above.
The onboarding type is clearly dependent upon the medium, but the five subtypes are all viable options. It comes down to how much information your new users need to get to the core value, how easy it is to discover the core value organically and how “new” the core value is.
2 Popular User Onboarding Myths
Despite popular belief, user onboarding does not begin and end with the first experience. There are three stages of user onboarding…
Before: The sign up / registration phase. How friendly is your form?
During: The initial user onboarding flow that most people consider “user onboarding”.
After: All other stages of the customer lifecycle. How can you help existing users understand new features?
Another common misconception is that onboarding email flows and on-site / in-app onboarding flows are to be kept separate. The two should complement one another, working together to bring the user to the core value as quickly as possible. On their own, they’re rarely successful.
Questions to Ask Yourself Before Designing a User Onboarding Flow
Before you choose a type of onboarding flow, you have to ask yourself a few questions…
What’s the core value you’re trying to deliver to your users?
What steps do new users need to take to receive that core value?
What friction might exist within those steps?
What actions do long-lasting users take? How can you encourage new users to take them?
How familiar are your new users with similar products?
How easy is it to understand your core benefits / functions?
Nate Munger from Intercom explains why the answers to these questions are important…
Nate Munger, Intercom:
“Some new users expect you to welcome them and show them around the place, while others prefer you to get out of their way as soon as possible and let them figure things out for themselves. The problem is that in order to be a top site with tens or even hundreds of millions of active users, you’re going to have to successfully onboard customers from across this spectrum. On top of that, users don’t necessarily want to do the things you need them to do in order to be successful. You need to balance the user experience of onboarding with the friction of necessary steps such as account creation, user education, and data gathering. No small challenge.” (via Intercom)
There is no “right” or “perfect” user onboarding flow. What works for one site / product / app might not work for another. In fact, that works for one of your users might not work for another. Designing a user onboarding flow that works for you is complicated. It involves a lot of research, testing and optimization.
For example, you might need to onboard a developer vs. an average user. In that case, the flow will look very different. As Sascha Konietzke said, “Onboarding for API-centric products is very different. Developers don’t want a forced click-through tutorial, they want to use your API right away. Support them with quick start documentation as well as example code and get out of their way as soon as you can.”
While there are no absolutes, Samuel Hulick of UserOnboard.com has some core principles to onboard by…
Samuel Hulick, UserOnboard.com:
“User-centric, not product-centric: Onboarding tends to fall down when it’s just about the software pointing itself out.
Action-oriented, not instructive: Rather than throwing up a bunch of tooltips that I have to remember later, have me learn by doing.
Informed, not reactionary: Are the things you’re having me do highly correlated with me getting value out of the product, or are you just offloading busywork because your design is broken?
Evolving, not fixed: Onboarding isn’t a “feature” but it’s often treated that way. Are you treating it like a quality of your overall experience that evolves along with your product and market, or is it something you ship every couple years?
Holistic, not one-off: Onboarding can take the form of knowledge center docs, blog posts, invitations from a friend, lifecycle emails, a well-timed phone call, etc. Are you focusing on the interface and leaving the rest on the table?” (via Inbound.org)
User Onboarding Tools to Try
Given the number of different ways to onboard a new user, it shouldn’t surprise you to learn that there are a wide variety of user onboarding tools available. Here are just a dozen…
whatfix
Tour My App
The Joyride Kit
Helppier
Walkhub
Appcues
Tutorialize
Inline Manual
Intercom
Evergage
Nickelled
WalkMe
Why Are User Onboarding Flows Important?
When I say “user onboarding”, you likely think of SaaS companies first, right?
According to a 2014 State of SaaS report from Compass, SaaS is a $10B industry in North America. Yet 51% of SaaS startups surveyed were not profitable and only 33% of them expected profitability within the next 6 months.
The same report found that less than 7% of SaaS companies achieve 10K users… ever. And only a little over 25% of SaaS companies with less than 10K users spend money on user acquisition.
So, what does that mean? It means that user retention becomes even more important. If users are not onboarded properly, the chances of retention are minimal.
If you weren’t originally thinking of a SaaS, you were probably thinking of a mobile app.
According to Go-Globe, mobile apps now account for 52% of all time spent on digital media. Why? Perhaps due to personal preference and ease of use…
But they’re not just browsing, they’re converting. For the leading 500 merchants, 42% of all mobile sales generated come from mobile apps. In fact, mobile app revenue for 2016 is estimated at $58 billion.
So, all-in-all, mobile apps can be quite profitable, right? Right… if they’re used more than once. Unfortunately, 20% of mobile apps are not opened after that initial first visit.
What makes an initial first visit memorable? And what makes a user come back again for more? A great user onboarding flow.
How Can You Set User Onboarding Goals?
Here’s a common misconception debunked by Samuel…
Samuel Hulick, UserOnboard.com:
“[…] onboarding isn’t about setting users up, it’s about getting them back. Retention is the trailing indicator and true measure of quality onboarding, so that’s what I’d hold experiments up against.” (via Inbound.org)
A trial-to-paid conversion rate or mobile user-to-customer conversion rate type metric is a good start. It’s close to the revenue, it’s measurable, it’s directly linked to onboarding. However, the true test of a user onboarding flow’s effectiveness is not whether there’s a conversion, it’s whether there’s retention.
Samuel suggests asking yourself whether more people are continuing to log in for longer. If so, your user onboarding flow is successful (but you should continue optimizing). If not, you have some work to do.
A successful user onboarding flow gets new users to perform the tasks that have signalled long-term use in the past. For example, Facebook has a seven friends in ten days metric. The theory is that if a new user adds seven friends in the first ten days, he’ll stick around. (If you’re interested in setting up a goal like this, I highly recommend reading this article from Andrew Chen on how to do so.)
1. ROBIN
ROBIN is an all-in-one eCommerce customer service tool. All-in-one tools are an easy target for user onboarding flow analysis. Since they are typically complex products with many different functionalities, poor onboarding can be detrimental.
You start at the registration page…
From there, you’re actually taken into a mandatory wizard, which guides you through the process of setting up your live chat, integrating your email / social, creating customer service templates, etc.
Note that in the welcome copy, they remind you why you want to use ROBIN in the first place. This is key for the users who would rather just get started right away. The stopwatch also subtly indicates that it will be a short process.
Notice that as you move through the process, the navigation to the left becomes active. At this point, you can see that you are in the “Team” section and have five more sections to complete.
In some cases, there are multiple steps within each section. For example, after completing the “Personal Information” step, you might’ve assumed you were finished with the “Team” section. It’s like a teacher assigning you questions 1-3, but each number also has an A-Z. Frustrating, right? Indicate progress as clearly as possible.
Up until this point, every step has been mandatory. Below, you’ll notice that there’s an “I’ll do this later” option appears…
What’s interesting is that I would assume adding the Javascript to be a high-value action. Without it, the customer service contact tab won’t appear on the user’s site. Yet, this is not a required action.
The “I’ll do this later” options continue…
Here, you’ll see that ROBIN illustrates the email forwarding cycle so that users who are new to customer service tools in general get a complete understanding…
Again, more “I’ll do this later” options…
Above, you’ll see another illustration. Note that these are provided at times of friction. For example, connecting your email and Twitter accounts to a tool you’re unfamiliar with could be seen as a security risk. Questions like, “Will it tweet on my behalf?” and “Will it send emails to my customers?” begin to arise.
Now, in the final section, “Templates”, we’re back to mandatory steps…
If something is not mandatory, don’t include it in a mandatory set up wizard. Instead, suggest it on-screen as the user progresses. There’s nothing wrong with asking for a lot of information… if it’s necessary to move the user closer to your core value.
After the wizard is complete, you’re brought through a simple walkthrough of ROBIN’s core functions…
A demo message is in your inbox and you must open it to send a response…
Note the red dots scattered across the screen. These indicate key functionalities that will be explained, which also serves as a subtle progress bar…
It would be helpful if the red dot within the message itself, which is the step we just walked through, turned green to indicate completion.
Here’s what the rest of the process looks like…
It appears that this is the core function of ROBIN. Ensuring new users understand how to work this interface is paramount, then. Interestingly enough, you are not actually asked to take any of the actions described here, which seems like a logical next step for their onboarding flow.
This user onboarding flow is clearly extensive. A full, mandatory wizard with multiple steps within multiple sections and a mandatory walk through. This raises an interesting question: How much is “too much” when it comes to onboarding?
Samuel has a good rule of thumb…
Samuel Hulick, UserOnboard.com:
“When in doubt, I recommend asking for only the information that’s useful/relevant to the user at that particular time. If you can’t come up with a good reason to look them in the eye and tell them why it’s in their best interest to provide it, it’s probably a very good candidate for leaving on the cutting room floor.” (via Inbound.org)
2. Inbound.org
Inbound.org is self-described as “the internet’s smartest marketing community”. Everything Inbound marketing is discussed there. Needless to say, encouraging a new user to become an active, engaged member of a community is not an easy task.
Here’s where you start…
Email address, password, agreement with a Privacy Policy (that no one will read)… seems pretty straightforward. Immediately after completing the registration form, you’re taken here…
While requiring a Twitter account certainly would help prevent spam, it also makes it easier to grow the community. First of all, Inbound.org knows that many marketers, their target audience, use Twitter to network with their peers. So, the channel selection (vs. Facebook, for example) is strategic. Second, syncing with Twitter makes it easier to recognize friends, follow friends, invite friends, etc.
Nate explains the power of social login in detail…
Nate Munger, Intercom:
“Their 2013 survey on The Value of Social Login says 92% of people have left a website instead of resetting or recovering login information, while 1/3 do so frequently. If your goal is any form of virality, social login is a must, as it increases your Monthly Unique Users (MUU) to Monthly Active Users (MAU), meaning a returning visitor is already in a position to take sharable actions.
Social Login also offers the ability to access and connect to the user’s contacts. A majority of those surveyed (52%) believe that Social Login leads to a better, more personalized online experience. The network effect from creating user accounts with social profiles also has potential upsides for user and revenue growth. According to the same study, 78% of people say they have navigated to a website after seeing it mentioned on their social network, and 72% said they would consider buying a product based on positive recommendations from their friends online.” (via Intercom)
Of course, you must complete the basic (and familiar) social authorization…
From there, you’re taken to a simple profile creation page…
You’ll see that there are only a few fields and that “You can always add more details later.” This is a great demonstration of the “ask for only what you need” principle Samuel describes. However, what would be helpful is if Inbound.org were able to automatically pull in some information (e.g. location) from Twitter itself.
After completing the profile page, you are taken to the home page to begin browsing. That’s it. Three steps and Inbound.org gets out of your way. Except for this clever “Getting Started” box, that is…
You’re likely familiar with this type of onboarding tactic. If you use LinkedIn, you’ve experienced something similar. It’s a gradual onboarding process, which is a much different approach than ROBIN took in loading all of the onboarding upfront.
Each step within “Getting Started” is a link, which takes you to the page that allows you to complete the step. As you complete each, you receive a green check and your progress bar fills up.
When asked about how he feels about these “Getting Started” style tactics, Samuel had this to say…
Samuel Hulick, UserOnboard.com:
“I LOVE ’em!
I think they’re so much better than tooltips/walkthroughs, for 3 primary reasons:
1) They’re non-interruptive. I’m not at all a fan of throwing up a barrier to the user’s immediate progress in the form of a tooltip or splash screen, but progress trackers just sit there, helpfully abiding.
2) They’re persistent. Unlike other onboarding design patterns that only show up upon signup and are never seen again, these dudes hang around until the job is actually done. Onboarding doesn’t happen in a single visit, after all.
3) They’re progress-y. The whole point of onboarding is to get people to take meaningful actions that lead to value, not to click “next, next, next, next” on a tour of how confusing your interface is. Progress trackers, by definition, are naturally predisposed to the former.” (via Inbound.org)
3. Evernote
Evernote is a tool that allows you to write, collect information and present your ideas. It’s on your desktop and it’s a mobile app, but all of your files are available across all of your devices. Think Dropbox, for example.
On the mobile app, you’re taken through three simple feature / benefit slides before you even make it to the registration form…
It pays to remind (or inform, in some cases) new users of your core value before the user onboarding flow truly begins. Why use this tool / site / app? What makes it different from the competition? How will it make your life better?
Keep these reminders simple and brief. If you go too far, you’ll end up with frustrated users who just want to “get to it”. Creating a great user onboarding flow is a balancing act. How can you balance educating and equipping your new users with everything they need to get the most from your product with getting them to that core value as quickly as possible?
You have to conduct research upfront. How well-informed are your new users on average? How familiar are they with similar products? How motivated are they to get started? The answers to these questions can help you decide whether to use these types of reminders, like Evernote and ROBIN, or skip them, like Inbound.org.
Also, consider the environment. All that’s required to flip through these three pages on mobile is two swipes. That’s not exactly a barrier to entrance.
Moving on…
After you’ve created an account, you’re taken through a simple tour. The tour combines written instructions and required actions…
Note that you can opt out of the tour. It’s a muted option to prevent new users from skipping it, but those who are familiar with Evernote (e.g. people who already have the desktop version) shouldn’t have a problem locating it.
The progress indicator shows that you are on step “1 of 5”. To move on to the next step, an actual action is required… you must create a note.
Once you’re on the right back, more instructions are given in case the interface is unclear. This continues throughout the guided tour…
After completing the first step, you’ll see a congratulatory message as well as the next required action…
As you move through the tour, you asked to actually try the app. This helps the user get a real feel for the app vs. a theoretical one. Is it easy to use? Do you swipe or tap?
According to research by William C. Bradford, approximately 65% of the population needs to see what they’re learning about to comprehend it. Another 5% needs to actually experience it.
Plus, an action is a commitment. It’s the basic foot-in-the-door technique, right? Asking the user to take a small step, like creating a note or trying the camera, is a foot-in-the-door. Asking the user to let you in the door, now, will be easier.
If a core functionality is complex, it can help to create a simple tutorial…
On mobile especially, it’s important to keep tutorials brief. New users don’t want to read through a manual or short eBook before using a core function. If it’s complicated enough to require a long, complex tutorial, it’s likely too complicated in general… and definitely too complicated to include in a guided tour.
Evernote gets it just right with its four-step tutorial (with images).
Note the difference between the first three steps and these last two…
They have “Not now” options. They are high-value for Evernote, but not absolutely required to move the user closer to the core value. Of course it’d be beneficial for Evernote if you allowed mobile push notifications and downloaded the desktop version as well, but it’s a nice-to-have, not a requirement.
Note the differences between ROBIN and Evernote here. With ROBIN, you can either input 2-9 fields of data or select “I’ll do this later”. After a lengthy wizard, that “I’ll do this later” option becomes very appealing. With Evernote, you can either click a button or a text-based link. Either way, the commitment and “physical work” is no more or less.
Also, ROBIN has many optional steps mixed in with mandatory steps, but Evernote saves two optional steps for the end. This prevents confusion and questions like “Why are there so many steps?”, “Why are so few mandatory?”, “Why do I need to do this now?”, etc.
The final page is simple and to the point, but the call to action could be a bit more specific. What action should the user take next? What’s the best way for her to “Get started”?
Of course, the user onboarding flow doesn’t end there. Or, rather, it shouldn’t. Samuel explains…
Samuel Hulick, UserOnboard.com:
“To my mind, onboarding is so much more than just introducing signups to your interface — it’s about ensuring they get what they hoped to when they decided to bother signing up in the first place. When you view it from that perspective, there’s suddenly a lot more to work with and to manage.” (via Inbound.org)
With a product like Evernote, it’s likely that users will move from mobile to desktop (and vice versa). Of course, the user experience (UX) will be slightly different depending on the device. An additional desktop onboarding flow is required, as well.
What will your users do with your product or service? How will they use it? What benefits will they receive? Likely, there are a handful of different answers, depending on the user. Asking users to narrow it down for you can help you provide a better onboarding flow…
Once you select your desired tasks, you are taken to instructions and quick tips for each…
See how each of the three functions I selected now appear as notes? Evernote uses its own product to explain the product. That’s terrific user onboarding.
Again, it doesn’t end there. Jackson Noel from Appcues explains how it’s not only new users who requiring onboarding flows…
Jackson Noel, Appcues:
“How you introduce your change to existing users is critical to the success of your feature launch. Just because a user has been active for a few days (or months/years for that matter), doesn’t mean that they too don’t require the gradual engagement, careful copywriting, and personalization that gets new users to stick around. In fact, some of your most engaged users will be the most resistant to change.” (via Appcues)
4. Clash Royale
The team behind Clash of Clans has released a new mobile game, Clash Royale. Similar in nature to the original, Clash Royale involves collecting and trading battle cards, battling online, joining battle clans, etc.
When you first open the game, you’re asked to connect with Game Center…
Asking new users to connect with Game Center is similar to asking them to connect with Facebook or Twitter. It makes it easier for them to find their friends, invite their friends, share their achievements with friends, etc.
Immediately after signing into Game Center, you’re brought to a mock battle…
Instead of one simulated training battle, Clash Royale prompts you to complete a full series of training battles. Nearly the entire game is focused on the battle function, so it’s important that new users become familiar with the interface. They might not notice and comprehend all of the options the first time around.
For example, I didn’t realize until battle three that you have to place your battle cards on your side of the bridge until you destroy a tower.
With strategy games like this, especially where you graduate to playing against other people, a strong understanding of core functionalities is clutch. If someone doesn’t understand the concept, they can’t begin to develop strategy. Thus, they will lose. Who wants to play a game they lose 90% of the time? Few people.
Moving on, you’re told that you must destroy the enemy towers…
To do so, you’ll need to deploy your troops…
Note how the hand icon shows you where you can place your troops. For my first couple of battles, I thought I had to place my cards all the way back at my tower. Instead, it would’ve been helpful if they had highlighted the eligible drop area, similar to how they highlighted the enemy’s side of the bridge.
The battle was, of course, easy. It’s important that a new user wins and experiences that feeling of achievement. It’s also important they receive the “Wooden Chest” reward…
Chests are another core function of the game. You collect chests, which take upwards of three hours to unlock. You can pay with in-app currency (which is limited, but available for purchase with actual currency) to open the chests earlier, though. Inside the chests are new cards, gold, gems, etc.
Before taking you to the main interface, Clash Royale prompts you to accept push notifications…
According to Localytics, 52% of people opt-in to receive push notifications when they download an app. Android users are more willing at 59% than iPhone users (46%), but that likely has something to do with Android enabling push notifications by default.
The direct open rate for segmented push notifications is 7%. The number of people who open the app after seeing a notification is likely higher, but that’s the percent who open it via the notification. For example, I never actually open an app through a push notification. I read it, unlock my phone and navigate to the app myself.
But how often do users take the action the push notification prompts them to? 54% of users who click on a segmented push notification convert.
It’s definitely worth prompting your users to enable push notifications. Re-engagement messaging is stronger via their personal mobile devices than email.
After opting in, you’re taken to the main interface…
You can see here that there’s a training progress bar. To move out of the Training Camp, you’ll need to complete another six battles against the computer. But first, you’re asked to tap the chest to unlock it. Note that while it takes hours to unlock chests, it takes 15 seconds in the Training Camp arena.
Why? To get new users hooked on the game, increasing the likelihood that they’ll be willing to pay to unlock chests down the line. (You can read more about building habit-forming products from Nir Eyal here.)
Next, you’re prompted to explore some of the secondary functionalities…
When you click on the cards icon, you are brought to your Battle Deck, where you can upgrade your cards as you collect more of them…
See how you can see “Cards to Find” below? That’s an important element of the interface. You can even read about the cards you have yet to discover. It creates a “I’ve got to get them all” mentality, which encourages engagement and habit formation.
Next, you learn that upgrading costs gold, which gives value to that method of in-game currency…
On to the next battle. Before you begin, you’re given a tip about how frequently cards can be played, in case it wasn’t clear originally…
After the second game, you’re asked to create a username. This is the name other users will know you by when you make it out of the Training Camp…
Asking new users to select a username this early is a great idea. It’s a type of commitment and it makes the game experience feel more personal. More importantly, it’s another sign of progress. Given Clash Royale forces you to go through seven training battles, which seems excessive after you’ve gotten the hang of the interface, signs of progress are important.
The question becomes: How much training does a user need before graduating out of the initial onboarding flow? While it’s easy to simply say “seven battles”, it’s more effective to decide case-by-case.
For example, if a new user wins two consecutive training battles by capturing all three castles and allowing the enemy to capture none within the first 90 seconds, it’s a sign that they’re ready to graduate. Instead of pushing them through another five battles, allow th