Feb 21, 2016
3 Tips for a Breezy Mobile Onboarding Experience
Mobile-specific guidelines to ensure a successful first time user experience and to secure adoption
The most important moment in a user’s lifecycle is their first-time user experience. To ensure new users have a great FTUE, UX designers most important focus is onboarding. Until your app becomes a household name, and even after, onboarding is the most crucial component of amazing user retention.
In our mobile-first reality, it’s more important than ever to have a welcoming experience on mobile applications. Solutions are needed whether the user is new to your brand, you have a lot of complex features, or even if a longtime web user is transitioning to your mobile app for the first time.
There are tools and best practices for website onboarding, but when it comes to designing experiences for the mobile screen, the resources and tools are a lot less prevalent. With few mobile app-specific tools out there (maybe really only one), it’s important that UX, product, and dev teams understand what it takes to design a great onboarding experience for their mobile apps.
Prioritize Which Features to Highlight First
Whether you are building a new app from scratch, translating a web experience to mobile, or are taking a look at your existing mobile app, the first step in ensuring a great mobile onboarding experience is to take stock.
You’ll need to evaluate your app’s features, determining which few core concepts should be included in the first-time user experience. Aim to highlight 3–5 features to ensure a digestible amount of content for new users. Ask the following questions to pinpoint your handful of onboard-worthy features:
• Which features are core to the product?
The goal of onboarding is to present a high level overview that makes users confident and excited to jump in head first.
• Which features speak for themselves?
These features are easily discoverable, most likely relying on standard design conventions that are easy for a user to understand. They don’t need to be explained.
• Which features are essential, but complex?
• Which features are complementary/secondary to the app?
• Which complex and complementary features can be introduced later?
It may be best for a feature that is utilized later in the user lifecycle to be introduced post-onboarding — either in an in-app notification or through email marketing.
If you’re adapting a web app to mobile:
• Which features will make the cut?
• Which are most suitable for a desktop experience?
• Which features can be abbreviated or combined with another to translate to a mobile experience?
Add Walkthrough Screens to Your Signup Flow
Now that you have a clear gameplan about which features you need to focus on, you’ll need to imbed your plan into your app. Videos and tooltips are okay options, but swipeable walkthroughs are mobile’s true ticket to a convenient, digestible experience. Walkthroughs are baked into an app’s signup flow where each screen represents a single benefit. This benefit is a direct and exciting translation of one of your chosen features.
Depending on your goals for acquiring new signups, you have a few choices to design a tailored onboarding experience.
Onboard Before or After Signup?
Generally, the best placement for your mobile app’s onboarding screens is before signup. By introducing the app before signup, prospects can make an educated decision as to whether or not this app is the right choice for the job they are seeking to get done. Pre-signup walkthroughs bring in a higher percentage of new users who are qualified to become active users, with less of a likelihood to drop off.
For games and complex apps that benefit from interactive walkthroughs, the post-signup walkthrough works best. Post-signup onboarding allows users to flow immediately from a tutorial to hands-on experience, without the experience becoming disjointed with a signup form in the middle.
Mandatory, Hidden, or Skippable?
You can decide whether or not your walkthrough is required.
Some apps allow users to swipe between screens to browse the different benefits of the app. Others have a step by step process, guiding users through a very specific order. Dropbox does a great job of automatically looping their screens above the signup button. New users can take time to read through all of the benefits, or just go straight through to the signup form.
You can also hide your walkthrough if it is not necessary for all new signups to view. Airbnb’s walkthrough is tucked under the “How it Works” option in a hamburger menu on their signup screen. Only users seeking more information before signing up need navigate to it.
An alternative to the hidden walkthrough is to offer a skip button on each walkthrough screen. Skipping provides a way for users to bypass instructions, allowing them to get to the real app more quickly.
Make sure your onboarding screens have a permanent home in a “Help” section within your app. That way, all users have access to these explanations whenever they may need them.
Don’t Forget the App Store
For true end-to-end UX, your onboarding starts before your mobile app is downloaded. Make sure your App Store presence is providing a clear introduction to your most important features.
Teach prospects with a video. Beautifully animated videos provide delightful explanation with a tone of legitimacy and wonder. If you’re balling on a budget, simply upload a screen recorded demo to give prospects the opportunity to get a feel for what your app is really like.
Make the most of your images. Plain screenshots provide little context. The screenshot within a screenshot technique provides a way for you to give prospects access to your walkthrough screens before they even download.
Resources
For inspiration on great mobile app onboarding designs, visit the links below:
