Content Marketing Specialist, teasing everyone into taking cute pictures for Instagram. Discovering the tech world bit by bit, and writing it all down on the agency's blog. Enthusiastic about everything visual. And sweets and dogs.
User onboarding is an essential part of product definition. Period. It 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.
Distilling the experiences we’ve had building apps, we’ve come up with a straightforward framework called Instruction-Action to better understand and design effective user onboarding processes for mobile products.
And if you make it to the end of this article, there’s a surprise waiting for you. Here’s a hint: it’s a Sketch file.
What’s user onboarding all about?
Great user onboarding feels effortless, natural even. It should demonstrate value and bridge the gap between users’ expectations and what the product can help them achieve.
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 your app be successful?
Will the onboarding process convince the user to take the first step towards using the product? Will it convince them to go further?
This is where our framework comes in handy.
The Instruction-Action framework is based on strategically playing with the 2 building blocks of the user onboarding process:
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)
- 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.
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.
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
Now that we know what we’re working with, 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.
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. 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. 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 using your app in a few nicely designed screens, and encourage them every step of the way to try it out for themselves.
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.
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 microphone beforehand. Hook, jab – jab!
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.
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. 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. 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.
Got it? Now it’s your turn.