UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 487 February 16, 2010

Onboarding: Designing Welcoming First Experiences

Last May I was given the great privilege to write a sidebar in Christian Crumlish and Erin Malone's fabulous new book, Designing Social Interfaces. The topic I was asked to write about is "onboarding"—designing welcoming experiences for new users by easing them in. You might have seen a couple blog posts that I've previously written about how Plurk and Yahoo! Shine handled the onboarding process.

The authors have given me the permission to republish the sidebar here in full. I hope you enjoy it and find it valuable. I would love to hear your thoughts in the comments.

When you're done reading, do yourself a favor and buy a copy of Designing Social Interfaces. It's a must-have for anyone involved in designing and developing social products and services.


What is onboarding, and why is it important?

Most companies think that getting people to sign up is the ultimate challenge, but what about getting them oriented to your site and actually using it? That process of helping people get started is called onboarding, and it's crucial that you give it the attention it deserves.

When left to their own devices in a new space without any sense of direction or purpose, many users can feel lost, overwhelmed, and confused about what they're supposed to be doing there. The user might have arrived at your site from a link in an article, an organic search result, or on the recommendation of a friend. In essence, the user is taking a leap of faith that she will be able to achieve something on your site, and it's your responsibility to shake her hand and show her the ropes when she gets there.

They say you don't get a second chance to make a first impression, and on the Web it's truer than ever. If you don't capture the attention of new visitors from the moment they arrive and guide them on their initial journey through the site, they won't learn that the benefit you provide outweighs the cost—their time and effort to participate—and as a result, won't stick around very long. Worse, they'll tell their friends not to bother visiting, either.

Onboarding is the process by which you can help users overcome the cold-start problem—a blank profile, an unfamiliar interface, a general feeling of "what the heck do I do next?" Many websites force users to start from square one and build up content (and value) over time. Social apps in particular are prone to this because so much of their usefulness is derived from person-to-person interaction and user-generated content.

The term onboarding comes from the field of human resources and the common practice of new hire orientation. In that context, the steps in the process are often referred to as accommodate, assimilate, and accelerate—all of which apply quite nicely to how new users ought to be treated in order to bring them into the fold.

Accommodating your users means giving them the tools they want and need to use your site to their benefit. Assimilating means helping the user to absorb the culture of the site and, in a sense, come to resemble the existing users. And accelerating generally applies to delivering on the value proposition better and faster.

Oftentimes, the true value of your product or service becomes apparent only after significant use—perhaps because the user needs a sizable social network to really reap the benefits, or because continued activity on the site ultimately leads to something, like better recommendations. But don't make the mistake of assuming that your users will stick with you that long. You need to help them get there as quickly and painlessly as possible in order to make your case.

Designing the onboarding process for your site is most commonly limited to a first-time use scenario: from the moment just after a user has signed up until the end of his first session. There are certainly extended approaches you can take to consider the user's needs during subsequent visits until he is exhibiting a desired behavior on the site, but exert caution, lest you be seen as too heavy-handed or pushy. Typically, once a user understands the lay of the land, he wants to be left alone to explore.

A prime example of great onboarding

One of the best and most often-cited examples of an onboarding process is on Tumblr.com. Tumblr proudly calls itself the easiest way to blog and goes to great lengths to prove its point. The sign-up process itself is dead simple—just a single form to provide an email address, password, and desired URL. Once the user confirms her credentials by logging in, she is presented with the main interface and blogging tool, but most of the page is dimly lit. Her attention is directed to the toolbar, and a large bubble tells her exactly what to do next: "Create your first post!" In actuality, there are a dozen things she could do from here, but the guide is making a decision for her. By limiting the user's focus, Tumblr ensures that she is significantly less overwhelmed by the options at this point, while simultaneously being trained on the primary purpose of the product—to create content.

As the user mouses over each of the post options, only the subtitle changes: "try writing about something you did today;" "try linking to a cool website you like." The language is clear and concise, the value inherent to the directive, and the user begins to conceptualize the variety of things she can achieve with the product despite the very simple interaction that is required.

At any point in the process the user can "x-out"—close the large bubble and exit to the main interface—without further interruption, but the copy and visualizations are compelling enough to urge her forward.

Once the user posts something, the next step in the onboarding process is to customize the blog. Now everything on the screen is dim except for the location of the Customize link. Not only is the user being taught about the ability to customize, she's also learning where to access the functionality later on when she needs it again. Now that the user knows how to post content and customize her blog, the last step in the onboarding process is to "Follow some cool people!" One of the biggest differentiators for Tumblr is its highly active community, but until a new user is connected to several other bloggers, she might not truly comprehend its magnitude. Tumblr overcomes this by encouraging users to find their friends early on, in a variety of methods. A user can scan for contacts in an existing email address book, or follow people under Staff Picks, Music, or Art and Artists. By observing the usage patterns of these popular and highly active users, new users will most quickly understand how to use Tumblr to their advantage, nearly guaranteeing more frequent use of the site.

Other variations on onboarding

Onboarding can sidestep the sign-up process entirely. TripIt, a travel itinerary and planner site, allows users to simply forward the site a recent travel confirmation email and TripIt takes care of the rest. By sucking in all of this content automatically, TripIt removes any effort new users have to put into the first-time experience and can almost immediately present the site's value. They do have a sign-up process (just an email and password), but it is not required to see their tools in action. This strikingly reduces the barrier to entry and is still rare enough to make a user sit up and take notice.

When it originally launched last year, Yahoo!'s Shine, a website for women, had an interesting take on first-time use. Though it is no longer live, Shine's onboarding process wasn't directed at recent registrants, but instead was directed at first-time visitors to the site to help orient them to its variety of features. On a user's first visit, a "Welcome to Shine" layer appeared in the center of the page. It said, "Shine features the best writers and bloggers in women's publishing. Plus, connect with likeminded women, share stories and more. Take a ten-second tour to see more."

By clicking the single call to action, a Continue button, the user was moved all around the page, with the browser auto-scrolling accordingly. It was a three-step process that also used the familiar bubble pointing at the functionality on the page with a short description of its purpose. It highlighted access to Yahoo! Mail in the sidebar, a recent activity stream of user-submitted content, and a quick-access headline list at the very bottom of the page. In the last bubble was a Get Started link that ended the onboarding process and scrolled the user all the way back up to the top of the page.

Suffice it to say, there are a variety of ways to handle a new user orientation. The user's mindset and the site's business goals, brand identity, and value proposition must all be taken into account. After all, this is the first impression, and you know what they say about those.

ABOUT THE AUTHOR(S)

User Profile

Whitney Hess is an independent user experience design consultant based in New York City, a strategic partner with Happy Cog, and user experience consultant for Boxee, among other startups and major corporations. She helps make stuff easy and pleasurable to use. She received a Bachelor of Arts in Professional Writing and a Master’s degree in Human-Computer Interaction from Carnegie Mellon University. She writes about improving the human experience on her blog, Pleasure and Pain and can be reached via Twitter @whitneyhess.

Add new comment

Comments

25
26

Trend is really a topic that looks a little mind-boggling to many men and women at times. It is because it appears as if there exists always excessive information and facts that you simply are not able to stay informed about with regards to design, this isn't true. If you want to become familiar with a little about fashion then read on. .

There may be nothing wrong with wondering your buddies to use their clothing. You may borrow their garments to discover what type of clothing may appear good for you. . This is an excellent way to see if a friend's type is perfect for you and if you think comfy altering your current style.

If you are going to your night official celebration, then a dark suit is a wonderful selection. Nonetheless, an event from the morning or the middle of-day time demands more pleasing shades. Individuals putting on black colored in the daytime tend to be undertakers, priests, magic formula brokers or funeral service participants. If you are not seeking at this particular persona then you should prevent dark suits within the day time.

Make an overall style. Consider a distinct celebrity you want to design on your own after, or perhaps a persona in the video you want to look like. This way, . you can have some thing under consideration whenever you go buying. It will give you a place to start, and that will assist you to picking items you really like.

Bear in mind to bring the footwear you intend on using to some special event alongside while you shop for your ideal dress. This enables you to discover how the sneakers seem with all the dresses you are interested in. It will also give you a sense of any modifications that may need to be made.

Add-ons are your best friend. You are able to consider any aged outfit that might be really boring or plain by itself and gown it with remarkable extras. . Put an ideal pendant or brooch to your little black attire, and you've taken that LBD from typical to wonderful by two secs flat.

Some people have to dress in stockings with their sandals for sanitary reasons. Nevertheless, this is extremely unfashionable and can not allow you to get in the design hallway of fame any moment soon. Sandals are appear significantly better without having socks. Remember this to help keep from generating an embarrassing trend blend up.

Make a splash when you are out by taking the ideas in this post and making use of these to enhance your clothing collection. Look fashionable and check wonderful everywhere you go. Make men and women keep in mind you by utilizing the information and facts in this article, and you'll be remarkable making a solid statement without having declaring anything. .

25
28

Awesome article! It would've been great to have some screenshots but the examples you used were great. I especially liked your point about knowing active users' behaviours and getting new users to complete those actions too.

Have you heard of Kera? We have a platform that allows people to build and deploy interactive tutorials for web applications. I'd love to get your thoughts on what we do.

You can see live tutorial on our page:
http://kera.io

I just followed you on Twitter by the way.

Cheers,

@taigeair

27
33

In my opinion, when people are faced with lots of interactions on screen, considerable cognitive effort is required. Adding TA to this experience will inappropriately add more cognitive load to the task that would not normally be present. This can lead to misleading additional eye fixations and dwell times on outputs, which clouds the analysis. Often a poor facilitator will prompt users to the next stage (when was the last time someone knocked on your door and helped you find the right button when you browsed at home?), again spoiling the desired realism while testing.
-------------------------------------

27
30

Wow. Somehow posted this comment on the wrong article. Sorry about that. Whitney, I love your article on onboarding!

27
19

Moira,

This piece is very reminiscent of the presentation you gave at last year's Customer Experience Forum. I was intrigued by some of your thinking and recently wrote an article that was a continuation on some of the topics you introduced last year: http://www.erinlynnyoung.com/544/the-nature-of-innovation-2/.

In your opinion, how has the landscape has evolved over the course of the past year?

25
26

Great idea, thanks for this tip!

23
21

Sometimes it's really that simple, isn't it? I feel a little stupid for not thinking of this myself/earlier, though.

30
26

Damn, that sound's so easy if you think about it.

28
21

Hey, ok, I get it, I guess - but does this really work?

20
24

Good tips Whitney, will keep these in mind in my next app design

18
25

Just bought this book after reading this article... great read... definitely something i'd be using for my next UI. However, I do have a question. I understand that it is important to walk the user thru to using the website, but what are the key points to keep in mind that these helpful tips do not appear to someone who is visiting the website quiet often... I'm assuming it might get repetitive to see the same bubbles popping up all the time. I know it happened to me when Windows XP came out with the bubble feature to help you guide on how to use your new OS.

What are the limitations? What are steps to avoid a power user of the website from not going thru these steps over and over again?

I definitely agree that this feature is really great for your first time user and first impression is where it counts the most, but what about the regular users? Please advice

28
25

Sessions, cookies and remembering who has been there before and who does not need to see this stuff again.

26
25

Dhruv, a great way to ensure that you aren't revealing the onboarding cues to more regular users is to use a browser cookie to detect how many times a user has visited the site. If no cookie is detected, display the onboarding flow for a first time user. If they've only visited once before, greet them and thank them for returning, then draw their attention to parts of the site they might not yet be aware of. I don't think there's a hard and fast rule for when to tune it down, but I personally wouldn't implement anything for a third-time visitor or greater.

Best of luck! 

28
28

I love the tenants of "accommodate, assimilate, and accelerate" when designing an onboarding process. I think it's right on!

First time impressions are a huge part of good brand building and it's something that's very difficult to do online because of the fleeting focus of those who visit your site. If the experience delights your guests they'll register, come back and become evangelizers.

I'm a UX & UI designer. At gamaerDNA.com I designed an onboarding process that really focused on delivering the value of the product to our customers. It was great to rely on API's from popular online networks like Xbox Live and Xfire. Being able to connect to and import lots of existing data added to the "accelerate" tenant of onboaring. It became effortless for our registered users to get immediate value out of the product.

Nice post. I'll definitely look into this book.

22
22

I'm reading this book and it's fantastic.

Really a must have.

I'm reading so slow because often I find myself wanting to take notes in the middle of my reading. It's quite inspiring!

22
27

Thrilled to hear it, Marco. Yes, it's a great resource and a true desk companion.

25
31

Great insight... I will be piking up the book here in the near future.

I work for an online classifieds company so these techniques are very helpful, I will put them to use in finding ways to instruct/lead users on placing ads, and doing it in a way that makes them want to use the service again and tell a friend.

23
29

Aaron, I'd love to hear what onboarding techniques you put into place and any results you find. Thanks!