Improve the forgot password workflow to match rest of site better, and improve usability

[entrotech]

Overview

We need to improve the forgot password workflow so that it matches the look and user experience of our site, so that users are likely to find it easy to complete the process.

Detail of how to replicate

When the user go to menu, uses the Forgot Password feature, they currently go from a page that sends the reset link to email, to the website homepage and a tiny toast bottom left pops up

Action Items

• [x]~Implement the toast message.~
• [x] Create a work flow based off current process
• [x] Identify other sites forgot password workflows (add screenshots to figma if helpful)
• [ ] Define how it should change (toast currently appears at bottom and then leaves you at the regular home page - not ideal)
• [x] add screenshot to issue below if helpful
• [x] Show to team
• [ ] once signed off
  • [ ] close issue
  • [ ] add a label "ready for dev lead"
  • [ ] move the issue to new issue approval column

Related Development Issues

Remove Footer from Application #1302 Add margin above header for Login, Registration, Forgot Password Screens #1303 Consider design changes to the application header for mobile devices. #1304 Make changes to Login-Related Screens #1320

Resources/Instructions

Fola Figma, Toast

[bbovenzi]

@athya Here you go!

[bbovenzi]

It apparently does exist. We'll need to replicate and then see why we're not getting to this part of the code: https://github.com/hackforla/food-oasis/blob/develop/client/src/components/ForgotPassword.js#L86

[ktjnyc]

After pressing the reset password, it takes me to the landing page, the toast is bottom left and disappears quickly.

Sending this issue to the prioritized backlog with new action items.

• [ ] Design to evaluate the process and suggest alternate behavior (for instance staying on the same page)

[itserindean]

The only action item is completed, what should the status of this be?

[staceyrebekahscott]

@entrotech @JohnHaoHuang I see there was a PR associated with this issue. Is there a reason for this issue to still be open or can we close it out?

[fancyham]

I believe @JohnHaoHuang is working on this. We’ve been reviewing screens he’s been working on and it’s getting close.

Currently looking at a ‘flatter’ flow that doesn’t use a toast that we think feels better and should be easy to implement.

JHH, could you post a screenshot of what you’ve got so far so the programmers and PMs can get an in-progress snapshot?

[JohnHaoHuang]

@fancyham @staceyrebekahscott @entrotech Here is the latest design update for this issue. Please review and let me if there are any concerns. Thank you.

Figma File https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2943%3A7813

Screenshots for the latest update

[staceyrebekahscott]

@fancyham @sei1122 A reminder to add notes from UI meeting tonight as to next steps for John.

Moving issue back to In Progress.

[fancyham]

Made some suggestions for wording on password reset link confirmation page

[JohnHaoHuang]

@entrotech Here is the latest design update for this issue. Please review and let me know if there are any concerns or questions. I will also be participating in the development meeting on Monday August 15. Thank you.

https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=2943%3A7813

UPDATE There are four main things that need developers to work on:

Note: All changes and updates should reference the design in the figma file.

1. Creating a new toast message exactly like the design.
2. Center and add top margins to the "back to login" button on the send password link to email page.
3. Removing bottom logo and navigation for all the pages.
4. Giving the header extra margins for all the pages.
5. For mobile version, replace the current green box logo with the same logo as the desktop version. Also remove the text "locate free food in los angelas"

If there are any questions or concerns, feel free to reach out to me at JohnHaoHuang in slack.

Thank You.

[staceyrebekahscott]

@JohnHaoHuang A reminder to add notes for what is happening on this issue, as per discussion during team meeting.

[JohnHaoHuang]

Mostly focus on bottom footer and AB test for Header logo and text.

August 18, 2022 Thursday Notes:

1. Toast messaging is ready to be implement.
2. Center and add top margins to the "back to login" button on the send password link to email page read for implementation. (please refer to Figma file for more detail)
3. Remove footer (logo and navigation) from static pages (pages with no scrolling). There is still a mix opinion on keeping the footer with a scrolling page because header navigation's position is fixed ( Header Navbar follows while scrolling ). @entrotech please confirm. We can either make all Header Navbar position static ( does not follow while scrolling ) and keep the bottom footer navigation or vice versa.
4. Giving the header extra margins for all the pages, developers will have a look on it.
5. General AB test for the Header (for the team to view only) and decide a viable design.

[entrotech]

@JohnHaoHuang Can you review the wireframes in the Figma for consistency of the casing of the labels on the buttons across these screens? Some all all capitals and some are title casing (capitalized first letters only). For example, "SIGN IN" and "BACK TO LOGIN", vs. "Send Password Reset Link" and "Reset Password".

Also, the Forgot Password operation will fail if the email entered is not found in the system, I'm guessing that in that case we want to keep the toast message, and leave them on the Forgot Password page - or do you want some other behavior (e.g., staying on the form and showing them a message that stays until they try again, or navigate off the page)?

In the email for forgot password, the tag line is the old one, "Your free food directory". Though we still seem to be debating what the tag line should be, we might want to make this consistent with whatever the landing page shows.

[JohnHaoHuang]

@entrotech Thank you for pointing that out. The consistency of the labels are consistent now. The first letter of each word is capitalized. For example, "Reset Password" and "Send Password Reset Link".

You are right. When the forgot password operation fails, keep the toast message and leave them on the forgot password page until they enter a valid email; otherwise toast message instruct them to try again.

For the tag line "Your free food directory", I think consistency is good. We might want to bring this up during Thursday?

[JohnHaoHuang]

@entrotech I've communicated with one of the developers working on one of the sub issue for the toast message (#1320). I have review the entire application and decided it would be easier to have all the buttons capitalize for all letters. For example, "RESET PASSWORD" and "SEND PASSWORD RESET LINK". I apologize for inconvenience.