Reset password showcase

Hello, everyone! I’d like to share my approach to designing a reset password flow. I tackled a similar task at my previous company, and I’ll walk you through how I approached it. The initial challenge was quite broad, so I’ll narrow it down by focusing on the constraints I had to work with. While there isn’t a one-size-fits-all solution, this is how I addressed the specific task I faced.

Prefer a hands-on approach over lengthy text? No problem! Check out the link to Figma prototype and feel free to explore it.

Data and Constraints

• Unified Login and Sign-up Page: The login and sign-up functionalities were combined on a single page. While this decision might be controversial, it was a requirement I had to work within.
• Social Network Integration: We used Telegram as an option for linking with social network accounts, as it is very popular in the region we were targeting.
• Backend User Verification: The backend verified if a user existed in our database when they submitted their mobile phone number. This is why we used phone numbers instead of emails in the reset password flow.
• Existing Users: This flow is designed for users who already have an account and have previously set passwords.
• Application Context: The app I worked on was connected with sports, which is why I used such customization on the first screen.

Access Account with Phone

The flow begins with the entrance screen, where users are presented with several options to access their account. In our case, users select "Continue with Phone," which takes them to the next screen with a phone input field. You might wonder why we don't direct them straight to the password entry. The reason is that our priority was to accommodate users who don't have an account yet, so we provide the quickest way to create one.

This approach also explains why we separate Telegram and phone registration. Telegram authentication is fast and takes only seconds, so we encourage users to follow this easiest path.

You might notice that the "Get the Code" button remains active even when no data has been entered. In my view, if a user is unsure of what or where to enter the information, clicking the CTA can guide them by displaying an error message and highlighting the correct field.

Regarding input focus, it's beneficial to automatically activate the input field and display the appropriate keyboard to help users focus on the next step. However, be mindful of the CTA positioning — the keyboard shouldn't obscure it. If there's a risk of this happening, fix the button's position above the keyboard. Solutions with or without a background usually work well, as the button color should be an accent and stand out from the rest of the interface.

Switching to Password

Returning to our user: after entering their phone number, they might decide to switch to the password tab. Although they can still log in with their phone, some users might find using a password a more comfortable way to access their account.

An important note here is that user data is precious. We should not clear the phone input even if the user accidentally or intentionally switches between these two tabs.

In our case, if the user enters an incorrect password, an error message will be displayed, and the "Login" button will be disabled.

Reset Password

First, we verify if the user exists in our database by checking their email. The verification code is sent via push notification or SMS and should be automatically validated by the system. Once the code is matched, the user is redirected to the Reset page, so no additional button is needed at this step. If the code does not reach the user, we provide an indication of when they can request a new code and allow them to change the phone number in case of a typo.

It's important to note that users might have multiple apps of the same type and may not remember if they have an account with us. At this stage, we can inform the user if they are about to create a new account. The key is to ensure that this flow is not a dead-end; new users should be able to continue their journey seamlessly. This also applies to users who may have forgotten that their account was registered with a different number.

Set New Password

The final step is to assist the user in setting a new password. I chose to implement a few essential rules for password creation. Ideally, these rules should be dynamically marked green as the user types, indicating compliance. Once the password is successfully reset, we provide a clear confirmation message to indicate that the task was completed successfully.

That’s it for now! Thank you for your attention. Please share your experiences in the comments if you've ever worked with this flow and let us know what challenges you faced. Feel free to contact me if you have any questions about this decision or if you want to discuss design.