Designing Better Onboarding For Your Mobile App

The right App Store Optimization techniques will get your app in front of eyeballs and (hopefully)  a download as well. But now that you’ve got your foot in the door, you’ll have to nail the next crucial step: onboarding. You’ve made a good first impression, but chances are the user isn’t sold on your app just yet—here’s how to craft a seamless, hassle-free onboarding for your app.

Splash Screen

Let’s start with the obvious: the first screen the user will see after tapping your app’s icon. For many apps, this is the ‘splash screen’, a short animation that usually includes a logo and appears before the home or sign-up screens.

While not technically part of the onboarding process, or even necessary to your app, splash screens can play a crucial role in the user experience—they exist to mask slower app loading times. If you’re forgoing a splash screen and your app isn’t operating at peak performance, you may leave the user staring expectantly at a blank screen.

    

Splash screens for Netflix & Twitter

In addition to offering up some brief visual engagement while your app boots up, splash screens also offer a chance to strengthen your brand. If you’re a fledgling startup trying to drum up more brand recognition, it could be a savvy design choice to include one, even if your load time doesn’t need it.

Sign-Up

The sign-up screen seems like a fairly cut-and-dry design to craft, but you’d be surprised how many companies fail to leverage its immense UX potential, and worse, how many end up mucking it up entirely. Let’s take a look at two different approaches—one successful, and one not-so-successful.

While in-app tutorials remain a hotly debated issue in the UX community, platforms like Bumble use their sign-up screen’s backdrop to almost subliminally provide a sort of instructional video for using their app. Their sign-up screen’s background features footage of a woman interfacing with the app, swiping and interacting with matches. It also spices up what’s normally a bland portion of an app with a touch of visual interest, without sullying the usability of the sign-up screen.

You’ll also notice Bumble breaks the convention of offering multiple sign-up options, leaving the user with no other way to create an account without having a Facebook. Normally you’d wouldn’t want to throttle sign-up like this, but Bumble makes the correct design choice here as a social networking app.

By restricting their signup to Facebook members exclusively, their user base contains fewer trolls, bots, or any other unauthentic matches. It’s just another reminder that while UX guidelines are undoubtedly important, they’re still just guidelines, not immutable principles.

Whether you call them set-in-stone truisms or merely guidelines, the worst thing you can do is ignore them entirely, which is what our last example does. Here are the sign-up screens for ESPN’s Fantasy app. Yes, screens are plural here, because the Fantasy app asks you to sign on twice.

    

ESPN can get away with a shoddy user experience like this. Frustrated users will power through the snags and inconveniences because they want to play one of the most popular gambling formats with their friends or coworkers. But it’s likely your mobile app doesn’t have that luxury, and in a crowded app marketplace, these UX blunders can be costly.

Account Creation

Now that the user’s tapped ‘sign up’, the goal is to usher them through the account creation process as seamlessly as possible. If you frustrate the user here, it’s likely they’ll abandon account creation and your app.

For streamlined account creation, you’ll need to clear one major hurdle: form filling. Some apps have it easy, and may only need an email, username, and password. Other apps require much more complicated data entry, like Venmo (or really any banking app). If your app falls into the latter category, here are some quick tips:

  • Divide the form filling into more digestible segments
  • Include an indicator that shows the user how close they are to finishing form filling
  • If necessary, explain to the user why you’re requesting certain information e.g. birthday, gender, etc.
  • Don’t skimp on the form filling UX! Even a feature as simple as a ‘password match’ indicator can help.

There are the pillars of quality form-filling in account creation. But if your account making is still a tiresome rigamarole, there’s a way you can almost guarantee the user won’t abandon your app, no matter how arduous your form-filling is.

This is a screenshot from Duolingo, a popular language education app. Duolingo uses a tried-and-true onboarding strategy that’s extremely effective, provided you have the UX to back it up: delaying account creation until after the user has spent time on the app.

The reason this method is so effective is that it demonstrates value to the user before asking them to make an account. Duolingo banks that the fun and simplicity of their experience is enough to hook the user into making an account. By gamifying education, they provide an incentive to the user: to save all your hard-earned progress, you’ll need to make an account.

If your app can demonstrate that value enough, you give yourself a little more breathing room with account creation tedium.

Welcome Aboard

Every app’s onboarding process is going to be different. Like almost everything in user experience design, there’s no secret formula to achieve the results you need to boost conversion and accumulate users.

What you can do is understand the guidelines, know the obstacles you’re facing, and consult with a UX design agency to optimize your own onboarding. Combine this with savvy App Store Optimization from companies like Gummicube, and you’ve got a recipe for success.