Design a "Ready to Submit" modal

[thetanmancan]

Overview

We need to update the design of the "Ready to Submit" modal on the Submit Snapshot page so that it conforms with our design system.

Details

Current "Ready for your submission!" modal on the Dev site

The current design of the "Ready to Submit" modal has a number of issues.

1. There shouldn't be an X button in the top-right corner.
2. The icon does not use a shade of green we have in our design system.
3. The icon implies a successful submission rather than warning about an action.
4. The title should not have punctuation that isn't a question mark.
5. Modals should have the primary button on the right and the secondary button on the left.
6. The primary and secondary buttons are not styled correctly.

Please design a modal that fixes these issues and conforms to the standards created in #1743 and in our style guide.

Action Items

• Design a mockup of a modal that conforms to our style guide's standards for modals.
• Review with the design team. Update if needed based on feedback.
• Review with product and dev. Update if needed based on feedback.
• Once finalized, make a slide in the staging deck.
• Get Stakeholder sign-off via the stakeholder meeting slide deck.
• Add the changes to the Changes to TDM Modals List Google Doc.

Resources

• This issue is requested as part of finishing dev issue Create a Submit Snapshot Form and Main Menu Item to select it. #1655 .
• This issue should be included as part of Implement changes to WARNING modals to match style guide #1977 .
• Modal standards were created as part of Create a consistent style for modals across the website #1743 .
• Figma page for 1743.
• Figma page for our style guide.
• TDM Dev site link for the Submit Snapshot page.

[marlenamellody]

Hi @angelanewman, hope everything's been going well! Please provide an update and let me know if you have any questions. Thanks!

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

[angelanewman]

Hi Marlena, thanks for checking in! So sorry but I've been sick this week so haven't been able to get around to what I wanted. Here's progress so far -- 1. Progress: started on researching best design practices/wordage for this particular modal. No design progress yet 2. Blockers: None yet 3. Availability: Will pick research & design back up on Friday (have all day to work) 4. ETA: Probably this weekend, granted I don't run into any confusion or issues. 5. No pictures yet. Links I looked @ for researching best design practices thus far: https://uxplanet.org/best-practices-for-modal-window-design-627f7aba57f1 https://userpilot.com/blog/modal-ux-design/ https://www.nngroup.com/articles/modal-nonmodal-dialog/ https://app.uxcel.com/courses/ui-components-n-patterns/modals--dialogs-best-practices-166 Thanks much!

…

On Tue, Feb 4, 2025 at 7:19 PM Marlena Mellody Khim-sai < ***@***.***> wrote: Hi @angelanewman <https://github.com/angelanewman>, hope everything's been going well! Please provide an update and let me know if you have any questions. Thanks! 1. Progress: "What is the current status of your project? What have you completed and what is left to do?" 2. Blockers: "Difficulties or errors encountered." 3. Availability: "How much time will you have this week to work on this issue?" 4. ETA: "When do you expect this issue to be completed?" 5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on." — Reply to this email directly, view it on GitHub <#2031 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BONW3GVSFKZ3SOI5YRZH5B32OF7KVAVCNFSM6AAAAABVBZ2JJSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMZVGYYTEOBUG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[marlenamellody]

No problem! Grace worked on creating a consistent style for modals #1743 / Figma Link, so I recommend referring to these modal types for this specific use case. Please reach out if you have any other questions/concerns.

[angelanewman]

@marlenamellody oh that's very helpful, thanks much!

[angelanewman]

Hi @marlenamellody & @thetanmancan !

1. Progress: Completed & Pending review (some questions tbd @ meeting)
2. Blockers: none
3. Availability: Will be at design meetings tomorrow
4. ETA: Completed unless needed to iterate
5. Figma link

[ExperimentsInHonesty]

@angelanewman What happened? Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again. during the meeting?

[thetanmancan]

@angelanewman Some updates from yesterday's meeting:

• Because there is no verification process that takes place once a snapshot has been submitted, there is no need for an error modal.
• At Tuesday's stakeholder meeting, we will be using this document to solicit stakeholders about what language they want to use in the modal and what information needs to be provided to users in that modal about the snapshot before they submit it.
• For Tuesday's shareholder meeting, I will include your question about whether we need to alert users about application fees.

[thetanmancan]

@angelanewman I have notes from our 2025-02-12 meeting that I wanted to include here.

• While there is no need for an error modal, the "successful submission" you came up with is a good idea.
• We don't use the orange "warning" color in our system anymore. We only use the red "critical" color now. Please change the icon colors in the warning modals accordingly.
• In accordance with our design system, please add an X button in the top right corner of the "successful submission" modal.
• In our design system, there is a weird color whiplash with some of the warning modals where the warning icon is red but the primary button is green. Please look into other icon and/or color options where we can still warn the user but allow them to take a confirmatory action that isn't destructive.
  • The developers haven't started implementing Implement changes to WARNING modals to match style guide #1977, Implement changes to ACTION modals to match style guide #1985, or Implement changes to INFORMATION modals to match style guide #1986 yet, so there is still time to make a design change for warning modals.

[angelanewman]

Wonderful! All noted, thanks @thetanmancan !

[angelanewman]

Hi @thetanmancan & @marlenamellody !

Progress: Added X button on "Successful Submission". Added submit icon to 'Ready to Submit' modal in black for modal design consistency.
Blockers: Waiting on Stakeholders response about copy & user flow of Snapshot submission.
Availability: Will be at design meeting today
ETA: Will design/iterate this weekend

Figma Link

[thetanmancan]

Hi @angelanewman. I forgot to include the document that the stakeholders will be inputting their language into, which will be useful once you have to implement it into the modal, so here you go.