Design for #519, #635, #731 Section 2 | Coordinator: Add Notes, View Intake Profile, Onboarding Events

[ExperimentsInHonesty]

• Parent Issue Design Epic for #454 Section 2 | Coordinator Epic #784

Overview

This is the design issue for the following stories #519, #635, #731 these relate to Section 2 | Coordinator: Add Notes, View Intake Profile, Onboarding Events.

Action Items

• Review Existing Design and existing functionality in https://dev.homeunite.us/coordinator

Wireframe

• Create Wireframes (Figma link to wireframes)
• Questions for Product: (link to comment)
• Update Wireframes based on feedback and answers to questions
• Review Updates with Product
• Additional Feedback from Product (link to comment)
• Update Wireframes
• Review Updates with Product

Design

• Convert wireframes into full designs
• Add screenshots to comments
• Review with product
• Review with Engineering for questions
• When designs are edited and ready for engineering, update issue Add note taking pop up in Coordinator Dashboard #677 with link to figma and screenshots

Resources/Instructions

• Product Requirements/User Story: Section 2 | Coordinator: Add Notes  #519
• Figma design

[lasryariel]

Questions for Product (copied from Figma)

• Can a user add a note from the table? If so, is in-line editing for all the fields in the table?
  • We want the Coordinator to be able to quickly and easily create/edit notes. It does not necessarily have to be directly from the table. In-line editing is not required for any fields on the table, although Coordinator assignment (covered in story Section 2 | Coordinator: Assigning Coordinators to Guests/Hosts #518) does ask for the assignment to be possible directly from the table.
• Can a note be deleted?
  • If it can be edited we can assume it can be deleted as well, since one could effectively delete a note by editing and deleting the text
• The notes will only be visible to all internal coordinator or just who is assigned?
  • assume it is visible to all Coordinators within the org. Controlling the visibility could be considered as an org-specific administrative setting enhancement Post-MVP.
• Do edited notes, need to indicate they have been edited? If so, does it need to display the history? Might be complicated for MVP
  • Assume no for MVP, but leave room in your design for this to be implemented in the future. You can draft the design to include this, just know that it likely will be scaled back in the engineering phase for MVP

Other Feedback from Product:

• The direction of the wireframe is great.
• The designs are similar to a "comment"/"updates" style of notes, which I think is ideal, but we may scale this down for MVP to a singular "Notepad" style notes section, with one text box that is continuously edited/saved over.
  • This would mean the note taker would need to self identify and indicate the date of the note themselves. for example:

    • 9/4/24 alasry: Interview went well
      9/3/24 alasry: scheduled interview for tomorrow
      

  • Please draft an alternate wireframe with this in mind so we have the option.
• Looking at what you have wireframed so far, it is clear that this design effort needs to be considerate of stories Section 2 | Coordinator: View and Approve Applications (Intake Profiles) #635 and Section 2 | Coordinator: Confirm completion of Onboarding Events  #731. Since these are all being laid out in the same pop out section. I have updated this issue to reflect that.
  • On that note, my suggestion is that we do something similar to the "My Tasks" section on the Guest Dashboard.
  • We don't need to copy it exactly, but the steps for the Coordinator are directly tied to the steps for Guests/Hosts, as they are counterparts in this process.
  • The key thing to emulate is that the different sections are a sequence of tasks (first review/approve intake profile, then complete onboarding events, then assist with matchmaking, etc.)
  • This could mean moving the "Details" section to a distinct maybe persistent section at the top, and then having an accordion with sections "Intake Profile", "Onboarding Events", "Matchmaking", "Relationship Management".
  • If we feel this is too much, to have in a pop out section, then we could consider making the sections links to their own pages instead. and the popout would be more of a summary.

Here is a screenshot of one of the frames in the current wireframe:
(Figma link to wireframes)

[lasryariel]

Notes from 9/10 breakout session:

• add profile pic icon to sticky section
• what does expand look like while still in side view
• separate intake profile approval from overall approval
• allow multiple tabs of accordion to be opened - mostly a stakeholder question
• define action items in the UI per step
• width of expansion screens - need to think about it, depends on width of details. maybe steps should be collapsible
• keep scalability in mind- design should easily adapt to more onboarding events, more intake profile sections
• Need to add version history
• Need "Approval Decision" Notes (separate from the regular notes)

[lasryariel]

Gabriella's Notes

1. Intake Profile Approval Version History:

• Ensure version history dropdown notes are placed consistently.
  
• Version history should correspond to the dates the coordinator responds to the changes. Hosts/Guests persona will track theirs.
  
• the current version should show in the list for version history

2. Intake Profile Approval Notes:

• Need a screen showing how the coordinator adds approval notes.
• When looking at prior versions, the approval notes can potentially be in the same spot that the coordinator adds approval notes.

3. Sidebar:

• We want an easily accessible sidebar. Design to combine sections 1a and 2b for the most useful information using segmented control or view detail > detail > collapse > vertical integration.
• Circle back to the sidebar and work on the full-screen view first.
• Context: This decision was made because including the full information for each step in the sidebar view is too much. We could not clearly articulate what abbreviated information would be useful. This can potentially be a post-MVP feature.
• We will treat the pop-up sidebar as a separate story if it’s useful, but right now, we will focus on the full-screen one.

4. Hierarchy and Sequential Flow:

• Define hierarchies more clearly to bring a clear sequential feeling.
• Priyanka (Design) to work on the sidebar, full-screen hierarchy, and notes.

5. Notes:

• Wherever we decide to put notes, it should be consistent (ex. at the bottom, not one at the bottom and one on the side)

6. Onboarding:

• We will discuss onboarding after finalizing the intake profile.
• Bonnie gave Jasika updated information on how the onboarding events will work. Need to sync with her and update Section 2 | Coordinator: View and Approve Applications (Intake Profiles) #635 accordingly.

[gabcdominic]

9/24/24

Version History Display

• Moving it to the left side for better clarity.
• Version history, instead of an icon, can be extended into a more descriptive label and highlight to be more user-friendly. We show "Responded" status for coordinator actions.
  
• Once a profile is accepted, it is marked as "Accepted" for clarity.
  

Profile and Notes Layout

• Make the layout more compact to remove unnecessary hierarchy, streamline the interface, and enhance user experience
  

We will need one more week on this.

[gabcdominic]

10/1/2024 Updates to UI/UX and Features:

1. Hierarchy Removal & Color-Coding

• Removed the top hierarchy structure.
• Introduced color-coding for different states (e.g., “Accepted” status highlighted in green) for quick recognition.

2. Version History Display

• Removed the icon and placed the version history action next to the date for improved alignment and visual clarity.
  

3. Notes

• We prefer the sidebar layout over other options.
• Notes will resemble a chat-style pop-up for a modern and interactive feel, making them easy to engage. The goal is to ensure easy access while maintaining a clean, uncluttered interface.