Design Oops Reminder

[sydneywalcoff]

Overview

If you use browser navigation like (refresh, forward and backward) while in the letter generator, the app forgets all your previous answers. And because it uses your previous answers to determine the flow and eventually to form the letter, the app breaks and shows a blank white page.

We should
a) warn users not to use browser navigation like (refresh, forward and backward) while in the letter generator before they start #1152
b) if a user does refresh, we should show a little Oops reminder (similar to the #1136, but smaller) reminding the user not to use browser navigation

Action Items

• Design Oops Reminder
  • find illustration
  • edit illustration
  • create mobile and web version for the oops reminder
  • edit colors to be purple for now
  • ping claudia to let her know when i'm done
  • create a user flow for possible decisions that the user would take
    • returning home
    • returning to onboarding
    • returning to the start of the letter generator
    • two buttons: home/letter generator
• hand off
• place screens onto the "desktop" and "mobile" pages
• add the wireframes to the design hand off page [in progress]
• add comments wherever needed
• link the issue in the page
• add design to Code Oops Reminder #1142
  • remove dependency label
  • move to new issue approval column
  • add ready for dev lead label

Resources/Notes

CONTENT

[jyehllow]

Hey @sydneywalcoff , would it be possible to just use browser popups in this situation?

Example 1
Example 2

Also, the current advice page instructs users to keep their browser open - maybe we can also add " do not refresh the page"?

Tagging @SamHyler and @emmathrash for visibility as well.

[sydneywalcoff]

@jyehllow we can, but I would prefer to at least have a branded popup. Using the browser popups isn't a good look.

As for your other point, that is already covered in another issue #1152

[github-actions]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions]

Hey @jyehllow, @anitadesigns! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[anitadesigns]

This issue is not ready to be worked on. Design and Content will strategize the best approach for this on Friday

[github-actions]

Hey @eruan8888! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[eruan8888]

Hey all, I prototyped a desktop and mobile version for the Oops page. I customized an illustration from Storyset and used it for these pages. Let me know what you think. Attached are screenshots of what the design looks like.

[github-actions]

Hey @eruan8888! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions]

Hey @eruan8888! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions]

Hey @eruan8888! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions]

Hey @eruan8888! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[anitadesigns]

@eruan8888 next week we can go over the hand off just remind @vanessaavviles to add it to the agenda

[eruan8888]

Can I just close this one? It's pretty much done.

[github-actions]

Hey @eruan8888! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[eruan8888]

Updated the spacing, design is ready for dev