Design

A framework for designing a better user onboarding experience

4 min read
Sinziana Chitea
  •  Jan 30, 2017
Link copied to clipboard

After weeks of brainstorming, sketching, designing, and arduous development, your app’s ready to launch. Your team’s enthusiasm is through the roof.

This is the moment of truth: Will the app be successful?

User onboarding has so much to do with an app’s success—really, it can make or break it. Done right, it’ll result in people coming back to use the app again and again.

Great user onboarding feels effortlessTwitter Logo, demonstrates value, and bridges the gap between users’ expectations and what the product can help them achieve.

Related: 5 key lessons for successful user onboarding

Distilling the experiences we’ve had building apps here at tapptitude, we’ve come up with a straightforward framework called instruction-action to better understand and design effective user onboarding flows for mobile products.

“A great user onboarding flow feels effortless and demonstrates value.”

Twitter Logo

The instruction-action framework is based on strategically playing with the 2 building blocks of the user onboarding process:

  1. Instruction elements
  2. Action elements

Instruction elements

Instruction elements are your best friends. Be it annotations, modals, or any other bits of copy, use instruction elements to efficiently communicate to the user how to use the app so they can discover its core value.

Some of the most popular instruction elements:

  • Splash screen
  • Welcome screens (with benefits or features)
  • Annotations
  • Permissions
  • Explanatory modals 

People won’t come back to use your app a second time if they don’t immediately understand how to get the most out of it.

Action elements 

Nir Eyal’s Hook model says the actions someone takes in a product are triggered by carefully designed persuasion elements. Ideally, such elements are a combination of motivational and instructional content so that the user has the reasons to perform a task and also knows how to do so.

“Users need to immediately understand how to get the most out of your app.”

Twitter Logo

When it comes to action elements, think of strategic design elements: clear calls to action and suitable visuals that act as a trigger for the user. The smallest arrow can have a big impact. Signal to the user that they’re on the right track. Instead of guessing whether they should click or swipe, the user will feel encouraged to take action.

Examples of action elements:

  • Sign in
  • Sign up
  • Allow access
  • Actionable tool tip

In any given user onboarding process, instruction elements and action elements work together to lead the user where they can experience the product’s value. How you combine these 2 types of elements depends on the purpose of the screens and the overall logic of the onboarding process.

Some typical examples of purposes app screens could have:

  • Browse through the primary features of the app
  • Present best practices within the app
  • Collect basic user account information in order to set up the app, tailored to the person using it
  • Explain a feature while allowing the user to experience it at the same time; useful and fun
  • Upsell your app’s capabilities: show people the app’s capabilities and offer a glimpse of what more it could do with just a little financial support on their behalf

“Make your app’s core value obvious every chance you get.”

Twitter Logo

Now it’s time to assess how to work with instruction and action elements.

Sometimes people don’t discover an app’s core value the first time they use it. So it’s the responsibility of the user onboarding process to get that person back on track and into the conversion flow. 

Based on this premise, we realized that we’ve got 2 major areas where onboarding happens: outside product and inside product

Outside-product onboarding

What are the chances of someone downloading and using your app without gathering the least bit of information about the product and believing in its promise?

Close to zero.

User onboarding ends with the user experiencing their ‘aha’ moment.Twitter Logo But it all starts with their first encounter with the product, or what we like to call outside-product onboarding. And that usually happens long before using the product itself—on social media, the product’s website, or in the App Store. During these first encounters, the user establishes their expectations about the product and jumps inside the first phase of your conversion flow. 

And this is just step 1 of outside-product user onboarding. 

Think about Deliveroo’s App Store screens. Isn’t this what you’ve always wanted from a food delivery app? They’re spot on in presenting the benefits of the app.

Say you’ve convinced someone to download your app, and then they open the app for the very first time. What will this experience entail?

This is where step 2 of outside-product user onboarding takes place. 

You could use a few instruction elements (nice visuals and bits of copy) and action elements to get the user inside the app. Show the user the most compelling benefits of your app in a few nicely designed screens, and encourage them every step of the way to try it out for themselves.

Related: Copywriting principles that will make new users love you

Another approach: Make it clear to users that sharing information about themselves will be rewarded in the long run. Use instruction elements to make your intentions clear, and action elements to point the user in the right direction. 

If you’ve managed to spike the user’s interest and motivate them to give the app a chance, you can move on to the second major area of mobile user onboarding.

Inside-product onboarding 

Once the user is inside the app, they’ll expect to find everything they’ve been promised in the previous onboarding phase. You don’t want them to get lost, wondering what to do next. So you have to show them where to go. 

Instagram does a great job explaining the benefits of allowing access to photos and the microphone beforehand.

The focus of the onboarding process should be to guide the user towards the core value proposition of the app. Help them discover how the app can bring an improvement to the way they’ve been doing things up until now, or how much fun the app is. Once this is done, the user will be a lot more open to discover the rest of the app’s features, one at a time. 

Let’s take a look at a few examples of how you could guide the user through the core use case of your app.

For a social app, people will expect to be able to contact a friend as soon as possible in order to decide if this product brings anything new to the table. Is the core feature of the product the ability to chat with friends and family, or is the user’s profile equally important? Show the users how to set up a profile with a minimum amount of information, how to add friends (offer the option to import contacts), and enable them to chat freely. Then cross your fingers. 

“A good onboarding flow guides new users towards the app’s core value proposition.”

Twitter Logo

For a calendar app, it’s all about how well the product organizes the user’s schedule. Allow the user to either import or sync existing calendars and events from other platforms, if they want. Quickly enable the user to get the feel of the product. What’s the design of this calendar? Is the schedule easy to analyze? What kind of customization is available for the different types of events?

For a photo editing app, show the user how effortless the entire process is.Twitter Logo Enable them to either pick an image from the camera roll or take a picture on the spot, guide them through the editing process using annotations where necessary, and finally present them with the sharing options. For people working with picture editing apps, a fluent editing journey is as important as the quality of the product.

A good mobile product deserves a solid user onboarding strategy.Twitter Logo Don’t limit yourself to the product itself. Start planning by taking a close look at your app’s core value—and make it obvious every chance you get. Be it an ad for the app or an onboarding screen, everything has to make a valuable statement about the product and its capabilities.

Keep reading about onboarding

Collaborate in real time on a digital whiteboard