How to design an awesome app onboarding experience. Hint, don’t start with the app.

That’s right. I’m saying forget the app when designing an app on boarding experience. “Whaaat?” I hear you say. Ok bear with me.

I think the app should be the very last thing you think of when you are designing a successful on boarding user experience. Why? Well before your user comes to that gloriously designed splash screen, they have already begun to experience your app through multiple touch points. Think about it.

Where is the first place a potential user could be introduced to your app? Here’s a few ideas;

  • App store
  • Dedicated website
  • Print promotional material
  • Word of mouth
  • Social channels

There are multiple digital and physical start points, that with a little focus and planning can help build supporting journeys to convert viewers into users.

Multiple digital and physical touch points

Ok, so what can we do to make sure that our on boarding journey is as effective as possible? Well theres a few places we could start;

  • Define and prioritise user onboarding journeys
  • Use copy to create expectations
  • Specify call to actions — aim, trigger, target

Intrigued? Let’s get into the details.

Define and prioritise user on boarding journeys

As I pointed out at the start, there are multiple touch points that create both digital and physical journeys for potential users to connect to.

What you need to do is identify these journeys and define the core focus for your onboarding. Ask yourself if your social channels should point users directly to the app store or to a microsite? Do you even need a microsite? Can you say everything you want to say in the App store channel? Simple questions like this will help you to map out the primary journey and then focus content and calls to action on supporting journeys to help direct potential users.

An example of how multiple journeys can be prioritised

In the above example, I have all my secondary journeys feeding into the primary at the same point — the dedicated website. This could be because I want to leverage SEO to make my app more “findable”, show off complex features or perhaps develop the brand with more related content such as a blog.

From a simple map like this I can then decide what content I need and where I need it.

Use copy to create expectations

Now that we have a map of the on boarding journeys, we need to think about the copy and call to actions that will support this.

An approach I take is to think about a users expectations. From setting expectations, to reassuring those expectations, and finally meeting those expectations.

What does that mean practically?

Well lets look back at my journey map example. One of the most distant touch points from the app is the Twitter social channel.

Here we have a very small space so we need to focus on the purpose and the job that we want to achieve at this point. For me, its about setting an expectation and a clear action for the user.

An example of how to set expectations

In this Tweet example for a camera app, I’ve used an image to grab the users attention, a few key bits of copy to give a basic understanding and then a clear call to action with a readable link.

Now when a user clicks the link they can expect to go to a website promoting a camera app.

The next job is making sure that when they land on this website that it is indeed meeting that expectation we previously set but also reassuring them they are in the correct place.

A simple, clear heading and lift pitch can do both those jobs in one go.

An example of how copy can set, reassure and meet expectations.

Now that we have an understanding of expectations, we need the users to actually download the app, and that’s where call to actions come into play.

Specify call to actions — aim, trigger, target

Ok the phase “call to action” is pretty much a Ronseal term — aka “does what it says on the tin”. It’s a signpost, a flag, a signal — all with the purpose of directing a user to complete an action.

I like to think of call to actions in three components; the aim, the trigger and the target.

The “Caroline’s Call to Action” theory.

In our Tweet example, the purpose of the call to action is to get the user to navigate to the dedicated website — aka the target. The copy “Find out more about our new iOS and Android app” is taking aim, basically giving a user a reason to act, and finally we have the trigger in the form of the link allowing them to do the “thing” we want them to do.

I think the best “call to action” examples have a clear separation of the three components. A “download” button doesn’t have to work as hard as a trigger if its got the support of the two other elements.

Let’s recap

They say that having a summary is usually a good idea when writing tutorial-esk articles, so here is a lovely step by step that sums up the past 3 minutes of your life;

  1. Identify your core priority journey and then define how other touch points feed into it.
  2. Set, reassure and meet expectations using copy and content.
  3. Guide and direct users with clearly defined call to actions.
  4. Celebrate with a cat party*

*Optional step. However, if you do please capture the moment with #catpartyapponboarding — not a clever hashtag but it sets an expectation.

Hopefully this will help you to think a little bit more about the wider UX universe that your app lives in. Look out for the next article that will focus on the actual in-app on boarding experience and how we can enhance with all the awesome.