January 6, 2025
Reset Password Design for Mobile App: Design Brief
Source: The best way to learn UX/UI design. (n.d.). Retrieved from https://app.uxcel.com/design-briefs/reset-password-flow-007
Leverage your UI/UX design expertise to engineer a seamless reset password flow.
You are a UI/UX designer for a mobile app. You’re tasked with identifying and addressing the key friction points users encounter when resetting their passwords. Your goal is to design a user-centric reset password flow.
Design Task
Your design task is to complete the following:
- Select a platform for your design.
- Investigate the primary friction points users face during the reset password process.
- Design a reset password user flow for mobile, applying best practices.
- Offer a comprehensive rationale for your design choices.
- Create a usable prototype in Figma. 🏆
Instructions
Read the instructions to ensure your submission receives maximum visibility.
- You can edit your project at any time.
- Remember to share your submission with your community. The more reviews and views it receives, the quicker it will be seen by Uxcel Mentors.
- After submitting your project, consider reviewing others’ projects. This can enhance your project’s discoverability.
- Ensure you only submit your own work.
Evaluation criteria
Your project will be evaluated using the following criteria:
- Interactivity — How effectively does the interface facilitate user actions and provide meaningful feedback in response to those actions?
- Clarity — Does the copy communicate the intended message clearly and effectively?
- Usability — Can users perform tasks safely, effectively, and efficiently while enjoying the experience?
- Presentation — How effectively is the work presented, including the templates provided, the formatting of the copy, the links shared, and the explanation of the design rationale?
Reset Password – Mobile App Flow: Example
Source: The best way to learn UX/UI design. (n.d.). Retrieved from https://app.uxcel.com/showcase/reset-password-mobile-app-flow-120
‘Continue with…’ step
This flow is for a user who has an existing email address, so a ‘Continue with email’ button is used to demonstrate how that process looks.
Most people sign up with social or third party options, so they appear first in the hierarchy. These are grouped together to show that they are separate options from the ‘continue with email’ below.
A good reason to use all of the ‘continue with…’ buttons up front, rather than ‘log in’ and ‘register’ buttons, is successive pages can be more minimal and focused in their design without the distraction of additional options peppered throughout the process.
‘Enter email’ step
When landing on this page, the email field is auto-focused so that the keyboard is immediately accessible.
When the user enters their email, the system checks if an account exists, if the account exists then the system offers up a password field to login with.
‘Enter password’ step
The forgot password link is placed beneath the password input, as chunking items of a similar nature together makes them easier for users to locate.
‘Reset password’ step
On clicking the ‘Forgot password?’ link, the system opens a ‘Reset Password’ modal.
The ‘email address’ field is auto-populated with the address the user entered on the initial ‘enter email’ step, with the field auto-focused so that the keyboard is immediately accessible. This is so the user doesn’t have to re-enter their email address.
The microcopy on the CTA relates to the modal title and the modal body copy, so that the user easily makes the connection and has an understanding of what will happen when they click the button.
Upon submitting, the user is presented with next steps. There is an animation that plays just once, which shows an envelope opening to reveal its contents. There is also microcopy to support the animation which tells the user what they need to do next.
‘Reset password’ email
The email that the user receives includes:
- Clear branding to show who the email was from.
- Body copy is written in short snappy sentences so that the user can quickly parse the information.
- The microcopy of ‘Reset password’ on the CTA makes it clear what will happen when the user clicks the button.
New password entry on app launch
In a perfect world, when clicking on the button from within the email, the app is opened, and the user is immediately presented with an ‘Enter new password’ modal with the field auto-focused so they have immediate access to the keyboard.
I omitted the common ‘confirm new password’ option, as on mobile this presents a lot of usability issues for people who use password managers, as there’s often no way to retrieve and paste in the password into the second field.
Beneath the password field are the prerequisites that the system needs for a password before the user can continue. I designed these as greyed out ticks to show that they haven’t been achieved initially.
As the user is typing and meets password prerequisites, the associated grey ticks turn green to show that the user has ‘succeeded.’
Users can only trigger red crosses next to the password prerequisites if they press the ‘update password’ button before prerequisites have been met. I didn’t use the ‘disabled’ state for the update password button here to add another layer of validation checking.
Upon submission of the new password:
- The system may ask the user to save their password depending on their OS. In this example, the iOS ‘save to keychain’ modal is shown.
- After accepting or declining the saved password the user could automatically be logged in, which would take them to the ‘logged in’ homepage of the app. In the flow I’ve designed, I’ve included the ‘password changed’ email in the flow. This email, which the user doesn’t need to be directed to, includes a clear CTA to login to the app.
- The user can then login to the app with their saved credentials or by entering the password into app.