How we updated our onboarding experience and got more users

Methods we used to increase conversion by 60%

William Woodhead
Feb 20 · 7 min read
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, (while working on our brand management software), 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?

“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

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 to communicate to them or what the end goal was.

Introducing the Magic Moment

The Magic Moment is when a user suddenly understands what the core value of your product really is. 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.

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

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

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

The Google Photos Welcome Modal

Contextual popups

Asana Tooltip

Empty Space

Bear app — smart empty space

Progress Indicator

Sentry setup progress indicator

With these options in mind, we plotted this table to work out 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.

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

  • Communicate some core user benefits of the app.
  • Purpose — get users to hang around.
User benefits slideshow

Contextual popups

  • Show them the most important features and buttons.
  • Product Hunt themed to give visitors from Product Hunt some visual consistency.
  • Purpose — get users to the Magic Moment
Contextual popups — the swoosh

Smart use of Empty Space

  • Purpose — never leave a user outside of a flow
Pilcro’s empty space call to actions

Progress indicator

  • Purpose — push users to behave how we want them to.
Progress indicator in %

And the numbers don’t lie

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

Conversions to the product

We grew our overall sign in conversion by 60%.

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?

  • 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

Pilcro offers free brand management software for G-Suite.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

William Woodhead

Written by

Designer | Developer | pilcro.com

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade