A List Apart


Illustration by Geri Coady

The Risky Business of Onboarding

Introducing potential new users to a product can be tricky. Visitors are just passing by, only willing to interact if they can immediately see a new product’s value. And even if they do sign up, they may not come back. It’s not enough simply to capture an email address—you have to thoughtfully design a process that gets and holds attention, turning new visits into repeated engagement.

Article Continues Below

I encountered just how difficult onboarding can be when we decided to redesign our signup process at Blendle, a startup that sells individual articles from newspapers and magazines. Our old signup was full of bugs, falling behind on design changes made in the rest of the product, and, most importantly, both data and our users told us that new users were left confused after signing up. Our redesigns looked good, but I wanted to dig deeper. I wanted to know what makes a truly great onboarding process.

A 30-day experiment

I’m a builder. I like fast iterations. I like to ship. I don’t naturally gravitate toward long research processes, reports, complex numbers, and spreadsheets. So to collect as much research as quickly (and interestingly) as possible, I decided to inspect and review one onboarding experience every day for 30 days in a row. The questions I wanted to answer:

  • Is there such a thing as the perfect onboarding experience?
  • What are the most important things to consider when designing and building a smooth signup process?
  • What can Blendle (and everyone else) learn from products that are already out there?

A month later, I had 30 blog posts reviewing well-known products like Facebook, Twitter, Vimeo, and Instagram, alongside newer products like Botify, Staply, and Meerkat. I took screenshots and wrote down my thoughts for each step in every product. I also built a spreadsheet to quantify the experiences through the number of steps, required fields, supported social media platforms, and other parameters. (While this method obviously would not yield significant and statistically correct data, it is informative, and a huge improvement over decisions based on gut feelings.)

With that data, I was able to create a framework for onboarding experiences in three stages: identifying, teaching, and engaging. With this framework, you can reevaluate your onboarding experience based on observable patterns, just as we did at Blendle—hopefully attracting, and retaining, more new users.

Stage 1: Identifying

If you stripped down an onboarding process as far as you could, what would be the one thing you would keep? The user needs a way to sign up—a form to collect a name or email address, a way for users to identify themselves.

While the signup form may be the most boring part of your product to work on, a skillfully crafted form can help users set up a new account in seconds, and even bring some joy to their day. Take a quick look at how GitHub is doing this:

Animated screenshot of GitHub’s signup form, which provides real-time feedback for errors in the username, email, and password fields.

Notice how I get feedback as I’m completing the fields. It is really gratifying to watch the red error flag turn green when my input is correct. It also gives me really specific feedback about the errors in my password.

Some products request user identification as a single field, while others use a multipage form. Multiple studies have been done on the positive impact of having a shorter form and how form fields impact conversion. When encouraging potential users to set up a new account, is it really necessary to ask for a birth date or preferred country? Probably not—and short and sweet seems to get better results.

One way to reduce mandatory fields is to allow users to sign up with a service profile they already have. For example, Prismatic enables potential new users to sign up via their Twitter or Facebook accounts:

Screenshot of Prismatic’s signup form, showing a choice of social login buttons or email signup.
Crystal-clear first step: either fill out an email address or pick one of the social networks. No fluff.

Adding these social login buttons should always be a conscious choice. Research your audience to find out which networks they use, and keep a close watch on your conversion rate to see how it compares to a normal signup. Mailchimp, for example, found that social login buttons didn’t actually help their onboarding process, so they removed them.

Ultimately, the identifying phase is about determining how much—or ideally how little—information you need from users. Here’s the technique we used to figure out what questions to ask in Blendle’s onboarding:

  • Start by making a list of everything you would like to know from new users.
  • For every field, write down why you need this information.
  • Next, write down why a user would benefit from sharing that data with you.
  • Cross off everything that doesn’t show a clear benefit to both you and your users.

Alternatively, ask yourself this question: what is the absolute minimum you need to know from your users in order to let them in?

Evaluate your onboarding process

  • Try to look at your form with a fresh pair of eyes. Are any fields potentially unclear or confusing to new users?
  • Do you absolutely need to know everything you’re asking new users? Could some fields be removed, or reserved for later in the use cycle?
  • Test and validate your error messages. Do they explain what’s wrong and how your user can fix the problem?
  • If a user triggers a validation error on one of the fields, is the data on all other fields preserved? Users don’t like to start over because of a single error.
  • Can you include instant feedback for each field to mark progress and prevent wasted time? This is especially important for users on slower internet connections.
  • Does it make sense to incorporate social media logins for your product?

Stage 2: Teaching

Teaching is the second layer of the onboarding experience. Guiding a new user’s first dive into your product helps ensure they aren’t overwhelmed, and that they know how to get the most value out of what you are offering.

The signup process at GitHub does this well, by keeping things simple and ending on this screen:

Screenshot of the final screen in GitHub’s onboarding process, showing four additional steps users can take to start using the service.

Nothing is mandatory here, but they’ve added explanatory content to show new users how to get started. It’s short and can be dismissed with a single click.

Instapaper’s onboarding uses Instapaper to explain how Instapaper works: they have folded their introduction into an article that appears in the user’s account after a signup:

Screenshot of the final screen in Instapaper’s onboarding process, showing instructions, in article form, for using the service.

Since Instapaper is targeted at people who like to read, this seems to be a good fit. It would be even better to have a trigger in place to suggest clicking to read the article, demonstrating the actions for using the service.

Slack’s onboarding takes that idea even further. An interactive tutorial via Slackbot, the service’s help entity, shows a new user how to complete their profile while also learning how to use the tool’s chat functions:

Screenshot of a chat window with Slackbot, Slack’s interactive onboarding tutorial.

Slackbot’s lighthearted, personal tone creates a positive first experience while simultaneously filling out the user’s data fields.

Evaluate your onboarding process

  • What are your product’s most important or most frequently used features?
  • Which features are the most difficult to use?
  • Which features might make a new user feel comfortable?
  • Can the functionality of your product actually be used to introduce the product or demonstrate its features (à la Instapaper or Slack)?
  • Which feature has the most impact on growing the product?
  • Which feature best shows off the product’s value?

Stage 3: Engaging

Finding yourself as a new user in an application with thousands of options, buttons, settings, and tooltips can be overwhelming. Simultaneously, users who haven’t begun to use the product yet can end up in zero data state. This combination can make it really hard for users to discover the value of your product—and keep coming back to it.

This is an opportunity to separate a great onboarding process from a basic one. By asking a couple of strategic questions while signing up, it is possible to skip zero data state and make the user feel right at home at the end of creating their account.

For example, Meetup asks new users to select categories of interest at the end of the onboarding process:

Screenshot of Meetup’s interest-selection stage in their onboarding process.

Meetup can then use this data to recommend meetups that are most likely to appeal to the user.

The more data you collect during onboarding, the more you’ll be able to demonstrate value, and the more likely users will return. In other words: a good onboarding might be the very best thing you can do to set yourself up for success.

Triggers are another potential method for encouraging repeated use. In Hooked, Nir Eyal explains how to build habit-forming products using internal and external triggers. External triggers can be push notifications, emails, overheard conversations, phone calls, Facebook messages, or tweets. Internal triggers, such as wanting to check our inboxes to see if we have new email, originate in our own brains. (If you manage to add an internal trigger, people will return to your product without you having to nudge them.)

A carefully crafted onboarding helps the user open their account while setting up meaningful external triggers to be used post-signup. Prismatic does this by asking the user to select topics of interest during signup, much like Meetup does:

Screenshot of Prismatic’s interest-selection stage in their onboarding process.

They then use this data to send the new user a weekly email with a well-curated selection of articles, encouraging return visits.

Another way to potentially drive engagement is through social connections. Interactions with friends can be just as meaningful or even better than recommendations based on selected interests. Twitter does this by regularly emailing users with activity from their network. Facebook and Twitter both let users know when someone from their network signs up for their products. The more friends a user has on a shared product, the more relevant and personal their interactions are, and the more likely they are to continue to use the product.

This brings us to a difficult part in the framework: on the one hand, you want to eliminate as many form fields as possible. On the other hand, you want to collect users’ data and expand their networks in order to enhance their experience. You can balance these competing goals by clearly communicating why you need each piece of data. Keep the complete process as short as possible, but spread out separate questions over multiple pages. Make each step as enjoyable as possible; you might even try adding some meaningful, functional animation where this makes sense.

Evaluate your onboarding process

  • What information do you need in order to eliminate zero data state?
  • What sorts of external triggers can you build into the product?
  • What data does the user need to share in order to set up meaningful triggers?
  • Can you integrate activity from users’ friends or network to create additional triggers?
  • If you need to collect a lot of data to provide better engagement, can you spread your fields across multiple pages or signup stages? Can you present the information requests in a more engaging way?

Onboarding never ends

Screenshot of the first page in Blendle’s onboarding process, showing thumbnails of publications.
This is the view that greets you when visiting Blendle for the first time. It says: “Good evening! Welcome to Blendle. Which papers and magazines would you like to read?”

Blendle’s new onboarding process is doing well, with a steady conversion rate of 5 percent (if you’re interested, I wrote a review). Of course, this is not enough for us; we’re continuing to improve and explore how we can keep delivering a delightful experience to our new users. The three-stage framework helps us check our design decisions going forward.

Onboarding experiences should be continuously improved and updated, just like any other aspect of a product. The fourth product I reviewed during my experiment was Twitter; I hadn’t seen their onboarding since signing up for my account five years ago, and the process felt like it hadn’t changed since. Facebook seems to have the exact same problem. This was a common pattern I saw: the product may be moving forward with great speed, but the onboarding process is left to collect dust because it isn’t deemed as worthy as other, more visible design concerns.

Take the time to go back to your own product onboarding experience and evaluate where improvements can be made—especially if you haven’t looked at it in a while. Use the questions in the framework to examine how you’re dealing with identifying new users, teaching them how to use your product, and engaging them to return. By reevaluating your process—and ensuring that it continually evolves—you can continue to improve users’ experience with your product from the moment they first encounter it.

About the Author

8 Reader Comments

Load Comments