How to Bulletproof Your User Onboarding

Don’t let fragile user onboarding ruin your UX

Samuel Hulick
May 2, 2017 · 9 min read
Credit: brainmaster/Getty Images

In 2006, I made a big decision: I resolved to throw everything I had into pursuing a career in software design.

I’d been handcrafting GeoCities-like websites for myself and others since the late ’90s, but now I wanted to get serious about it.

I hit the books hard and was fortunate enough to almost immediately come across Bulletproof Web Design by Dan Cederholm.

The book covered techniques for crafting sites in such a way that they could be viewed across a wide variety of conditions — different browsers, different screen sizes, etc. — without flying apart at the seams and looking completely broken.

That concept might sound super obvious now, but I am embarrassed to say that at the time, it blew my freaking mind.

When I’d learned to create websites in the ’90s, there was an ideological war going on that often involved bragging about a website being “best viewed” in one browser or another, effectively telling everyone else to take a hike.

But in reading Dan’s book, I realized that there was, of course, no “right” way to view a website, and that if we as website creators wanted our creations to succeed, we needed to accommodate all the ways in which they were experienced.

Instead of prescribing a single “right” way and accepting the fragility that comes with that specificity, it’s far better to aim for something so robust that it can take any weird thing you throw at it.

The lesson, in short, was that when you address uncertainty with flexibility, you generate resilience.

And this, dear friends, is a quality I often find sorely lacking in many onboarding experiences.

Just as there isn’t one “right” browser to use, there also isn’t one “correct” way to start using software. People arrive at a product with all kinds of different intentions, perspectives, and levels of familiarity.

We can either meet that uncertainty with something hyper-specific, superficial, and brittle, or we can welcome it with a flexible and resilient experience that serves users of all stripes, ambitions, and timelines.

It’s all a matter of thoughtfully considering and applying the most “bulletproof” options available for our onboarding experiences.

By way of example, consider…

A (very) fragile onboarding pattern

Let’s talk about tooltip tours! You know, these fun little homies:

They seem pretty helpful on the surface, right?

Perhaps your product has a few key activities that the interface doesn’t make super apparent on its own, so you tack a handful of callouts on top of it, ensuring that the important parts get noticed. Isn’t that a good thing?

It might seem so at first blush, but think about the times you’ve experienced these in the wild as a user: How “helpful” did you find them?

Chances are much more likely that you found them:

  • Distracting, like when a tour pops up when you’ve just gotten ready to dive into something — or worse, when you’re already in the middle of it
  • Controlling, like when it takes over the entire screen and makes you click next-next-next-next until it finally puts you back in the driver’s seat
  • Flaky, like the times when you accidentally get kicked out of a tour before it’s over and can’t start it again to see what you missed

“Distracting, controlling, and flaky” is a description befitting a horrible ex or the reviled Clippy, not a quality onboarding experience.

Each of those qualities also make the getting-started process remarkably and profoundly fragile. In other words, the opposite of bulletproof.

In the ultra-important first few moments a user spends within a product, we want to set the bar much higher. In fact, we should shoot for the exact opposite of each attribute:

  • Instead of distracting, let’s aim for integrated
  • Instead of controlling, let’s aim for empowering
  • And instead of flaky, let’s aim for steadfast

Together, they combine like Voltron into…

The Holy Trinity of onboarding bulletproof-ness

1. Integrated (as opposed to distracting)

When it comes to your onboarding experience (or any product experience, really), one of your very best friends is your users’ sense of immersion, momentum, and flow. You want your users to form a bond with your product, and getting them into an immediate groove is an excellent way to do just that.

Techniques like tooltip tours, intro videos, and even those little pulsing hotspots, however, hijack your users’ attention and pull it away from their natural sense of self-direction. This not only throws cold water on their overall momentum, it also disengages them from the meaningful activity they would otherwise be immersed in.

Whenever possible, the absolute ideal is to instead make your product’s onboarding experience completely indistinguishable from the product itself. Instead of slapping an “interface on top of your interface,” find ways to integrate timely, relevant guidance within it.

As a user, things are simply much more meaningful when it feels like you’re the one calling the shots.

2. Empowering (as opposed to controlling)

Speaking of “meaningful,” is your onboarding experience guiding users into actions that genuinely lead to progress in their lives, or just a better understanding of your UI? People act when they believe that doing so is aligned with their ambitions, and very few people wake up in the morning aspiring to become better “interface operators.”

Pay particularly close attention to those times when tooltips and coach marks call out individual buttons, especially when it creates a redundancy like “Clicking ‘Create Project’ creates a project!” If your onboarding is simply reiterating what the interface should already make clear, that’s an excellent sign that you instead need to rework things on a fundamental level — callouts like those often literally point to bad design.

People are signing up for your product because they hope it will make their lives better in some way. Guide them to that promised land (more on that in a bit), rather than taking them on a tour of UI whack-a-mole.

Users can accomplish meaningful things in your app — highlight those, not your interface’s shortcomings.

3. Steadfast (as opposed to flaky)

If your onboarding only extends as far as the first minute or two a user spends in your app, it’s not only competing with other information that users have to wrap their head around, it’s also abandoning them before they’re fully up and running (which can easily take days, if not weeks).

Even when a user is fully up and running, it still doesn’t mean your onboarding’s job is done. What a user finds irrelevant now could very easily wind up being highly relevant to them down the road, especially when you consider the fact that your product will also be evolving during that time — “new feature onboarding” is also very much a part of onboarding!

Just as you don’t stop being a parent once your kids are grown, providing some timely guidance at every stage of the relationship easily beats stuffing everything into a fleeting “you better hope you remember all of this when you actually care about it down the road” onboarding memory test.

Invest in the long haul, and you will find your efforts more than rewarded.

With these onboarding bulletproof-ness concepts in place, let’s investigate how they can be applied via…

Some far-less-fragile onboarding patterns

Empty states

Your product is a place of activity, and if no activity has yet taken place, it’s going to have some empty containers reflecting that.

Many products miss a giant opportunity by simply reporting “there’s nothing to see here.” Or worse, some even provide an admonishing “you haven’t done anything yet” condemnation.

You can do much better, by providing some context around why it’s worthwhile to do the things that fill the container to begin with, and teeing people up with a call to action that gets them on their way.

  • Are they integrated? Empty states are the very definition of integrated — they’re literally part of your product whether you design for them or not, so you might as well make them effective!
  • Are they empowering? They definitely can be! It depends on how thoughtfully you reframe the “you don’t have anything” message into a call to action that guides people toward doing something of consequence.
  • Are they steadfast? You better believe it, baby! Unlike, say, an intro tour, these puppies stick around until the user has actually done something to address them, which means they provide help on the user’s schedule.

Progression systems

Taking your users from “completely new” to “fully capable” is a journey — and one that can be rather lengthy at times. Progression systems are super helpful for guiding users along each stage of that journey.

They often take the form of to-do lists (with items that get crossed off as the user completes them), or completion meters (like LinkedIn’s infamous “thermometer of agony” profile strength meter), or some combination thereof.

Regardless of how they’re displayed, the key part is to highlight the most important activities inside the app — and, of course, to demonstrate the progress users are making as they complete those activities!

  • Are they integrated? While they may not be a completely natural part of the app, they’re also far from distracting or interruptive of the organic flow within a product. Think of them as providing a great fallback option for the user, rather than an element that’s competing for their immediate attention.
  • Are they empowering? As with the empty states above, any onboarding experience is only as empowering as you choose to make it. That said, progression systems are among the patterns most closely aligned with spurring users to do things of actual consequence, which is what the concept of empowerment is all about.
  • Are they steadfast? Yes, totally! They’re specifically designed to work over the long haul (think in terms of multiple visits, not just the first). Pro tip: If someone reaches 100% progress, you can always graduate them to Level 2 and start them off on a new series of quests!

Lifecycle emails

This is the catch-all term for all the messages you send someone after they sign up. Ideally, the emails are dynamically based on a user’s activity (or lack thereof) within the product, rather than a cookie-cutter series of info blasts that go out to everyone, regardless of their level of progress.

When someone signs up for a product, they’re doing so because they’re motivated to find a better way of doing things. That’s unlikely to fully happen in the very first visit, so I like to think of lifecycle emails as guardrails for that motivation.

Lifecycle emails (and their sister pattern, push notifications) are unique in the onboarding world, as they’re the only patterns that actively go out and bring people back into your app — hopefully in a way that motivates them to take meaningful action.

  • Are they integrated? They aren’t part of the product at all, so it’s hard to say that they’re “integrated” per se. Then again, they do absolutely nothing to distract from the task at hand once a user arrives in the product.
  • Are they empowering? Ideally, yes! Nagging emails like “You haven’t logged in for two weeks — we miss you!!” aren’t particularly empowering, but ones that outline a key action for a user to take (and sell them on why it’s to their benefit to take it) definitely are. As with anything, it’s all about proper framing.
  • Are they steadfast? When done well, they absolutely are! Too many software companies underinvest in lifecycle emails, meekly sending a couple when someone signs up and then calling it a day. If what you’re sending your user base is genuinely helpful and relevant, you should have no hesitation in loading up — think dozens, not a couple, and months-worth, not days.

Onboarding will always be as unique to a particular product as that product is to the world, and there are tons of other patterns to explore for your own onboarding.

Hopefully, however, this framework provides you with the principles by which to evaluate them.

People ask me all the time to name one or two onboarding design patterns that I like, but nothing in design (or life, for that matter) is ever that universal.

The honest answer is that there simply is no silver bullet.

Fortunately, though, you can always strive for bulletproof.

Modus

Helping designers thrive.

Samuel Hulick

Written by

I turn web experiences into better life experiences.

Modus

Helping designers thrive. A Medium publication about UX/UI design.

Samuel Hulick

Written by

I turn web experiences into better life experiences.

Modus

Helping designers thrive. A Medium publication about UX/UI design.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store