Case study: Designing a better, password-less user sign-in system

uxaaron
Bootcamp
Published in
5 min readNov 14, 2021
Mobile device on table with security screen displayed.
Photo by Dan Nelson on Unsplash

As an authentication method, the email and password combination has been around for decades and is used on the majority of websites and platforms where user authentication is needed.

But just because something is commonplace, it doesn’t mean it’s the best solution for the problem it’s trying to solve. And that’s proving an individual is who they’re presenting themselves as.

In this article, we’ll look a some of the problems with passwords systems, where access-codes can be a replacement and a quick case study.

Too long? Skip to the TL;DR

Passwords — Problems for the user:

  • Registration and recall issues —Websites and platforms are opting for stricter, more complex password requirements. This can result in a slow/frustrating registration process and more passwords to remember as the number of sites the user visits grows.
  • Input struggles — my current password is 17 characters long, has numbers, uppercase and special characters and is a nightmare when having to enter on a phone or tablet device.
  • The unknown breach risk — All it takes is for one website to leak or one error in protecting a password used in multiple locations and a third party can be begin impersonating an individual with very few signs back to us to take action against this.*

Big sites and platforms are getting better at highlighting access from a new device/location and this is very much welcomed!

Problems for the site/app owner

  • Increased registration abandon rate — Users don’t want a long drawn out registration process and face real frustration having to pick, enter and match a password combination.
  • Increase support rate — The overhead of supporting users with password resets is not a productive use of time for those in a user-facing role.
  • Security risk — Despite many data encryption techniques to minimise the risk, it’s still very much the doomsday scenario for IT professionals and company leadership if a third party gets access to your user data.

The access code method

Not a new method of authenticating a user, but certainly an underused one is the temporary access-code technique. This replaces the password with a one time use (or time-limited) code to authenticate a sign in sent to the user's email or mobile device.

This method has been used commonly on smart TV web apps and the similar “magic link” used by slack and I believe Medium itself at some point. One downside to these instant sign-in links is the risk of the link being sent to an unintended person and being used. Access-code reduces this risk to some degree as there is no single link to click.

Case study — www.moneyalive.io

Money Alive is a video engagement platform used by companies in the financial services industry to educate their clients on key financial products and topics. At the time of writing, I’m the Chief Product Officer, and making the change from passwords to access-codes was one of the first things we decided to change in the 2018 platform update.

Our goal was:

  1. To simplify the registration process and lower the abandonment rate
  2. Reduce the user support rate related to registration/sign-on queries

How does it work?

The actual implementation of the access-code system wasn’t as straightforward as we initially thought and needed some careful consideration as well as a few weeks of beta testing which we did by supplementing the super user's sign-on process with this access-code method as a secondary authentication step. This actually remains in place today.

Initially, we had single-use codes that were invalidated by the request for a second code. This caused the first set of issues where a user didn’t receive the access-code fast enough (or missed it), requested a new code/s and then upon finding the first code tried to use this only to find it was invalidated.

Another UX issue was how we presented the access-code. Our first set of emails contained a link to click with the code being passed to the browser. Even though the code was written in plain text in the email, there was often confusion that this link was the only access method. Some users receiving the email on a device different to that on which they wanted to consume the videos believed they had to forward that email to the intended device.

In the end, this is what we arrived at:

The Money Alive sign in flow.
Money Alive viewer sign-on process
  1. Enter an email address on www.moneyalive.io which checks for an existing user match.
  2. System checks for a valid mobile number, if found show both Email and Text message methods for access-code delivery. No mobile skips directly to the Enter code screen.
  3. Send an email (or SMS) with a 4 digit code in plain text to allow copy/pasting and allow email clients to preview changed section (Smart Gmail feature). This code expires after 3 hours and the same code is sent if requested during this time period.
  4. Enter code page waits for code to be entered and gives instructions on wait time, options to send again via email or SMS.

The results

Once fully implemented with several updates learnt during our beta we were able to reduce the registration bounce rate and the support time on registration and sign-in queries by almost 75%.

Saving 75% support time made this development time alone worth it.

We also had important feedback from customers and users that they really prefer the sign-in now compared to before. Our self serve registration form option for viewers is now faster, has fewer fields to fill in and gives many users the illusion they’re not actually fully registering to access our content.

TL;DR and final thoughts

  1. Having multiple options for SSO (single sign-on) like Google, Facebook and Linkedin is still a better option for most sites. For privacy reasons, this wasn’t an option for us.
  2. If you go down an access-code route, user testing is key to getting the balance between UX and security. Consider trying what we did which is to use the system as a 2FA for a period of time before a wider rollout.
  3. Clarity of the sign-on process is key — Put real thought to the UX copy and test with users to make sure the instructions are clear, especially on the access-code email and code entry screen. See our screens above for inspiration.
  4. Reduced support time is likely to be the greatest benefit over reducing the registration bounce rate, although it does do that to some degree and users do report a better experience for it.

That’s it for this article, hope it helps! And keep innovating!

--

--

uxaaron
Bootcamp

Product designer, mentor at ADPlist.org and advocate for data-driven UX design.