Logo of UI Challenges
Sign in

Gallery

See what others have created

Resetting Password
L

lilio

@lilio

EasySaaS

Resetting Password

Design the full password reset flow as a small, self-contained sequence: request reset, confirm request, set new password, and finish. Treat each step as a separate screen or state, not one generic form.

Start with a simple entry screen where the user can request a reset by email or username. Keep the primary action obvious, and show the account recovery message near the field so the user understands what will happen before submitting.

After submit, show a confirmation state that explains the reset email was sent and what to do if it does not arrive. Include resend and back-to-login actions. Do not leave the user guessing whether the request succeeded.

From the email link, take the user to a secure reset form with new password and confirm password fields. Show password rules up front, validate mismatch and weak passwords inline, and handle expired or invalid links with a clear recovery path back to request a new one. End with a success state that confirms the password was changed and offers a direct sign-in action.

What to deliver

  • Design a forgot-password entry screen with email or username input.
  • Design a confirmation state after submit that explains what happens next.
  • Design the password reset form from the emailed link with new password and confirm password fields.
  • Design inline validation for weak passwords, mismatch, and expired or invalid links.
  • Design a success state that confirms the password was changed and offers sign-in.

Pro tip: When creating the design for a password reset flow, consider usability enhancements like password strength indicators and the option to toggle the visibility of the typed password.