An Error-free On-boarding Flow

How much time would you expect to spend on sign up or login to an application?

Here is an example that represent a very commonly seen sign-up/login interface.

A commonly seen sign up / login UI

By default, you will most likely land in sign-up page. A platform’s on-boarding page always wants to create more convenience to bring on new users, so it always assumes you as a new user. If you try to login from sign up page, because as a returning user you have conveniently overlooked the “sign up/login” toggle, you will most likely get a error message because you cannot sign up with an existing account. That’s Strike 1: conflict between new and old accounts.

Now as a returning user, you managed to switch to login page, but you cannot recall whether you have created the account with Facebook or email address, and decided to try logging in with Facebook, you might turn out to get another error message saying “ The email address related to this Facebook account has been linked to another account on the platform.” Now my mom would get really confused at this point because she has no idea why there are so many accounts, and no idea what to do next. That’s Strike 2: conflict between social login and organic registration.

Social login seems to be a care-free alternative to conventional account login, because you don’t need to type in an id and remember a password. On many platforms there is social login option on separated sign up/login pages. Now I am confused. If social login is a one-click shortcut to onboard a platform, why am I spending time deciding “Sign up with Facebook” or “Login with Facebook”? Aren’t they just the same thing? That’s Strike 3: Conflict between social sign-up and login.

A painful sign up / login flow. Let’s count number of possible dead ends

Problems with this flow:

  • Be it sign up or login, the purpose is to let the user in as fast as possible. Nowadays every internet user needs to sign up / login many different applications everyday. Is there a way to save 30 seconds for the user from deciding whether to sign up or login, login with email or login with Facebook?
  • Why I am seeing so many error messages? Should I blame myself or this interface? Is there anything I can do besides being told “Wrong! Wrong! Wrong!”? Designers solve problems instead of instructing people what they should or should not do. The best way to display error is no error messages.

Less options to the user = Less chance things can go wrong = Smoother experience!
On-boarding flow made simple

In the new interface, user start with 2 options: email address or social login. Whether it’s a new or existing user is detected through backend logic, so that the user doesn’t need to think.

Simpler on-boarding logic

When there is an human error (e.g. User trying to connect with a Facebook account that’s associated with an exiting email account), instead of telling an error, a friendly message appear providing an explanation and an alternative way out. In this way the error doesn’t feels like an error.


Am I trying to create something new? Nope. Many platforms are designing their on-boarding flow with similar considerations. When the experience is smoother, people barely thought about the why behind it. It’s the bad designs that always grab attention; it’s the traditional, reluctant-to-change kind of designs trying to define patterns.

Yummly, Sweetgreen

Yummly and Sweetgreen: User is asked to enter one email address, the platform will decide whether you need to create account.

Google, Yahoo

Google and Yahoo: Sign in interface is the default screen (because almost everyone is an existing user), and the create account option is at the bottom to avoid distraction. When the user types in a non-existing email address, the error message suggests the user to create account “using that address”.


Conclusion:

Give less choice to the user will improve the efficiency to complete tasks,. Decisions that are not necessary for the user can be moved to the backend.

If something goes wrong, suggesting the user with a reasonable alternative is more pleasant than just telling the error.

Break the convention even if convention represents the majority.

Have different opinions or wanna discuss more on the topic? Tweet Me

Like what you read? Give Lingjun a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.