Pine

User onboarding done right: 10 great examples

The first experience a user has with your product is beyond crucial – this is their first impression on how friendly your product is to use, and their first impression on how long-lasting their use of your product will be.

Why is user onboarding so important?

Many businesses believe that the moment of “sign-up” is where they have already won over the customer, however, this cannot be true in a world where between approximately 50% of users will open a software once, sign up, and never log in again. Most businesses require two milestones to be reached before their customers reach full value potential; first, would be the signup; second, the “first success” with the product. In between these two steps, there is a HUGE amount of customer churn, users who are abandoning the product because they cannot understand a function, get lost in the steps or lose interest, or simply stop seeing the product as valuable. In conclusion, user onboarding: is the place keeping your users comes down to. 

In order to avoid these mistakes here are some great examples of user onboarding that we can all take some pointers from!

1. Setting Expectations: Etsy 

Users are human, and designers often forget that when planning their onboarding. We are all painfully aware of how long processes should take, and how much of our lives we are willing to give up for the set-up of certain products, yet when designing an onboarding process this usually flies out the window – because we want to be as thorough as possible. In order to not lose your users at the very beginning of onboarding some businesses have implemented the more than successful progress meter, like Etsy:

This type of progress meter both sets expectations as well as keeps the user motivated.

2. Educate, Befriend & Draw Attention to Certain Element: Slack 

Humans need a bit of guidance –Slack knows this: for exactly this reason they are leading their users in the direction of understanding their functions. The whole user onboarding process begins with a very simple sign up followed by a pop-up preview of the workspace which quickly explains the functions and spaces within the app. Slack is introduced to you via their mascot the Slackbot, who is there to host as well as interact with the users to make a more meaningful onboarding process.

Slack also does a great job of not saturating users with their informational tips and uses large overlaid instructions directly on both your mobile or desktop device in order to both guide your eyes to the tips, but at the same time be easy to avoid- and non-invasive in your tasks.

Lastly, one of the most amazing things about Slack´s onboarding process is the fact that they use the empty states in order to use the time as educational, by realizing when you are in the app without anything to do. The app takes these spare seconds to educate you on cool new features with perfectly worded micro-copy.

3. Breaking Things Up & Down: Dropbox

One of the most common, as well as the most offputting errors in onboarding is asking users to do too much from the very beginning, it overwhelms the users and even frustrates them to the point of leaving it for later (or worse, forgotten). In order to avoid over-informing your user, you can look at beautiful examples like Dropbox – who have made every step of their onboarding process as short and sweet as possible.  

The first introduction to their product they ask you to upload a single file – to walk you through their process, which can later be repeated with all your files. 

Then Dropbox shows you their most important functions, such as their file sharing tool, all the while keeping you informed how far along you are in their onboarding process.

4. Make It Optional (aka Skippable): Airbnb

Most products are quite intuitive, and most users are already familiarized with products before they use them: this is why integrating a skip option is generally advised – your new users aren’t always necessarily “new,” there are a multitude of scenarios where your well-versed users would have to re-onboard like switching devices etc. Airbnb for example makes this their very first option: 

The Skip button is placed loud and clear at the center to avoid any sort of inconvenience and repetition to the user. Only after are users presented with the option to sign up or log in. 

5. Gradual Engagement & Product Experience: Duolingo

There aren’t that many apps that start with the product first, to then end in the signup form – but we love it! Duolingo has strongly attached themselves to the notion of gradual engagement to maximize their utility for users before asking for information. Gradual engagement is the idea of postponing the registration for as long as possible, ideally to the point where you can no longer continue without the registration, but also have invested enough time to see whether the product works for you. Duolingo also uses a cute (and somewhat manipulative owl):

The Mascot asks you simple questions: What your goal is, what your purpose for learning is and it also helps you take a placement test. Do you want to start with the basics or do you already have some experience? No worries Duolingo will tailor your education to your needs. 

Users can complete entire learning sessions without having to complete the registration, allowing them to take the time to decide on their investment. Furthermore, Duolingo uses a gamified system ultimately pleasing the user with their progress, and rewarding them on their efforts.

6. Learn by Doing & Personalisation: Grammarly

Your personal writing assistant, which you chose. The very first thing that Grammarly asks you to do is to personalize your needs – all the while showing you how to use their software:

Then they guide you through a series of animated modular windows that have a pop-up feature, as well as incorporate the “completion bar” mentioned previously with Etsy. The way to learn how to use Grammarly is simply to use it. While you are fixing your errors, grammarly teaches you the ins and outs of their product by drawing your attention through hotspots highlighting a tool and its brief explanation.

this is a gif image of grammarly's demo doc with hotspot beacons and tooltips

7. Making the Most of Your Product: Canva

One of the most fun and creative onboarding examples I always come up with is Canva. This design software (available both on desktop and mobile) has one of the smoothest onboarding processes- they show the user how to make their very own beautiful design. Good UX requires some guidance and instruction…really good UX requires its users to be active and engaged: in all cases, Canva nails it! 

First they ask you the general direction, in order to find the most tailor made alternatives for your design project:

There is a short onboarding video, however, the creators of Canva know that “showing” is not the same as “doing”, and so they are committed to helping each one of our inner designers express their creativity:

Then they ask users to create their own image, following the instructions on the right side. This way they ensure that each one of their users understands the value of their product and which cases they can apply it to.

8. Personalized Onboarding & Clear Pricing: Netflix

Netflix features a potentially overwhelming, endless well of choices, that could really intimidate first time users – but it does exactly the opposite! While before Netflix users were accustomed to pricy streaming services that also chewed through their data plans and slowed down their network performance, Netflix cleverly avoids these old frustrations by having an upfront and personal flow with their users: a nothing to hide attitude. The first thing Netflix addresses is the payment:

Showing the new users the pricing, then offering them a free trial month is the way that Netflix gets you hooked! It is also a great tactic to get more paying users, and incrementing their willingness to pay by giving them full benefits of the product from the onset. But none of this is what truly captures paying customers: it is their personalization algorithm, the software asks the user to rate a selection of movies on a sliding scale according to different metrics- and this is where the magic happens: Netflix produces a list of recommended content: much like Amazon or Spotify once they learn your preferences. By keeping users engaged and in discovery mode – the trial month soars by, leaving users wanting more.

9. Tailored to Knowledge: Just In Mind

Who would think that creating a web or mobile app prototype could be so simple! As a beginner or as an advanced designer, Just In Mind is the friendliest UI prototyping tool, and this is all because of their tailored onboarding process. This software enables its users to create interactive prototypes for anyone at any level. 

New users are instructed to download the wireframing and prototyping app, and open the web app where the user is presented with two alternatives: “full mode” for the seasoned UI designer complete with all of Just In Mind´s full range of actions and palettes, or, “beginner mode” which guides users through the interface with tips and tools that are interactive as well as are supported by short YouTube tutorials. Once a user feels like they are up to speed they can switch to Full Mode at any time. 

10. Clicks Needed to Create an Account: Revolut

Revolut is an online banking success story from any angle, and you may ask why. They banked on trust. They designed an engaging UX, with a well-designed UI that gained the trust of 180K customers in its first 90 days. Revolut looks and feels good to each user: they have us captivated within less than 8 seconds of being on their homepage: 

The design inspires trust and confidence and helps the user navigate, and in comparison to other banking sites it is CLEAN. There is no unnecessary information being given – and you can choose the quantity of information you want to get. Another thing that Revolut decided on beautifully is their color scheme: blue and magenta one providing a heightened sense of security (also the reason most banks use the colors in their branding), and the later suggesting innovation and creativity. The result is a bank that conveys innovation, revolution, all while being a professional entity that handles your money. But this is all just beautiful UX, now lets talk about the real deal: their onboarding process…

While other banks require an immense amount of steps (as you can see below):

Source: https://builtformars.co.uk/banks/opening/

Revolut beats the competition by a long shot. Now let’s turn to their expertise in making their app accessible:

Other mobile applications usually take 8 steps to complete from discovery to first opening of the app, the more steps there are the more opportunities the user has to be interrupted in their process. Revolut has simplified this into 5 steps – reducing the opportunities for interruption to 4, making the new user less likely to drop out of the download process.

Last Words

Getting to a great user onboarding experience is a never-ending journey. The examples mentioned above are constantly evolving and transforming to meet the needs of their expanding user base. The key takeaway is to always ideate, innovate, observe, test, and learn to constantly improve, just like design thinking practices dictate.

Laura Brazay

Laura Brazay

Digital branding specialist with experience in social media strategy, and a background in Business Administration, who sees life in the full spectrum of colours. I spend my free time taking long walks exploring the city with my pup.

Add comment