Usability testing

7 Apps That Excel at User Onboarding — And What They Do Right

November 4, 2015

They say the first impression is the most important, and we agree. Whether you’re on a date, at a job interview or using an app you just downloaded, your first interaction will leave a lasting memory of the person (or product). Think of your favorite movie, or video game: you can probably recite the first scene by memory, or recall the magic you felt hearing the opening music for the first time.

This is why nailing your user onboarding experience is such an important aspect of mobile app design. The first few minutes after your user downloads your app are pivotal when it comes to determining whether your app lands in the recycling bin or leaves your users wanting much, much more (and raving to their friends!).

According to Andrew Hubbard (@A_Hubbard), founder of smartappmarketer.com and co-host of the App Business Podcast, the key is to put yourself in the user’s shoes — and then look at the users’ footprints once they start using your app:

“I think the most important thing to keep in mind is the goal you have for each new user. What action do you want them to ultimately take? This could be completing an IAP, subscribing to your product or service, referring a friend, or something else entirely.

Once you know that, you can look at your analytics to see how current users who have already reached that point actually got there. What path did they take in your app to reach the goal? From there, you should focus on designing the onboarding experience for new users so that it encourages them to take the same path and end up taking the action that you want them to.”

What Game of War: Fire Age Teaches Us About User Onboarding: Keep the Goal in Mind

A close-up of a young woman using her mobile phone.

One great example of keeping the user goal in mind during the onboarding process, says Hubbard, is Game of War: Fire Age:

“It’s fairly clear that the objective is to get users to start making in-app purchases. As soon as you first open the app, a tutorial walks you through the basics of the game. It shows you exactly where to click and when. Tutorials like this are particularly important in complex games like GoW, because if a new user becomes confused by their first experience, they are much less likely to return.

As you move through the GoW user onboarding tutorial, it shows you how to use in-game currency to speed up the gameplay. The user has a limited amount of this currency given to them for free. The onboarding experience is clearly designed to encourage users to get into the habit of using this in-game currency and experience its benefits.

During the onboarding tutorial, the user is also prompted with special offers to purchase more in game currency at a discounted rate. There is even a timer to increase the sense of urgency and encourage them to complete an in-app purchase.”

What Yahoo News Digest Teaches Us About User Onboarding: Don’t Push Too Hard!

For non-game apps, the same theory applies, says Hubbard:

“The onboarding process should focus on getting users to perform the actions that move them towards the goal you have for new users. Showing them how to use the app, and making sure they experience the benefits of using it the first time they open it.

Personally, I like the way Yahoo News Digest onboards new users. It follows some important best practices for onboarding, such as:

  • Explaining how push notifications will benefit the user before asking for permission to send them. Push notifications are one of the most powerful ways for app developers to maintain user engagement, but unfortunately a lot of users turn them off because apps do a poor job at onboarding.

    I’m sure you’ve used apps where the first thing you see when you open them is a request for permission to send push notifications. This is a bad experience because as a user you don’t know what it’s going to send you. Yahoo News Digest explains why it wants to send push notifications, then asks only if you indicate you want them.
  • Giving a short, but complete overview of what makes the app great. Importantly, the app looks really nice, too. It sets a great first impression.
  • Not asking for you to create an account or log in when you first open it. This is one of the big mistakes apps make when it comes to user onboarding. Asking a user to create an account or log in with Facebook, Google, Twitter, etc. before they can use the app is a poor user experience. Most users will simply close and delete the app if they have to sign in or hand over personal info before experiencing the benefits of the app.”

What Facebook and PorterKey Teach Us About User Onboarding: Make the FAQ Count

A street sign shows the silhouette of a person walking while using his mobile phone, with the message, “Pay attention while walking. Your Facebook status update can wait.”

Robert Pieta is an entrepreneur and engineer at PorterKey (@PorterKeyboard), a smart iOS keyboard with contextual suggestions. Given how central a keyboard is to the mobile app experience, good user onboarding is crucial to PorterKey’s success as an app. The secret, says Pieta, is a thorough FAQ and a seamless experience:

“I view successful app onboarding as a two-step process: integrated onboarding and an easily-accessible FAQ. In the first step, the user learns how an app functions as they discover new features and functionality. Facebook has adopted this method, using blue popovers enticing me to discover a part of the product I may not have used before. Enticed learning is really powerful because the end-user is provided new information in context, instead of up front.

Information in context also helps the user build a product vocabulary, critical for the user to express further questions. This is where the second step is critical: providing an easily accessible FAQ. This FAQ can take many forms — for example, textual Q&As or video tutorials. In this interface, an existing user can use their product vocabulary to find how to accomplish a task or resolve an obstacle within the product. In PorterKey, we use actual questions and answers available from both the app and keyboard to help users learn more.

Together, integrated onboarding and easily-accessible FAQs provide a complete, successful onboarding solution. Users are presented with short information as they learn about a product’s features, and have a central place to learn more as they develop a product vocabulary.”

What Focus and Google Native Apps Teach Us About User Onboarding: Keep It Simple

A close-up on a man’s hand holding an Android smartphone.

Liam Spradlin (@LiamSpradlin), lead designer at Touch Lab, sees user onboarding as a necessary evil, a process that should be as seamless and transparent as possible. To make that happen, he says, look to the simplicity of Android’s native apps:

“When an onboarding experience is required, it should be simple, engaging and (when possible!) skippable.

Keeping the experience simple means distilling all the things you want to teach a user down into just a few key points — probably around three screens total — each designed to tell the user about a feature in just a couple of seconds and keep them moving toward the app itself. To understand how important it is to keep it brief, think of a billboard. The average time a driver has to read and digest a billboard is seven seconds. Onboarding screens should be even faster, if possible.

Make the onboarding experience engaging with simple graphical representations of what each screen explains. These can be illustrations (as seen in many of Google’s products), snippets from the actual app or other graphics. In Focus, a gallery app I designed for developer Francisco Franco, the onboarding experience is part of the app itself. As users maneuver to new screens with new features, a quick translucent overlay highlights the feature in a brief sentence, and then disappears when the user acknowledges the message.

Finally, I think it’s important to include a skip option for onboarding if the process happens before the user can get into the app. Some users will appreciate the onboarding introduction, but users who may have reinstalled the app or who might already know how things work won’t want to swipe through the process again.”

What Punkpost Teaches Us About User Onboarding: Prototyping and Iterating

The registration screen is part of the user onboarding experience for Punkpost. Here, the teal “Join” button presents a clear CTA against the background image of a dancing woman covered in confetti.

According to Santiago Prieto, co-founder of Punkpost (@PunkpostCo) “the user onboarding experience is one of the hardest challenges for a developer.” To get it right, says Prieto, designers need to look closely at their user analytics and keep going back to the drawing board:

“For over 10 years, while at IDEO and now at Punkpost, I have practiced a simple philosophy that great design comes from a very clear human-centered vision. This doesn’t mean perfect user experience right from the get-go, but rather a journey that evolves as it learns how to best take the users to your vision. That’s the beauty of software compared to hardware — it’s moldable, and can now be molded more quickly than ever.

For instance, the day we released Version 1.0 of the Punkpost app, people were signing up by the hundreds and it was a very simple and quick onboarding experience. We thought the app was already super intuitive, and we’d have them come in and figure out exactly what to do. But in reality, only 6% of users were adding in all the information needed to complete their profile, which meant very few were going to send their first card right there and then.

Luckily we were measuring this, and I was back to work that same day to ensure there’d be a quick and major shift in Punkpost’s onboarding experience to make profile completion easier. A couple days later, after a few prototypes, we were able to release an evolved version, raising that 6% to 70%. Is 70% optimal? Not yet, but adding further refinements will lead to better numbers.”

Two coworkers stand in front of a white flipboard, adjusting sticky notes to edit a user onboarding flow.

Prototyping Your User Onboarding Experience

One of the best ways to use a mobile UI prototype to your advantage is user testing. You don’t have to guess at the effectiveness of your user onboarding experience when you can get feedback from actual users on a realistic, but easy-to-tweak prototype. By getting the experience just right in the prototype phase, you don’t have to do as much work once the app is in development (or on the market!).

Ready to put these principles into play? Sign up for a 15-day trial of Proto.io and see how easy it is to create a rich, intuitive onboard experience with our drag-and-drop WISIWYG editor. In minutes, you’ll have a mobile app prototype that looks more like the final product — ready for friends, family and other beta users to tell you how to improve your design!

Author