Design: Create Mockups for adding/editing admin notes on the My projects page

[NilakshiS]

trafficstars

Overview

Admin needs the ability to view, add and edit notes to a project from the "My Projects Page". Create design mockups for possible solutions.

Details

Dev has implemented a basic view, add and edit notes functionality on the "My Projects Page" but it is not very user friendly. One suggested solution is to use Modals. Create different mock-ups using modals as well as any other possible solutions to help visualize ideas and get feedback.

(Expand to see screenshots from dev site below)

Image of admin notes column currently

Notes which have already been created show a pencil icon to edit them, while a plus icon indicates adding a new note

Editing a note changes the note to an editable text box with save and cancel buttons

Adding a new note also opens an editable text box with save and cancel buttons

Action Items

• [x] Create design mockups
• [ ] Connect the mockup to the new "My Projects Page" prototype if possible #1885
• [ ] Review with Product, Dev and Research and iterate if needed based on feedback.
• [ ] Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources/Instructions

• Link to "My Projects Page" on dev site
• Link to old prototype on Figma
• Link to new prototype on Figma
  • Link to interactive prototype

[namigoeku]

I took the suggestion in using a modal.

The user would press the plus icon to add a note

That would open a modal with a text box and a save and cancel button.
Question 1: Is there a character limit in the notes? We can notate a character limit at the top. Question 2: Do we need a scrollbar or textarea resize icon to account for a large amount of characters?

Once the note is saved, the note preview would indicate a limited number of characters to indicate there is a note attached. The user can press the expand icon to edit or view the comment.
Question: Would it be an issue if the user accidentally edits the modal while viewing?

[ExperimentsInHonesty]

Column should have two icons (no text). Icons represent

• add a new note

Add new note modal image

• read/edit a note
  • Modal option 1 (it takes you to a modal that looks like the add a new note modal)
  • Modal option 2 (it takes you to a modal that has the text, and you have to click on pencil, which would then take you to modal 1)

The edit section should be large enough to actually read and edit.

[namigoeku]

• To do: create specs with paragraph spacings of the modal.
• Done this week: Created 2nd version of modal for editing admin notes.
• Used larger plus sign used by Yiran in her latest design.

• Larger text area as requested by Bonnie and dev's to account for potentially large area of text.
• 16:9 ratio, or 1080px by 608px
• Blue bounding box indicates you are in edit mode, similar to edit mode in the admin FAQ page.

• Once the note is saved and the user returns to the page there is a note icon indicating there is a saved note.

• Text box is grey to indicate the note is in view mode.
• User clicks the edit note button to take the user into edit mode.

Question 1: Will the background of the modal be blurred so draw the user's attention to the note? Question 2: If the user attempts to click outside or write a note without saving will a warning modal appear?

[NilakshiS]

Feedback from stakeholder's meeting on 10/15:

• Design approved
• Clicking outside should not close the modal. If the users click close icon or the cancel button without saving the changes, it should give a warning about unsaved changes similar to what we have when we navigate to another page without saving a project.
• Blurring the background is fine.

Image of the warning dialog box from create project page

[namigoeku]

Created the warning modal.

Next steps: I will update the prototype for #1885 My Projects Filters on Figma.

[namigoeku]

Updated the warning modal to match the current design system. Updated the modal to current font styling.

[NilakshiS]

Updated spelling for discard, used the new secondary button.

[ExperimentsInHonesty]

@namigoeku there are two issues we would like to solve

1. the modal refers to a page, but it should be referring to the note
2. the modal is appearing, but the note has disappeared, and we see the my projects page in the background. Wouldn't we see the note in the background?

[namigoeku]

@ExperimentsInHonesty

1. Changed the wording on the warning modal to "You have unsaved changes. Are you sure you want to continue without saving?"
2. Thank you for catching that. Added the note behind the warning modal. Please see revised mockups.

Other things to note:

• Updated the background overlay to Grace's specifications
• Updated the corner radius to Grace's specifications

Click plus sign to add a new note. Opens in edit mode (blue outline). Use text box expand icon used in "Project Description" section of create projects page.

View Note - opens in view mode (grey outline)

Edit Note - textbox appears in edit mode (blue outline)

Error Modal - Appears over the edit note modal.

[namigoeku]

@ExperimentsInHonesty Took your suggestion in darkening the stacked overlays by layer. Will be working separately with @greenishviolet in refining the overlay color and add to the design system.

[NilakshiS]

From the Stakeholder meeting 11-12-2024: unsaved changes modal design approved, however the lighter overlay version is preferred over the stacked dark overlays. Final designs : https://github.com/hackforla/tdm-calculator/issues/1889#issuecomment-2448395660