On-boarding – a quick guide to mobile apps

How do you design an app? Paraphrasing Samuel Hulick from useronboard.com it is common to think of an app in its running state populated with the meaningful set of data.

Usually users don’t get that experience when they start. You’re lucky if you can pre-populate the main screen with a fancy feeds coming from various sources like Instagram or Pinterest but most of us are not that fortunate to have a database full of meaningful data at the start to present it to the user. Sometimes it is because of the nature of the service.

Imagine you developed some marketing tool gathering intel on the client’s brand over the web due to their customer behaviour. But before you get those data what can you show?

Ha, gotcha!

The good idea would be to present some instructional materials for your clients not only how to use the service but how to promote your brand in terms of manuals and tutorials. So even before they gather some data, they can benchmark their current state and star improving their ecosystem immediately.

If you are repairing the damages now it is too late to have a good on-boarding experience.

How to start?

Let’s set one thing straight. If a user downloaded an app it doesn’t mean they know that it does or how to use it. The reasons might be numerous. Think of users motivation for downloading the app:

  • It was in Top ten so I wanted to check it out
  • It was in financial section so I thought I would make payments with it
  • I saw it at my friend’s phone and wanted to know what it is

So don’t assume. Treat users as the ones who virtually don’t have a clue what your application is about. Let me show you some great examples:

Google Hangouts

Google Hangouts onboarding

Payfriendz

PayfriendzSlack

SlackI bet I don’t need to explain you what all of mentioned apps are about. And please download the Slack app as well. All of those images presented above are micro animated so it brings the on-boarding explication to the next level.

Warning: But don’t go too far! Take a look at the Telegram initial screens:

Telegramand those are not all of them yet.

Even if you are having this helpful sneak peek to your app always be moderate and provide a CTA to omit the explanations and get started for the ones who have the previous background with your app.

What now?

So the users managed to get to know what it’s all about and we are ready to ask them to sign up. This should be always incentivised or justified:

  • Why do they want my email address?
    Because you can restore your account with it
  • Why do they want my phone number?
    This will be your main identifier, so even if you switch to a new device you will be able to use this app
  • Why do they want my location?
    We are the restaurant locator app. It will be more convenient for you to simply open the app and explore what’s nearby rather than typing your location in all the time
  • Why do you want my account number?
    So we can trasnfer you cash back

I see many apps asking for my sensitive data without justifying it at all. A red alert goes off in my mind and I am really concerned if I should install the app collecting much more data that needed.

So this is Payfriendz again asking about my data which I believe does it in the right way:

Screen Shot 2015-09-11 at 14.04.59

And Paypal:

Paypal

I’m in!

And you get this blank page with no content and no tips. What to do about it? If you are think about it now it’s too late. The great idea I came across is from Samuel Hulick  design your UX not for running state but for initial state and then make progress for the running state rather than the other way round.

And remember about the copywriting. How do you think, which is better:

  • “Your account balance is zero” vs. “Top up your account to make your very first transfer”
  • “You have 0 friends” vs. “Let your friends you’re around. Invite the ones from your contact list”

 On-board me again

Should we think about on-boarding experience just in the terms of new users? Of course not. Remember about users who stopped using your app for a longer period of time and returned or you redesigned it significantly and maybe some explanation would be needed to send a message that “We are getting better for you. Let us show what we changed. Do you want us to show you around?”

And one more thing

Do not ever block the user to use the app by having some layers, modals or other annoying shapes covering the whole app area. At the beginning it might look like a great idea: “We’re going to use 3 arrows to point out the main features of our app. That’s it!”. There is a high risk, especially in vendor<->client environment that you will end up like this:

I’ll just leave you with it :)