Design: Create a mockup for a warning modal when resetting project fields

[NilakshiS]

Overview

A warning modal or message should appear when a user selects the reset project button to ensure a project is not accidentally lost. Create a mockup for the warning modal.

Action Items

• [ ] Create a mockup on Figma
• [ ] Review with Product and Dev. Update the design if needed based on feedback.

Resources/Instructions

Warning modal from create projects page for reference


• UX Research recommendation on Warning Modal

• 1743

  • Link to document with the list of all the modals on the website

[thetanmancan]

@NilakshiS

Progress: I did some brief research looking at how modals are done in other applications, especially Google ones. I also made some different designs based on three of the modals we had in the style guide.

Blockers: I have some questions.

First, which modal from the style guide I should be using to base this modal off of? There are three that seem logical.

Three potential modal templates

  

So I based three possible designs on them.

Three potential modal templates

  

Please let me know if there is a protocol for deciding which design we should be using over others.

Second, where should the question marks be used? Some of the examples in the style guide show a question mark being used in the title, i.e. "Leave page and delete any unsaved data?", and some don't, i.e. "Delete FAQ". I'm not sure which style we're going with. The one thing that does seem consistent is that if a question mark is used in the title, it is not used in the subtitle, and vice-versa.

Third, can you give me some feedback for what to use for the subtitle? The three variations I have are:

1. This will delete all data from the current project.
2. All data will be deleted from this project.
3. Delete all data from this project?

Fourth, is it alright to use the term "delete"? It seems like we're using the term "reset," but from the user's perspective, isn't all their data being deleted? The word "reset" usually implies that something is being set back to its original state, but that implies that the thing itself is being maintained, and in the case of using the "Reset Project" function, I don't think anything from the project that they're "resetting" is actually being retained. For example, if I reset my phone back to factory settings, the data is removed, but the phone is still there. In the case of a TDM project, if we reset the project, the project no longer exists. Therefore, isn't the word "reset" misleading? Wouldn't "delete" or another word like it be more representative of the actual functionality?

Availability: I should have fifteen hours available to work on TDM in the coming week. Any work on this particular issue is dependent on receiving feedback for it.

ETA: Once feedback has been received, any more changes on this issue shouldn't take more than an hour.

[thetanmancan]

@NilakshiS, based on tonight's discussion with the team, I'm advocating for the following design:

My ideal design


Here's the reasoning:

• Compared to the other two modal options, it's the most visually pleasing to me.
• It puts the warning symbol front and center. Putting the warning symbol next to the text does not give it the level of importance I think it needs to visually carry the message across that the user is about to lose all their entered data.
• I decided to put a question mark in the title so that it serves as a question that the user must answer using the buttons presented, as opposed to simply repeating the text of the button that the user just clicked.
• As our fellow UXers pointed out in the discussion, the word "delete" means something else in our system, so for the subtitle I changed the verb to "clear" and went with the version you suggested, "This will [clear] all data from the current project."
• In the style guide, all buttons are given a horizontal padding of 32 pixels around the word in the button that is wrapped. But because the words "Cancel" and "Proceed" have different lengths, the buttons had different lengths, so I shrunk the width of the Cancel button to match that of the Proceed button so that they would be symmetrical. If we want to change that, that's fine with me.
• In the style guide revamp that was presented tonight, the secondary button has a black stroke around the button. However, when placed next to the warning button in this modal, the Cancel button looks a bit too highlighted, almost looking like a call to action and drawing too much visual attention away from the Proceed button, as shown below. Therefore, I changed the color of the stroke to a medium grey. We can change this back if you feel strongly about it.
  Cancel with black stroke

Let me know if you have any questions or want me to make any more changes.