Design: Create Mockups for adding and editing admin notes from the my projects page

[NilakshiS]

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

• [ ] Create possible 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.