Have you ever spent days preparing for something grand and then mess it up historically five minutes into your presentation? Ugh, those sweet first date memories!
Turns out it’s exactly the same way with onboarding your users.
We spend weeks trying to design the next perfect user journey, but often it’s the first five minutes that turn new users either into pumped customers or walky-talky zero NPS.
And within these five minutes every small detail matters: one extra screen, a couple of uninvited hints, and an obscure feature might be enough to turn dozens and hundreds of your could-be customers away.
Good news is that we can learn from others' mistakes.
But first, let’s talk about how exactly we should define the onboarding experience.
Onboarding UX is everything users experience from the moment they first learn about your product to the moment they regularly start using it. A thought-out onboarding experience helps new users to quickly understand your product’s value, get acquainted with how your product works, and start using it.
Designing a decent onboarding experience is tough. Even profitable companies sometimes fail at properly onboarding their users: over 90% of customers bid them to do better.
Side note: Check out our article about Check out UX.
The most common onboarding issues come from neglecting three key concepts:
AHA-moment. “Aha” is the exact moment when users realize the value your service or product provides for them. Often with poor user onboarding experience “Aha” moment is delayed or never comes.
Friction. The level of UX friction is determined by the amount of interactions that delay or prevent people from achieving their goals. High friction is a typical mark of poor onboarding process.
Cognitive overload. Users have a limited mental power to learn how to use our product. Poorly designed onboarding process overloads people faster than helps them.
With poor onboarding experiences you’ll notice these concepts violated, often all three of them at once.
But enough theory. Let’s see how products fail up close.
A writer’s nightmare is an empty page. A user’s nightmare is an empty screen.
Some designers and product leads might think that empty spaces encourage users to fill them. In reality, new users are beyond confused because they have to fill empty space using tools they don’t even know yet.
Take Axure. No doubt the onboarding process of this prototyping software improved significantly over the years, but it’s still way off. Without you specifically choosing to open the tour file, the starting screen looks pretty much like this:
The irony is that I got an email with a beginner’s video tutorial the next day, which means new users are on their own for at least 12 hours.
Issues with empty spaces during onboarding:
Cognitive overload. People already using mental power to learn the new product, and now they have another problem of filling an empty space.
Aha moment is delayed or doesn’t exist. Empty-spaced onboarding UI is a toss of a coin: either people find something on their own or leave your product behind.
Surely Axure is a complex desktop software with a steep learning curve and programming interactive onboarding experience might not be ROI-wise.
Well, here’s how Sketch solved this problem: templates.
Templates are customized onboarding experience in disguise.
Using templates new users might immediately start experimenting with something that is of interest to them, and they don’t have to start with a blank canvas. That’s two for two.
Empty space is a valuable real estate of your application. Why not use it to engage or guide your users?
This one little tweak, among other, helped Customer.io to completely revamp their onboarding process and boost signups, completion rates, and reactivation at once:
People were often met by unhelpful empty states. Pages that simply said “No activity”. We decided to ship better ones. They included what the feature is, why it matters, the value it provides, and how to take the next step.
-Richard Hawkes, product designer @ Customer.io
This solution is, perhaps, the hardest to pull off, but certainly the one most worth it.
Here’s what Axure tries to do with their tour file:
Welcome to Axure
Seems like Axure is really set to send us away from their tool into the land of hefty tutorials with this big juicy link at the beginning.
The rest of the file doesn't impress either -- several poorly designed hints with some tips scattered all over the place. By the end of reading the tour I still have no slightest idea how to create a prototype.
Here’s how Notion solves this problem:
Using Notion, the Notion shows you what Notion can do for you directly within Notion. Sounds terrible, but it works. I can start using the product right away.
Summary: Empty spaces should be filled with content that helps new users progress into the product no matter how simple or complex the product is.
The goal of any onboarding process should be not showing features, but showing how features can help a user solve their problem.
To demonstrate how thin sometimes the line can be, let’s talk about one of the most hyped and exclusive products of the latest years: Superhuman email client.
Put simply, the onboarding for Superhuman is almost flawless. You’ll find lot of praise online, especially given that the onboarding is presumably personally accompanied by someone from a product’s team.
And yet one minor thing is missing. By the end of the tutorial you are not a tiny bit closer to your original goal: decluttering inbox.
Let us shamelessly plug in growth.design’s case study that inspired this example:
If Superhuman wouldn’t be so overhyped, the issue would be infuriating. Getting through the whole onboarding process and not even completing your original goal? Ugh.
Issues with the absence of progress during the onboarding:
Aha moment is delayed or not achieved. Why doesn't everyone become a professional firecracker operator after seeing amazing fireworks? Because showing cool things and getting your users doing them are two different things.
Cognitive overload is not resolved. All that learning for no progress in the end? Definitely not a positive thing to experience.
Thing is, you don’t need to help users complete all of their goals or even one big goal. To get to the “Aha” moment where the value of your product is clearly demonstrated sometimes it’s enough to create a one small win.
How Zapier does it.
Zapier is a service that lets you set up automated workflows between different services. In theory, there are thousands of combinations that Zapier can help you automate, and reaching the full potential with the service is nearly impossible.
But during the onboarding process Zapier simply asks you what services you are using the most.
Later when you start creating your first automation, Zapier suggests personal workflow recommendations based on the services you use.
As a result, in a few minutes you get a fully automated workflow between the two tools you already well-familiar with.
It’s a small win, and just the beginning of your Zapier journey, but you already made some progress, and more likely to get hooked.
The same “small wins” approach works with much more complicated services as well. The online messaging platform saw a 60% conversion surge when they made sure their new users obtained the first small result within five minutes instead of a big one in two hours.
Summary: prioritize value over features from the first seconds of your onboarding experience.
Products are getting more and more features in order to differentiate themselves from a competition. That’s understandable.
But dumping all these features on newcomers at once is counter-productive.
So let’s keep our rant about mail clients alive.
The onboarding process for the HEY email client is pretty simple: the guide takes you through a series of tasks where you create your email address and password.
And then, BAM.
You get 12 new buttons to click right in your face. And an inbox flooded with FAQs on top of it.
So much for a decluttering inbox experience, right?
Issues with the feature overload during the onboarding:
Instant cognitive overload. So many buttons to push and labels to read.
"Aha" moment may never come. It’s more effective to guide people towards their Aha moment than hoping they will somehow get there on their own.
Spotify has more than 300 million monthly active users. And how do these 300 million people listen to music on Spotify? Predominantly via playlists. Almost 60% of music is listened to using playlists.
Yet you won’t learn anything about playlists during Spotify onboarding. Nothing about creating them, shuffling, editing, adding tracks, all that.
You’ll simply choose your favorite artists. Then Spotify will create a personalized playlist and you’re one click away from listening to it.
Within just two minutes Spotify onboarded new users with a personalized experience, provided core value, and left a whole basket of features in the background for further exploration.
Summary: new users don’t need to know all your features right away. Cover their basic needs first, and the rest will follow.
No one likes walls of text, especially at the very beginning of a user journey. Especially in a mobile application.
So the popular approach is to design a series of screens with minimum to no text.
But that doesn’t mean you can put in as many screens as you want. With every new screen the level of UX friction grows exponentially.
But for some reason both Evernote keeps the amount of screens high.
Eight screens and two hints to create a simple note.
Some people might find this as a progressive onboarding, but the value behind this chain of hints might be superficial. It might create the “illusion” of knowing the product, while in reality lots of the features will be forgotten.
Issues with excessive onboarding screens:
Extra friction. And more of it with every next screen that doesn't help users with their goals.
Cognitive overload. Even if the screens are small, the icons are simple, and the copy is short, it’s still learning too many features at a fast pace.
No “aha" moment. Features are demonstrated out of context with no immediate value to the user.
Although Tinder could’ve shaved off a couple of greeting screens itself, the app does a great job at explaining product features without disrupting the user flow.
The new feature gets demonstrated as soon as the context calls for it.
Summary: the shortest path to Aha moment is to demonstrate your product features within the context of your user’s task.
Here’s a story about two very similar products with completely different onboarding experiences -- Brain.fm and Focus@Will.
After signing up for Brain.fm I got a trial account for five days, and over these five days I received three emails from the company clearly explaining me the benefits of their product.
Don’t mind questionable font color choices. Not the point!
After signing up for Focus@Will and clicking “Free Trial” I was re-directed toward a checkout page with a credit card form forced upon me.
Having no idea about the product I respectfully declined and discovered I can’t be using a trial without first using my credit card.
The irony is that I still received an email that explained how to use the product. Unfortunately no links in that emails worked:
No buttons apart from the Unsubscribe one.
So I ended up going with Brain.fm even though the subscription price was the same.
Perhaps such a drastic difference between two onboarding experiences is in the question:
When does the onboarding process start?
For Focus@Will the onboarding UX apparently starts after the checkout. For Brain.fm after the sign up.
Traffic numbers are nothing to go by, but interesting to look at:
Focus@Will was founded in 2012.
Brain.fm started as a project two years later than Focus@Will, in 2014.
These are the common issues, but how does the best app onboarding flows look like?