Onboarding for First-Time Users

Published in

@hellotegra

3 min readJun 16, 2020

Onboarding for First-Time Users 🍀

Courtesy of @_ayushjangra_
⠀
Onboarding is a virtual unboxing experience that helps users get started with an app.
⠀
Onboarding is one point in a long journey that begins in the app store and ends with the user taking the first key retention-correlated action in your app 📱
⠀
When designing your onboarding, consider the screens that came before it and those that will come after it.
⠀
Show onboarding to first-time users ✔
⠀
Don’t show it to returning users ❌
⠀
Cheers! 👋

3 onboarding models

There are three onboarding models: self-select, quickstart, and top user benefits.

Self-Select
Allow users to customize their experiences.

Quickstart
Start the user directly in the app.

Top user benefits
Display a carousel or a brief animation highlighting the benefits of using the app.

Self-select model

The Self-Select model allows users to customize their first-run experience by making a short series of choices.
Choices should:

Be meaningful and noticeable
Provide new information
Be short

Quickstart model

In the Quickstart model, users land directly in the UI without any onboarding model shown (other than sign in and setup).
The Quickstart model:

Enables users to quickly get started with the core functionality of the app
Often prioritizes the first key action
Can also provide an optional way to learn more or ask for help

Top user benefits model

The Top User Benefits onboarding model contains a brief autoplay carousel, or animated storyboard, that highlights the primary benefits from using an app.

Problems that the app solves
The primary benefits the app creates
The app’s “toothbrush features” (meaning, a feature you would use once or twice a day)

Mobile and tablet portrait

Specifications
Headline: Type 24sp, Leading 32sp
Subhead: Type 16sp, Leading 24sp
Line Height: 32sp
Padding between the top of button and center of copy: 56dp (allowing for 1–3 lines of text)
Vertical padding from image to pagination dots: 24dp

Mobile and tablet landscape

Specifications
Headline: Type 24sp, Leading 32sp
Subhead: Type 16sp, Leading 24sp
Line Height: 32sp
Padding between the top of button and center of copy: 56dp (allowing for 1–3 lines of text)
Vertical padding from image to pagination dots: 24dp

Desktop

Get 50+ Marketing Tools we use in Tegra 🤘

Follow the link 👉 tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.