great examples of user onboarding in app design - turning a first-time user into a repeat customer

23.11.2012

sodostudio.nl

app designGreat examples & guidelines

Onboarding in

sodastudio.nl

Research showed that 22% of downloaded

apps are only used once.This is why a good first time use experience

is of crucial importance for the viability of

an app or website.

http://www.localytics.com/blog/2012/app-user-loyalty-increasing-ios-beats-android/

As a result, we’ve seen an increase in the

number of onboardings in the last few years.

Onboarding is the process of turning a

first-time user into a repeat customer

during the user’s first interaction

with your product.

good examples of onboarding

in five different approaches.

In this slideshow we’ll show some

1.

2. Explain functionalities

3. Explain interactively

4. Onboarding during use

5. Blank slate

Explain the value-proposition

• Improve the interaction between service provider and customers

• Improve the interaction between service provider and customers

step-by-step onboarding sequence.

Show what’s relevant for the user in a

1 Use limited content per panel.This makes information easy to digest.

FeedlyPocket

1 Provide the number of steps.In order to manage expectations.

Gmail Pocket

1 Skip it!Make sure the user is able skip the introduction.

Airbnb

2.

3. Explain interactively

4. Onboarding during use

5. Blank slate

1. Explain the value-proposition

Explain functionalities

Explain hidden functionalities which are

crucial for the operation of the app.

2 Explain hidden functionalities.By showing them in an image (500 px) or by using inline hinting (Directr).

500 px Directr

3. !

4. Onboarding during use

5. Blank slate

1. Explain the value-proposition

2. Explain functionalities

Explain interactively

Put learning into context and provide users

with feedback. They will better understand

and remember how things work.

3 MotivatePositive feedback makes learning fun and emotionally engaging.

Mailbox

3 Store itShow where the onboarding can be found.

Weathercube

!

!

5. Blank slate

1. Explain the value-proposition

2. Explain functionalities

3. Explain interactively

4. Onboarding during use

A big advantage of onboarding during use is

that the app can be used immediately

4 Phased informationUsers don’t have to digest all information at once.

Flipboard Cut the rope

4 Example contentShow how the app works with example content.

Clear app

1. Explain the value-proposition

2. Explain functionalities

3. Explain interactively

4. Onboarding during use

5. Blank slate

The blank slate, often forgotten but

very important to the user.

5 Use itThe blank slate is the perfect canvas for providing hints and tips.

Dropbox 500px

11 guidelines for designing an

onboarding process

Conclusion

• Improve the interaction between service provider and customers

• Improve the interaction between service provider and customers

11. Onboarding guidelines

• Explain the proposition - what is the added value for the user?

• Explain hidden and crucial functionalities - how does the app work?

• Explain the features interactively

• Keep it informative, don’t explain obvious features

• Don’t force users to log in or register to experience the app

• Try to insert a fun and emotionally engaging element

• Limit content per panel

• Communicate the number of steps

• Provide a way to skip the onboarding process

• Show where the onboarding can be found after skipping or finishing it

• Ensure the user moves to a logical page after finishing the onboarding

floor@sodastudio.nl

sodastudioNL

@sodastudioNL