Contribute
follow

William Woodhead

Designer | Developer | pilcro.com

The Elements of Good User Onboarding

Pilcro Artboard  - User Onboarding

As a product designer and developer, I have spent a lot of time thinking about the elements of a successful User Onboarding experience. It’s a difficult process that is crucial for good conversion, and it is often overlooked.

In this piece, I’m going to describe the process we went through so that you can apply the lessons we learnt for your own User Onboarding flow.

Why listen to me? Well we recently grew our overall sign-in conversion by 60% after launching our User Onboarding flow as part of our product launch on Product Hunt. Here’s what Jonathan Price had to say about it on the day of the launch:

“The Product Hunt themed landing page was really outstanding — possibly the most polished Product Hunt launch I’ve seen. Great work.”

So what is User Onboarding?

Here’s a definition from trychameleon:

“User onboarding is the system of actively guiding users to find new value in your product.”

So it’s all about communicating valuable features to your users.

But who are these users? Are they first-time users? Are they new(ish) users who are returning to your product?

And what does “value” mean? Features that users might value? User behaviours that you might value? eg. sign-ins or subscriptions?

Immediately it’s clear that User Onboarding is not a straightforward UX task.

We have multiple users-types, and multiple features that we think the users would find valuable. How do we make sense of it all? How do we communicate the value of the product in an effective way? And then what are we actually trying to achieve by showing-off features to users?

First step - Audit your user journeys

It might seem obvious, but the first step is working out how new and existing users move through your app. Is there one journey that everyone takes, or are there multiple different paths?

We did this step with the help of the General Assembly UX students who employed user-testing to understand how new users experienced our app for the first time. This process also helped us categorize our users into three different user-types:

  • First 20 seconds

  • First session

  • First month

At the end of this process we had a much better understanding about how users moved through our app. But we still didn’t know what value we wanted them to communicate to them or what the end goal was.

Introducing the Magic Moment

In the depths of our confusion about User Onboarding, we came across this video. It talks about how Facebook designed their user journeys to get users to a “Magic Moment”.

The Magic Moment is when a user suddenly understands what the core value of your product. It’s the moment when a user "gets it". For Facebook it was when you saw a photo of one of your friends.

For us at Pilcro, we realized our Magic Moment is when a user copies a brand asset for the first time. This is when they truly understand why they should use Pilcro.

With the Magic Moment in mind, we devised this table to help order our thoughts.

pilcropilcro

Then we tried to map these same aims to possible strategies of achieving them.

pilcropilcro

At this point we had some strategies to achieve the aims. It was time to look into what visual Onboarding components were available to us - what tools and tricks could we pull out of the User Onboarding locker to make it all come to life.

User Onboarding Options

After all the analysis, User Onboarding still comes down to writing some UI components that communicates value to the users. So what are these UI components? What options are available to app developers and UX designers?

There are of course infinite options for User Onboarding components, but here is a concise list of our favourites with User Onboarding example images from other apps.

Modals

Take over the whole screen, forcing a user to stop in their tracks to show them something useful.

pilcropilcro

The Google Photos Welcome Modal

Contextual popups

Information when and where the user need it. Tooltips are the most common example of this.

pilcropilcro

Asana Tooltip

Empty Space

Use empty lists and grids in the app’s UI to show helpful tips and call-to-actions.

pilcropilcro

Bear app - smart empty space

Progress Indicator

Show an indicator of how well the user is doing. This can last for the entire lifespan of the user on your product and can be gamified.

pilcropilcro

Sentry setup progress indicator

With these options in mind, we plotted this table to workout which User Onboarding options suited which user-types best and why. The green squares are the best fits while the red squares are a bad fit.

pilcropilcro

At this point, we had all the pieces of the puzzle ready.

  1. We had identified the different user-types.

  2. We had identified the strategies to use for our user-types.

  3. We had identified UI components to realise these strategies.

Time to put it all together.

So what did we actually do?
User benefits modal
  • Only on first visit

  • Communicate some core user benefits of the app.

  • Purpose - get users to hang around.

pilcropilcro

User benefits slideshow

Contextual popups
  • Get users familiar with the interface very quickly

  • Show them the most important features and buttons.

  • Product Hunt themed to give visitors from Product Hunt some visual consistency.

  • Purpose - get users to to the Magic Moment

pilcropilcro

Contextual popups - the swoosh

Smart use of Empty Space
  • Show call-to-actions where there is no content

  • Purpose - never leave a user outside of a flow

pilcropilcro

Pilcro's empty space call to actions

Progress indicator
  • Show users a percentage bar of how much of a ‘power-user’ they are.

  • Purpose - push users to behave how we want them to.

pilcropilcro

Progress indicator in %

And the numbers don’t lie

How did we know that the User Onboarding design worked? Here are the stats.

We more than doubled our conversions to the product from the website in the week after deploying the new user onboarding.

pilcropilcro

Conversions to the product

We grew our overall sign in conversion by 60%.

pilcropilcro

Admittedly, the launch helped with these stats as there was more buzz around our product. But the new User Onboarding undoubtedly played a crucial role in the success of the launch.

Afterthought - Why is User Onboarding so difficult?
  • Product owners are too close to the product. How can a product owner possibly know how it feels to experience their product for the first time?

  • Different users find value in different parts of the product. So guiding them to find value is not a linear journey that all users share. Different users might have different Magic Moments.

  • Different users behave differently and move through your product differently. Some users like having their hand-held when Onboarding into a new product, some users just like to dive straight in and play around. How do you craft a UX experience that serves the Onboarding needs of all different users?

  • Different users have different knowledge of your product. So how do you know how much information to give someone?

  • The tech behind crafting a good User Onboarding experience is often very complex as it requires adding a whole new visual layer to your application.

User Onboarding is a complex challenge because you have to deal with a matrix of different users, features, aims and behaviours. However, if you approach it in the right way, you can make you app really shine for your new users. Good luck!

Experience it for yourself

Check out our user onboarding for yourself at this link. Let us know what you think!

Pilcro offers free brand management software for G-Suite.

You Need To Build Your Brand Identity MVP

Patrick Woodhead

Perfecting Your Brand Doesn’t Have To Be Expensive

William Woodhead

Is Your Brand Contactless?

Patrick Woodhead

© copyright Pilcro - take the pen limited 2019

Product

Company