UX Guide: Password Reset User Flow

Or how little enhancements can add up to one delightful user experience.

Beautiful photo by Sigmund on Unsplash

Users will forget their passwords.

While there’s no way to prevent that from happening, we, as designers, can control what comes after. It’s in our power to make the password reset as fast and smooth as possible. Moreover, it’s in our power to turn the process into an enjoyable one.

However, resetting a password isn’t the same as posting a photo, booking a restaurant, or shopping online. It’s not a core feature of any application and not an exciting one either, so the proper implementation of it can easily get overlooked or ignored.

And even though it’s obvious that resetting a password should be fast and smooth, why bother making it enjoyable?

Well, it’s safe to assume that a user who lands on the Recover Password page doesn’t want to be there in the first place. There’s a chance they are slightly annoyed, if not aggravated.

Of course, we can just follow the best practices and make sure the user creates their new password without any further troubles. However, why not sprinkle a bit of fun and brighten up their mood meanwhile?

I had never thought that password recovery could be even close to enjoyable, until I had to reset mine for npm. Their process is the best one I’ve ever seen and should serve as a reference for anyone who’s designing a user flow for resetting a password. Let’s take a look at it:

Step 1: Recover Password page

The first step is the Recover Password page, which comes up as the first search result when you query “npm forgot password” (or anything similar).

It has everything it should have:

• Clear title — Recover Password
• Specific action text on the button — email me a recovery link (instead of ambiguous submit, send, etc.)
• Multiple options to recover password — either using email or username
• Lastly, there’s a nice description under the title:

Don’t worry, happens to the best of us.

This line adds a nice human touch and shows empathy, without creating extra clutter on the screen.

While the description isn’t necessary for creating a good user experience, the page would feel less personal without it:

The first time I read the description, it made me smile. I don’t think I’ve ever smiled before while resetting a password. :)

Step 2: Email

After you submit your email or password, you get a confirmation that a reset link has been sent:

Although the instructions are clear, the confirmation text could be improved. It’s good practice to say something like “If account exists, an email will be sent with further instructions” instead of “An email has been sent”.

By not promising the user that an email will be sent and not disclosing whether the email/username even exists in the database, we 1) encourage them to double check their credentials (in case they don’t get the link) and 2) prevent phishing attacks.

Here’s the actual email:

love you too, npm

Step 3: Temporary password link

Clicking on the link in the email opens the following page:

My favorite part here is the shortcut for copying the temporary password. Hovering over the string highlights it and clicking on it immediately copies it to the clipboard:

Just hover and click! No need to select from beginning to end and open the context menu to copy.

Although it may seem like a minor enhancement, it can make a difference for a user who is in a rush and just wants to get the process over with. Manually highlighting the string from beginning to end and selecting “Copy” option from the context menu can take some time and may only further irritate the user.

After you click Login (Alex Zlatkus should it be Log in? 🤔) on the Password Reset page, you are brought to the regular Login page:

How cute is this little guy? Another reason to smile :)

Step 4: Create a new password

Once you log in with the temporary password, you land on the Change Password page where you can create a new password:

In addition to having a clear title and specific text for the action button, this page gives great suggestions for coming up with a strong password. While, fortunately, most applications nowadays have strong password requirements, many fail to properly communicate them to the user. This is a guaranteed way to cause more frustration, so it’s important to let the user know right away which password combinations are acceptable and which are not.

Nevertheless, even when we provide detailed guidelines, sometimes the user will still attempt to create an ineligible password. In that case, we should tell them what exactly went wrong and what they should do to make their password stronger. Npm handles this well by providing specific information either before the user even attempts to save the new password or in the error notification after they click Change Password.

If the password is too short, npm will notify you right away by throwing an error message under the field and making the input border red:

Error message: “Please enter a valid password that’s at least 7 characters”

If the password is either too common or has been compromised, npm will let you know that as well:

Error notification: “The password you have entered was detected on a public list of known compromised passwords. Please enter a different password”.

Error notification: “The provided password is too common. Please pick a more unique password”.

Npm also gives links to both lists, which makes it easy to quickly check whether a password combination is safe or not.

Once you change your password, npm logs you in right away, so there’s no need to re-authenticate and enter your credentials again. This is another small enhancement which shows that npm cares about its users and wants them to return as quickly to their tasks as possible.

Summary

And that’s it! Let’s summarize the important points:

1. Pages should have clear, visually distinct titles such as Recover Password or Change Password
2. Buttons should have specific action text such as Email me a recovery link or Change Password
3. If you provide a temporary password, create a shortcut for copying it
4. Give detailed guidelines on creating a password
5. If user attempts to create an ineligible password, let them know what should be fixed
6. Log in user right after they create a new password

Lastly, it’s worth remembering that users don’t use our applications in a vacuum. They have other things to think and worry about and their mood could be influenced by dozens of different factors. The day I forgot my npm password, for example, wasn’t a great one. It was one of those days when everything just goes wrong.

When after numerous attempts to log in to npm I finally gave up and decided to reset my password, I anticipated that it would be yet another annoyance. However, it actually ended up lifting my mood and even set the rest of my day in a positive direction.

Because it’s just way too hard to be mad when you are smiling. 🙃