I scoured the web for sites that use passwordless login. Examples I found included Chewy, Roblox, Levi's and Walmart. Our project manager wanted an example of a site that had the email input field on a separate screen, and Walmart was the only flow that matched that condition.
I consulted various articles for information on best practices for a passwordless login experience. Here's what I found:
đ Findings
I documented the basic flow that I saw across multiple websites, as well as the MyMassGov forgot password flow, which also utilitzes a one-time code.
Our design journey was iterative and, although linear storylines are vulnerable to oversimplification, this roadmap is a rough overview of our process.
Although we liked Walmart's radio buttons design, we explored other options, and I mocked up a version of the first screen using bullets and an accordion-style dropdown.
While both designs conveyed the correct hierarchy for the user making a choice with two options, neither design had one clear call to action. We returned to radio buttons, as used by Walmart. However, for users entering a password, this approach lengthened the flow by one screen. When we tried putting the password entry on the same screen as the radio buttons, the button text became vague. In Walmart's example, the button text changed dependent on which radio button was selected, but our team was informed that our platform could not have that functionality.
Furthermore, after meeting with the lead developer for our project, we were informed of additional technical constraints. Our platform, Azure, used very specific templates, and our designs did not fit into any of the templates. Thus, facing this problem, we began another phase of exploration.
In our best iteration at this stage, we added the link to use a one-time code below the main call to action (CTA). However, there were several problems with this design:
Another option that would not require the addition of another CTA would be to make use of one of the current CTAs, such as the "Forgot password" link, and incorporate the one-time code flow into the existing "forgot password" flow. Â At this point, our team faced 4 options:
We decided that the most efficient and clear option was to adjust the "Forgot password" flow to incorporate signing in with a one-time code.
SOLUTION
Integrate the one-time password into the âForgot passwordâ flow, allowing users to sign in directly after entering the verification code
This solution involved a copy change on the main login screen, and the addition of a new page with radio buttons that was presented to the user once they had verified their identity.
OUTCOME
The revised âForgot passwordâ flow has yet to be implemented
Takeaways
