<?xml version="1.0" encoding="utf-8"?>
Open full project

'Continue with...' step

Reset Password - Mobile App Flow 1

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

Reset Password - Mobile App Flow 2

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

Reset Password - Mobile App Flow 3

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

Reset Password - Mobile App Flow 4

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

Reset Password - Mobile App Flow 5

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

Reset Password - Mobile App Flow 6

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.

Reset Password - Mobile App Flow 7

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.

Tools used

Figma
Adobe Photoshop
Adobe AfterEffects
Adobe Illustrator

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

13 reviews


Hi Jason,

Kudos on your work, totally dig the smooth transitions and interactions. I just wish to inquire, if you have the page title as Login or Sign-up, do you think it'll be visually pleasing and less text heavy if you had just used simple buttons like 'Google', 'Apple' instead of 'continue with Google' etc.

What i mean is, probably under Login or Sign-Up theres a little text 'with' and the buttons come under it. I think it'll reduce congnitve overload and improve the aesthetics of the page. Let me know what you think. Cheers!

Thanks Franklyn, it would certainly be more pleasing to have less text on the page, so from a design point of view I agree! I think it would need A/B testing to confirm if this is an issue of cognitive load or not. I've observed this 'continue with' pattern on multiple apps, so I'm hoping they've done their UX research so I don't have to :)

You have developed an excellent user flow.


I think you nailed this brief. Content flows logically, and the design choices you made feel natural and logical! Great job!


You have developed an excellent user flow.

I liked that you didn't use the code input flow for resetting the password, as it can sometimes be a bit difficult to do on mobile devices.

What can be improved?

First, make the "Continue with Google" button more consistent with the other service buttons. Right now, it looks the same as the "Continue with Email" button.

And one more thing: Check the distance between the input field label and the input field. It may be necessary to reduce the space between them so that the user can read the label and the input as a single entity according to the proximity principle. It seems that the spacing between them and the button are the same right now.

Good luck!

Thanks for this feedback, I've adjusted the social sign in to be grouped in a clearer hierarchy, and have also reduced the gap between the label and the input.
Awesome! One more thing - you can see it in the previews. You can use the secondary button for the “Cancel” button on the “Send reset link” screen, like the “Close” button on the “Check your email” screen. Just to be consistent across the design. I really like your new previews in the description!

The design is great, in particular the user flow is logical and clear. And you have created a seamless interactive prototype. Thanks for sharing.

However, it looks like the visual alignment of those buttons in the log-in page would need further tuning.

Overall, I would rate 5 for this design.


Hi Jason,

great job on this one. I appreciate how you explained more than just your screens in your description. That’s helpful and lets me know you’ve thought things through.

You’re presenting to a bunch of designers here on Uxcel, but consider how you’re presenting to other stakeholders. You’ve clearly thought through the details, so something like a storyboard could be a neat addition.

Check the vertical alignment on the Apple logo. Looks like it’s optically a bit low of center.

Thanks Boyd, I've added presentation screenshots to the description/rationale section of the project.

Jason, your reset flow is super clear and well thought out—maybe just fine-tune button alignment and consistency, but overall this is excellent work!


Incredible work. I was just wondering why you use a modal for the forget and reset password screen. Is there anything behind it ;)


You did a Fantastic Job!


Hi Jason,

I think you have covered all the corners and briefly explained. I won't judge the design layout as it depends on design system and branding but it is functional and didn't find any loophole in design. Great work.


83 Claps
Average 4.6 by 18 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>