I took the left picture when trying to reset password on a site (we are not any better tho). Found the right image from Reddit.
I want to share a success story about how our team redesigned our password creation experience that deviates from the convention. This article starts with the problem, explains why we didn’t follow the norm, demonstrates what we did to make the experience really simple, and finally shows the results (which is 👍).
Background
Last year, the engineering team caught a security risk with our user account creation flow on the marketing site. To solve this, they added more sophisticated password creation requirements. The design team (me) partnering with the product team updated the UX to ensure a smooth lead to customer experience.
It’s just a password thingy. What’s the big deal?
Here’s a list of the requirements we’re adding. Why can’t we just jam them into whatever we already have?
The thing is, the existing UX has frictions. They didn’t make a dent because there weren’t that many requirements and the frictions weren’t that visible. However, the added requirements will make 💩 hit the fan. As shown below, the UX has 3 main problems:
- The “Retype” password field is a lot of unnecessary work.
- The password validation is done after the user clicks the “Next” button. It’s effortful for users to see and correct any errors.
- The current alert (the pink box) doesn’t support showing multiple errors.
These will affect whether a potential customer can easily create a password and quickly move to the next step to finish the signup process.
Thus, the new requirements will increase user effort and frustration when they sign up, resulting in a decrease in our marketing site conversion rate, fewer signups, and eventually less revenue.
How to set up some boundaries so that we can design efficiently?
I like defining some fundamentals with the team before solving the problem. This way, we can explore paths efficiently, take stake holders along the journey, and achieve alignment in small steps.
I wrote down a bunch of questions and reached out. With Product, Engineering, Marketing, and Success, we aligned on the following:
- 💖 UX objectivesMinimize friction. Challenge the norm, but don’t reinvent the wheel. Design away errors not for errors.
- ⚖️ Potential conflictsIt should feel simple yet clear to the user what happened and what to do.Be clear and concise, but also friendly and approachable.
- 😇 Persona that are unique to thisThey generally don’t like to read. They are vulnerable to digital tasks, often need crystal-clear instructions, and are highly likely to bounce when hit by blockers.
- ✨ Special UX requirements of password fieldsUsers should be informed and fix errors while typing, instead of done typing (live vs on-exit validation).
Why common practices don’t work for us
We researched around, summarized common practices into 3 types listed below (see bibliography for details), and tried each approach.
- Show all the password requirements up-front.
- Use a password meter to show how strong the password is.
- Show the requirements when the user is typing.
Option 1: spelling out the requirements
List out the major requirements and check the ones that are satisfied.
Pros: full clarity up-front. Checking off each one feels satisfying.Cons: text-heavy and challenges users’ attention span.
Option 2: password meter
Use color and simple text to indicate how strong the user’s password is.
Pro: looks clean and simple.Con: fails to communicate why the password isn’t strong or how to fix it.
Option 3: show requirements only on typing
This one adopts the problems of both the previous 2 versions. It doesn’t tell users how to fix the error and looks overwhelming.
What did we do differently?
We pulled from the learning and challenged ourselves to make it simpler. This is the outcome:
30 second demo of our new password creation UX.
We improved the UX mainly from these 2 aspects:
1. Clean and delightful UI
- Remove all up-front instructions and show “minimum 8 characters” as a placeholder. Show instructions only when the user misses any requirements or makes mistakes. (Trust me, it works.)
- Use “hint messages” instead of error messages for some requirements. For example, we show “Try including a letter” in yellow instead of “Must include a letter” in red. By doing this, we gently nudge users in the right direction instead of fiercely calling out their mistakes.
- Thank the user for their effort in creating a strong password.
2. Reduced user effort to fix errors
- Replace the ‘Retype password’ with a password mask (the 👁 icon).
- Validate while the user’s typing instead of exiting the input field.
- Re-ordered the password validation rules in the backend to reduce the number of steps to correct an error. For example, when the user types ‘1234’, the system should show ‘Password can’t contain 4 sequential characters’ before it shows ‘Try including a letter’ (see below).
How do we know it’s good?
The chart below compares the site conversion rate 4 weeks before launching the new password design (the blue line) and 4 weeks after (the orange line). We could see the conversion rate increases by 0.47 pp, which is 33.31% from 1.42% to 1.89%. This means the conversion rate didn’t drop with the 6 added password requirements, and even increased a bit.
Tracking session_sign-up 4 weeks before (blue line) and after (orange line) the new password design. The site’s overall conversion rate grew 33.31%.
Salute to the amazing team 🙌
I’m pretty happy with the outcome because this is untill today one of the simplest and friendliest password UX I’ve seen (open to be wrong). I can’t thank enough to the other teams mentioned earlier. These people provide constructive feedback in the most respectful way, are responsive to removing blockers for the team, relentlessly pursue quality, and cease every chance to raise the bar.
This project is tiny, and I love how the team’s culture shines through the smallest cracks.
Bibliography
Guillory, A. (2021, August 26). 7 best practice for user-friendly password experiences. Usability Sciences | A User Experience Research Firm. Retrieved 2022
Mac, M. (2021, August 23). How to improve the usability of password fields. Michelle Mac. Retrieved 2022
Mullin, S. (2022, January 20). Password UX: The real problem (and how to fix it). CXL. Retrieved 2022
Pernice, K. (2015, June 14). Help people create passwords that they can actually remember. Nielsen Norman Group. Retrieved 2022
Sherwin, K. (2015, April 26). Password creation: 3 ways to make it easier. Nielsen Norman Group
Team CourseUX.com. (2017, September 25). UX Login, register and password: The Ultimate Design Guide. UX Design Course 100% Online with Unlimited Mentor Support. Retrieved 2022