Skip links

User Onboarding Is Your Friend

They say first impressions make all the difference. We as humans tend to make decisions about people after meeting them in the first three seconds. In similar fashion, users of digital products decide whether or not to continue using a particular product in 50 milliseconds.

So, you’ve spent more than a year in research, designing then building a revolutionary product that’s supposed to change how people work, live, and interact but for some reason, users are not coming back or worst case scenario – they don’t even make it past the first screen.

Why?

There is a way to enhance your app or website’s “first impression” to your users that helps them discover benefits, functions, and usage, this is known as a user onboarding.

What is User Onboarding?

User Onboarding is the process of improving the likelihood of a user’s success with a product. This process involves everything along the journey from the first visit to the app store or landing page, to sign up and first user experience. Google calls it “A Soft Welcome”

wbc_article
Illustration by Akinnusoye Kehinde. Designed with Adobe XD

What it isn’t

It isn’t a feature that can be turned on and off.
It is not time-consuming.
It is not an opportunity to do marketing.
It is not always about you.
It is not just a product tour.

As a product designer, it is your job to carefully guide the user through this journey by designing the onboarding process. It helps answer user questions like, “How does this work?”, “What do I do first?” This article helps to point out a few things to get you started.

Goals of User Onboarding

With the arrival of lean methodologies, marketing and product teams have started to work more closely to deliver the best version of their products to their users. As such, the goal of user onboarding is to:
– Welcome users and generate excitement of the experience ahead
– Help users understand how the product works and how it can be used in their lives
– Spur them to take actions that drive engagement with the product and increase retention in the first seven days.
– Improve usability and increase user satisfaction.

Onboarding Models

There are several ways to design a product user interface in a way that gets users to understand a product and show them how it will improve their lives. Some models common across websites and apps are :

Self-Select Model: Allows the user to customize their first experience by making a short series of choices. This model is common in sports/fitness apps, music and entertainment apps (*that require populating a library.) It provides users with an implicit education and a sense of control and vested interest in the screens to come.
Best Practices

To do this right, design the experience so that the choices presented are:
– Meaningful and noticeable
– Providing new information
– Short and concise

Quickstart Model: users land in the product UI without any prior onboarding models. This model is often found in learning, utility and social apps. It helps users to quickly get started with the core functionality of the app, which could also include an optional way to learn or ask for help.

wbc_article
Illustration by Akinnusoye Kehinde. Designed with Adobe XD.

Best Practices

– Give users something to do: No blank screens, rather encourage interaction by providing options in the empty states.
– Offer education: To reduce user confusion, display a prompt that offers the opportunity to learn more.
– Prioritize the first key action: Choose the action most closely linked to engagement in the first seven days.

Top User Benefits Model: Features a brief animated storyboard or autoplay carousel that highlights the key features that improve the user’s life. It is commonly used in products with unique features that bring change to how a user previously solved a problem. Try limiting the user benefits to the most important and useful three.

wbc_article
Illustration by Akinnusoye Kehinde. Designed with Adobe XD

Best Practices
– Maintain visual continuity: Here you enforce the strength of your branding subtly throughout character, typography, visual style and UI elements.
– Simplify: Simplify the visual elements to the essentials by choosing a point of focus per screen. Remember the user’s needs.
– Don’t be UI literal: Don’t show the UI if the user hasn’t had any prior interaction with the product. The UI screen after the onboarding process should make it easy for users to use the product based on what they just learned.

Some general tips for designing onboarding process irrespective of which model you eventually decide to go with include:

– Delight users with micro animations to encourage engagement.
– Ask for feedback on the stages of the onboarding process.
– Keep the copy short and relevant to the context of the user.
– Use visual styles like illustrations and icons to drive home your point.

Next, I’ll talk about onboarding patterns that incorporate these models and are used in both physical and digital products, along with real examples of the good and the bad.

Join the Discussion