I went to login to Medium the other day from a new Android device and was met with the following screens:

Medium sign up screen Medium social login screen

Can we first take a second to acknowledge that beautiful illustration in the backdrop? I particularly like the subtle parallax effect transitioning between the two screens.

This was supposed to be easy

This is a pattern that has been around since Web 2.0 and serves to solve two pain points for web users. Signing up for a new website requires a lot less steps and, therefore, is much quicker. And we no longer need to remember a password for every site.

So does social login work? Mailchimp recounts their experience with implementing social login. In terms of signing on new users, Mailchimp saw around a 4% conversion increase. They also saw an astonishing 66% decrease in login failures. In addition, according to one study, over 65% of users simply prefer social login to more traditional means.

Have we met before?

Which brings us back to Medium. It had been several months since I last logged in and I had completely forgotten which social account I had used to create my account. Assuming I had used my Facebook account, I pressed Sign in with Facebook. No dice. I had now created a brand new account on Medium inadvertently. I deleted my new account and tried logging in again. This time I went with my Google account. Negatory. Again I had created a new superfluous account that needed to be deleted.

It was at this point that I began to wonder if I had ever had a Medium account at all.

I tried the last button Sign in with Twitter. That was the golden ticket. The app was populated with my personal reading list and all the authors I was following. The world was back in order!

Avoiding confusion

Log in flow overview

How can we avoid putting our users on an expedition to discover which social media account they use for our sites and services? Let’s first look at the current steps taken to log in with a social account. This involves three different stakeholders. User: the person wanting to get into our site. System: our system used to log in or sign up users. Provider: the social media site that validates users and provide us their information.

The diagram above shows the journey of a user who does not remember which social account they used to create their account. This violates one of Nielsen’s heuristics: recognition rather than recall which argues that systems should minimize a user’s memory load by providing relevant information or easy access to said information.

How would recognition look in a social login system? I believe that their are several points along this journey that could solve this issue. We begin by intervening at the initial login screen.

Journey map at login screen

A typical login screen might look like the following image with one added feature: Forgot which account? below the social login buttons. This follows the same pattern users are accustomed to with Forgot password or email?

Log in screen with forgot account

If a user selects Forgot which account?, the system then queries the various social accounts to see if they have already been authorized by the user. This is assuming that the user has logged into these social accounts on their current browser and that the browser can remember their credentials. This all well within the realm of possibility with the current state of the web and how people are browsing the internet.

Log in checking authorized accounts

After the checks have been made the social buttons are updated with more descriptive actionables. For instance, if the user has authorized Facebook but has not created an account yet with that log in, the button might say Sign up with Facebook. Secondly if the user has authorized Twitter and has created profile with that log in, the button could say Continue with Twitter. Lastly, if the user has not yet authorized an account, as is the case here with Google +, there would be a link below the button to authorize that provider.

Log in final screen after checking accounts

The user journey now looks more like the following. We are giving users the ability to recognize which social account they had used in the past to log in. This can alleviate in confusion users might have and gives them a clear path to logging in.

Journey map with login screen fix

But not so fast

The reason why this information is not automatically shown is because these types of requests to providers can be expensive (network wise) to make every time a user tries to log in. By waiting to fire off the requests until the user actually needs the information is one way of warding off unnecessary requests.