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.”
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?
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
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.
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.
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.
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.
Take over the whole screen, forcing a user to stop in their tracks to show them something useful.
The Google Photos Welcome Modal
Information when and where the user need it. Tooltips are the most common example of this.
Use empty lists and grids in the app’s UI to show helpful tips and call-to-actions.
Bear app - smart empty space
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.
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.
At this point, we had all the pieces of the puzzle ready.
We had identified the different user-types.
We had identified the strategies to use for our user-types.
We had identified UI components to realise these strategies.
Time to put it all together.
Only on first visit
Communicate some core user benefits of the app.
Purpose - get users to hang around.
User benefits slideshow
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
Contextual popups - the swoosh
Show call-to-actions where there is no content
Purpose - never leave a user outside of a flow
Pilcro's empty space call to actions
Show users a percentage bar of how much of a ‘power-user’ they are.
Purpose - push users to behave how we want them to.
Progress indicator in %
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.
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.
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!
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.