Feature: Helping users to create strong passwords

While designing the account creation and log in page, the product manager had run into an interesting problem. I worked on a design solution to get users to create strong passwords. The passwords had to fall within the rules and restrictions provided by the backend developing team. This is often seen as password strength or strength-o-meter.

After a quick competitive analysis which I presented to the design director, I worked on a few options.

To maintain design consistency and not introduce a new UI for input fields, I used current components for the mockups.

The simple solution used a tooltip, which is part of the design system. But I suggested that tooltips are not the best components for users. Users don’t want to click to read and/or it’s not the best usage of space on mobile.

Eventually, I created a final option that uses color, I was mindful that all the colors would be effective even for users with color blindness. Each color coincided with a requirement but also, I made sure to note which parameters remained. Colors are great indicator but I believe, seeing the words to describe what is still missing makes it immediately visible and noted by users.

I created an animated prototype on Sketch using Anima and provided this to the front-end team.

The final design is implemented not only in the account creation page but also in the account page, allowing users to update passwords.

At the initial launch of this feature, by weekly, users were signing up at an average of 400%.