Feb 03 2014

UX Flows: How to Turn Onboarding into an Amazing First Date with Your User

UXFlows_Feature

Ok. So you’ve figured out how to get users signed up. Now how do you get them oriented and on the road to being a power user? You have a chance to make a great first impression (after signup) and to really hook users with a great onboarding flow.

Onboarding is your first date with your user — you don’t want to talk their ear off and you want to be as charming as possible. Simply put: tell the user only what they need to know, in as few words as you can, to make them like you. And be as witty or delightful as you can while doing it.

You can also think of onboarding as the setup manual for your digital application or website, but with a subtle — yet effective — dose of persuasion. Kind of like the manual IKEA gives you to build a chair, but combined with an ulterior motive: Getting you to use the chair.

The main goal is to accommodate your user and get them using your product — as soon as possible. To call you for a second date or to start using that swiss designed chair. It’s crucial to make a great first impression and carefully familiarize users with your product — and then those users will come back.

I looked into different flows to get an idea of the onboarding process and came up with a few common types, as well as cons to each approach. Sites tend to use one. or sometimes all, of these approaches in their experiences. Let’s break them down, but first:

When Do I Need an Onboarding Process?

You may be asking, when do I need an onboarding process? The main instance is when your website or online application works differently from the way your user is accustomed to. This happens a lot on mobile — you may be introducing a fun and new interaction, like swiping to see hidden item — and, quite often with web products, you may be introducing a product that is nothing like users have seen before. For me, that product was Pinterest in 2010 or Quora last year. Onboarding for sites like these is pretty crucial; if users never finish signing up, your signup conversion will fall into the waste bin.

The “Joyriding” Approach

The “joyriding” approach walks the user through the features of an app or highlights the key features. It’s great because it clears up a lot of confusion right from the get-go. I think of this as the go-to approach since it’s what first comes to mind when you really think “onboarding.” While joyriding tends to be the most common process, it can be executed in many beautiful ways.

Squarespace GIF

Squarespace introduces users to the product with an walkthrough welcome video that shows them how to use the product and follows with a joyriding approach with tool tips to clarify functionality.

Siasto GIF

Siasto does everything short of pushing the mouse to help users understand the app. This is really a combination of joyriding and the “do something” approach.

Cons: The user learns how it works but may not get far in actually doing it. They aren’t being begged to take action and start using the product.

The “Do Something” Approach

By asking users to make their first move on the application, an application can get users engaged right off the bat. This is common in applications that depend on curation by the user to get the app working (like Ness).

Ness GIF

Ness relies on user preferences for its defining functionality to work. The onboarding of this desktop app has users rate 10 restaurants before they move into the exploration stage of finding restaurants in the app. A delightful interaction is the logo/heart filling up as recs are inputted.

Tumblr, for example, has users follow a few people and name your blog. They feel that service is so easy to use that they leave out the joyriding approach.

Tumblr GIF

Tumblr’s setup has a lot of steps, but they use a fun tone and clear CTAs to guide users through the process.

Cons: Users may not actually get as far as they need to with how it works, depending on the product or application. For example, you may ask users a question that gets them to write an initial post. But do they know where that post goes and what to do with it? Do they know how to edit it?

The “Setup” Approach

The setup process is an approach to onboarding that gets users to setup their account rather than teaching how to use the product. This approach assumes that understanding the app isn’t the tricky part but that the setup is the point of weakness that needs support.

The setup approach is often combined with a walkthrough approach. Keep’s onboarding approach sets you up to start using the product with a few questions.

Keep GIF

Keep’s use of whitespace, calming colors, and clean graphics makes this three-step process painless & easy. This setup process allows them to engage quickly because it gets users viewing content right off the bat.

Cons: As a standalone, users may still have trouble using your product. This approach works if the UI of the product is clear, but if it isn’t, users may have trouble understanding how to use your product.

Fitbit combines approaches by leading with a quick walkthrough, followed by a setup, all before signup. This approach helps to clarify and outweigh the con mentioned above:

UXflows_GifGraphic_Fitbit

The “Everything at Once” Approach

The first time users sign in, they get a walkthrough while they’re also setting up the app and being prompted to take action. Let’s take a look at Pinterest.

Pinterest GIF

Pinterest takes users through a setup process — complete with informative illustrations — and immediately follows with tool tips that allow the user to take action in the app. The use of dots allow users to see the end in sight.

A Note on Continued Onboarding

What we’re calling “continued onboarding” are tactics a site uses to keep the user moving in the process of using the web application. LinkedIn, for example, has clear call outs at the top of your profile, most often asking you a question to add more information to your profile and encouraging you to “endorse” your connections. The incentive is getting a 100% complete profile, a continued setup approach, but getting that completion perhaps isn’t even possible!

LinkedIn

LinkedIn prompts users with questions through their usage of the app. The step-by-step “Let’s get started!” section is  always present — even at 500+ connections!

Empty States are another approach to continued onboarding, which subtly and sometimes delightfully let users know they need to do something. They’re a great opportunity to use that empty real estate that exists when users haven’t taken any action to your advantage. Don’t stop at “You don’t have any friends yet.” Tack on “So get out there and make some!” (for example).

Empty States from iOS

Mobile empty states are a lot more common. The above examples are from Instagram, Facebook Messenger, and Dropbox, all for iOS.

Takeaways

The point of onboarding is to give users the tools they need to benefit from your website. This may require one or all of the listed approaches, depending on your product.

1. If it’s tricky, spell it out

Figure out what approach works for you. If you are introducing the user to a whole new concept, spell it out as much as is needed while still being succinct. The longer the onboarding process, the more necessary it is to show that the end is in sight (as seen in Pinterest’s flow above).

2. Be opportunistic

This is your shot to get things right with your users right out of the gate, so capitalize on that first impression. After that, think about any future opportunities to more deeply engage your user.

3. Make it fun

Think back to that first date metaphor. You want users to say yes when you call them in 2 days and ask them for a second date. To delightfully tell their friends what a good time they had. See what I’m saying? Make your onboarding experience as fun as possible.

What are some of the best onboarding experiences you have seen? Have you seen any other approaches? Share them with us in the comments section below!

About the Author:

MK Cook is a UX designer at digital-telepathy who channels her boundless energy and curiosity toward designing killer interactions and interfaces. She’s also a bicycle commuter, gourmet pizza baker and wannabe bee-keeper. Find her on Twitter and Google+.

Leave a Response

1 Response

  1. Feb 03 2014
    Matthew Marshall

    MK, this article is great!

    I personally love the strategy of the ‘Do something’ approach. A great example is Polar, the app by Luke Wroblewski. He uses this approach combined with gradual registration and has reported 87% engagement upon download ( http://www.lukew.com/ff/entry.asp?1678 ). The actual app functionality is fairly simple, but it goes to show how changing traditional design patterns can greatly improve engagement and subsequent adoption.
    -Matthew