Anatomy of a Password Reset Page


Project Summary and Background

This documentation is an artefact from an earlier part of the user security project work.

The goal of this project was to design and implement a password creation workflow using modern security and UX best practices.

Screenshot of password documentation graphic


The first thing I needed to do was to identify what they were and why. I reached out to the developers who had knowledge of this part of the code. Additionally, I connected with the company legal team and the IT security team to determine password security requirements set forth in our client contracts, the industry, and any additional best practices the design needed to consider.

From there, I began to evaluate the password workflows of the various tools I used on a daily basis for examples of enjoyable (and less enjoyable) password setting and resetting experiences. I also read articles and browsed UX forum discussions on the topic for additional ideas. Finally, I also gained inspiration from multiple discussions with design and Scrum team members about their personal experiences with password forms.

Once I had seen and heard of many example design approach, and had collected all of the requirements from the user, business, and security/technical perspectives, I started designing a new UI for the password reset screen. I used the basic components for the form portion from our design system, and created the additional components myself. The design went through multiple iterations of feedback and revisions.

Once I settled on a final design and met all of the requirements, I brought it back to the Scrum team. As we discussed the mockup, there were a number of questions that arose as to how the different parts of the UI should function and what the interactions would look like. In order to try and preserve the decisions made in order to easily refer back to them, I created an anatomical reference of the page explaining each feature's function and purpose from the perspective of a user.


This reference document was very useful. My Scrum team appreciated it, and my manager was impressed by the work.

Not only did the way I write it up help the developers understand the technical purpose of each part of the page, but it also helped them understand the value to the user of some of the "extra" design work. It was a start towards helping the developers how to look at a page through the eyes of a user.

Skills & Tools Used

  • Sketch - Multiple iterations of wireframes and high fidelity mockups were produced using sketch.
  • InVision - I layed out workflows and additional documentation using InVision for the development team working on the project to help communicate the flow and functionality of each page.
  • Meeting Facilitation - This project required multiple meetings with stakeholders, SMEs, and the development team to understand the techinical contraints that the design was limited by, and to communicate the user's needs that the system needed to accomodate.
Back to the List