There is never a second chance for a first impression. The goal of onboarding is to have users quickly and willfully provide personal information to register. Achieve this by clearly communicating the value of app features on the onboarding screens, or better yet, have users interact with a subset of features that makes them feel invested in your offering.
Call to action (CTA) placement, size, and language
Your home screen probably contains a main call to action that corresponds to an important action that you want to drive. With limited screen real estate on mobile devices, providing a clear CTA is possibly more important on mobile than it is on the web. Focus your user’s attention on a simple, clear, primary CTA.
Metrics to track: CTA taps, # of screen loads before primary CTA engagement, taps on "competing" items
Idea #1: Test increasing the size or prominence of your primary CTA to attract more attention to it.
Inbox by Gmail has a small CTA during initial registration. Would a bigger CTA increase engagement through the registration flow?
Munchery features distinct Add to Bag CTAs on their category search and product detail views. Testing can provide data to conclude if the size and format of the CTA impact conversion.
Idea #2: Test removing distractions from your CTA.
These may include navigation links, search fields, and hero images —even if they are appealing or functional. Especially in your onboarding flow, you want to make sure that the user has no distractions.
As users sort through airfare search results on Hipmunk, there are many competing toggles and filters that may distract from them from the primary goal: flight selection. Tapping on the flight duration graphic reveals additional detail, but only by tapping on the price will a user move to the next step in the process. Moving flight detail to another screen and enabling any tap to the row may remove unnecessary friction in booking.
Idea #3: Test different CTA language to see what is most compelling to help users take the first step with your app.
You can easily make copy changes in the Optimizely Web Experimentation Visual Editor, and your CTA has some of the most important language in your whole app!
Pandora could test its "upgrade" CTA to better position the value of the upgrade.
Social Sign-On
Why make users generate new logins for your app and go through email confirmation processes when they can use existing social logins through Facebook, Google, or other popular services? Providing social sign-on options helps decrease friction and drive adoption.
Metrics to track:
- Social sign on CTA taps
- Social sign on completed registrations
- Non-social completed registrations
- Bounce from onboarding and registered user attrition for those who used social sign on vs. not
- Average session length (to gauge engagement)
Idea #1: Test adding social sign-on if you do not have it already.
Airbnb drops new users into an onboarding carousel that does not reveal social sign-on capability until after a user taps the Skip or Sign up CTAs. Promoting social sign-on capability earlier in the onboarding may reduce bounce before registration.
Idea #2: Test how you prompt users to use social sign-on vs. email registration
In the Instagram onboarding, the value of signing-up via Facebook (besides convenience) is not communicated. Will I automatically start following all of my Facebook contacts who are on Instagram?
Then, try taking it one step further: Once the app recognizes that the user has a Facebook account (detects Facebook logged-in state), Instagram could feature the number of Facebook friends who use Instagram on the homescreen. You can accomplish this in Optimizely Web Experimentation by using Live Variables.
Idea #3: Test when you prompt for social sign-on.
Test prompting for social sign-on on your homescreen, at the beginning of your onboarding flow, or at the end (for example, when importing contacts or sharing content). Users may be more compelled to sign into your app if you use social sign-on and ask for it when it is beneficial for them to use posting, sharing, or friend-finding features.
Eventbrite promotes social sign on after users have interacted with the app’s event-finding feature. This allows users to recognize how the app can offer them value before arriving at their own conclusion that going to events with friends would make their experience even better.
Idea #4: Test the length of your non-social sign-on flow.
How many extra steps do users save if they choose social sign-on? How many forms or fields do they need to fill out? Cutting out unnecessary fields can save your users time if they do not have (or do not want to use) social sign-on.
Timing and gating
Do you require first-time users to create an account before using your app? If so, you could be making a mistake that’s costing you 56% of your users. Consider the timing and order of your onboarding flow, and what users see before login.
Metrics to track:
- Registrations
- Feature engagement
- Number of carousel swipes before registration/engagement through the onboarding funnel
- Social sign on vs. email
Idea #1: Test tour-first behavior.
You can learn a lot from whether you include a navigation or functionality tour upfront, or whether you skip it altogether and let users start playing around.
Sosh could benefit from testing its onboarding sequence. Currently, all app functionality is gated behind the introductory carousel. Featuring low-friction interactive features (i.e., calendar view) before the registration gate may make it easier for users to experience the value of the app and encourage them to register.
Idea #2: Test your blank states.
When users first use your app, or first encounter certain interfaces, test different content in the blank states to encourage them to take action.
While the OneTravel app searches airfare options, it displays messaging that 1) changes after 7 seconds to keep users engaged and 2) reassures them they are searching a reliable source of all the best deals. Test communicating value propositions of the app as well as tips and tricks to keep users excited about exploring new functionality.
Snapchat reassures users how the app makes connecting with friends easy by associating your phone number with your account. The countdown timer disables the continue CTA until it turns green, encouraging users to read the policies and feature descriptions instead of rushing to complete.
Idea #3: Test your login timing.
You can expose a tour, limited functionality, or even near-full functionality before requiring your users to log in.
Vimeo and Mixbit, two video sharing apps, take different approaches to their onboarding. While Vimeo gates all functionality behind login, Mixbit educates new users through a carousel which is reloadable from the menu.
Idea #4: Test showing your app “out of reach” at the end of your onboarding flow. Instead of showing a blank state, give a glimpse into your app’s interface with a semi-transparent overlay or a modal.
Path Talk uses a modal in its onboarding flow to give a preview of the actual UI.
Tour format
Many apps begin their NUX (new user experience) with a navigation or functionality tour, which come in all sorts of formats and flavors. Figure out which format works best for your app.
Metrics to track:
- Registrations
- Feature engagement
- Number of carousel swipes before registration and engagement through the tour flow
- Taps on “skip” buttons
- Social sign-on vs. email
Idea #1: Test carousels, pop-up guiders, overlays, or even videos.
Each format has its own benefits for different types of apps.
Circa layers the tour on top of the app as a lightbox, providing a preview of the UX while the user learns about its features.
Idea #2: Test the number of steps in your flow.
Shorter is often better, but you do not want to sacrifice too much detail.
Compare Sight's four-step, numbered carousel to Just Wine's six-step carousel.
Idea #3: If you use a carousel, test its progression behavior.
In a multi-step onboarding, you may want to have users progress through taps, swipes, or even auto-scrolling carousels.
Noted has an onboarding carousel that combines taps, swipes, and gestures that the user will need in-app.
Idea #4: Test “skip” functionality.
See how many users choose to skip your tour, or portions of your tour. Will adding a Skip button help users engage with your app more quickly, or will it leave them unprepared to use your app's functionality? Try making the Skip button more or less prominent.
Level users have an option to take a tour or sign up/log in via dedicated CTAs on the homescreen. Users can close the tour and return to the homescreen via the “x” in the top left.
Idea #5: Be bold. Test whether to have a tour at all.
Is your app intuitive enough to drop the tour altogether?
After phone number validation, WhatsApp moves a user directly from the welcome screen to profile creation.
Tour content
Your tour’s format isn’t the only thing worth testing—you should also test the content of the tour and how the user receives new information.
Metrics to track:
- Registrations
- Feature engagement
- Number of carousel swipes before registration and engagement through the tour flow
- Taps on “skip” buttons
- Social sign-on vs. email
Idea #1: Test features vs benefits.
Test whether your tour focuses on individual features or whether it is more of a presentation of the benefits of using the app.
Compare Noted's interactive, feature-driven onboarding with Spring's benefits-based onboarding.
Idea #2: Skip the unnecessary.
For example, if your tour highlights individual features, test skipping or not pointing out universal cues that users are likely to understand. Your “x” button probably means “close,” so you do not need to explain it in your tour.
In this example, is it necessary to explain that the plus button adds items or is there a more delightful and experiential way to get the user started?
Idea #3: Test showing screenshots of your interface vs. lifestyle image.
If your onboarding models how to use your app, you have a choice to use screenshots or people “modeling” the use of your app.
Instagram's onboarding is loaded with images of people using Instagram to take photos.
Idea #4: Test showing vs. telling vs. trying.
When do you need to explain a feature in text? When can you show it in action? Or when can you progressively let users interact with the features to learn them?
Clear's onboarding has a model demonstrating the gestures needed to use the app. Pulse features instructional guiders in an overlay. Noted has users complete actions themselves as part of onboarding.
Idea #5: Test adding a progress meter to your tour.
Letting your users know how far they are through the tour may give them a sense of progress.
Glowee does not have any sort of progress meter in its onboarding. Would switching to a more traditional carousel increase completions?
Idea #6: Test adding a countdown timer to steps of your tour.
When might it make sense to provide a sense of urgency?
WhatsApp provides a countdown timer when users need to confirm their phone numbers.
How to set up an onboarding flow test in Optimizely Web Experimentation
With the Visual Editor:
In Optimizely Web Experimentation's Visual Editor, you can test a number of different ideas from this article, including making copy changes, changing the color of your CTAs, swapping images, and making layout changes. The Visual Editor is great for being able to modify your CTAs and for social sign-on.
Targeting
You'll likely want to target users that are new to your app and have not taken any actions when testing an onboarding. To only include logged-out users in your experiment, as long as you have that information available on the client side in the app, you can use that information to include only those people in your experiment. You can do this with a custom tag or with a variable.
Goals
The main KPI to track in an onboarding experiment is how many people end up signing up.
You can do this by tracking whether someone viewed the welcome screen (after they signed in) by adding a View goal.
You can also measure whether signup was successful. This can be added via a Custom Event, and the event can be added in the method where the signup occurs, for example:
- (void)userSignedUp:(id)sender {
[Optimizely trackEvent:@"User Completed Sign up"];
//The rest of your handler
}It is also recommended to track secondary goals, such as if people are interacting with a carousel you have inserted.
<%= heading %>