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

[ExperimentsInHonesty]

• Parent Issue #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

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

Wireframe

• [x] Create Wireframes (Figma link to wireframes)
• [x] Questions for Product: (link to comment)
• [x] Update Wireframes based on feedback and answers to questions
• [x] Review Updates with Product
• [x] 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 https://github.com/hackforla/HomeUniteUs/issues/677 with link to figma and screenshots

Resources/Instructions

• Product Requirements/User Story: https://github.com/hackforla/HomeUniteUs/issues/519
• Figma design

[ExperimentsInHonesty]

If they only have one notes field, and can add or remove something from it... then having a number inside the icon, dosent make sense. I recommend the following If there is a note, the icon is solid with a check mark in it if there are no notes, its open and has the + 1 on it.

I also noticed that the notes field was grayed out on the table view... is there a reason why they could not click on the note +1 icon from that view and leave a note then?

[lasryariel]

added comment to one of the older existing designs in figma, we should revert to those versions for MVP for simplicity.

https://www.figma.com/design/BNWqZk8SHKbtN1nw8BB7VM/HUU-Everything-Figma-Nov-2022?node-id=15207-18315&t=PtTctlrVruzua57D-4

[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 #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 #635 and #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 #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.

[gabcdominic]

10/15/24 Meeting Notes

Design updated -- new version reflects changes below.

Pop up notification

• When additional information is requested or available, a pop-up notification will appear on the screen, allowing coordinators to see the update immediately.

Notes

• User Perception: Upon further thought, notes should not mimic a chat box as it could lead to misinterpretation. Notes should be distinct from a chat box to avoid confusion with Host/Guest chat or AI features. The visual must indicate it’s for profile notes. Future discussions may explore a 'post-it note' aesthetic for clarity. The notes icon is placed next to the individual's name to prevent any confusion with a chatbot interface.

Mobile Design

• Nihan is developing a mobile version that mirrors the desktop design. Icons and language will remain consistent across platforms

Next Steps

• Present the design to the internal team by 10/22/24
• Stakeholder review with Bonnie on 10/29/24

[gabcdominic]

10/22/2024

Link to Figma here.

• Version History: Essential for tracking feedback and measuring improvements. Ensure clear version history to compare feedback, especially if multiple revisions to a profile exist. We will think about this post MVP (ex. what if there are ten revisions? Tracking progress remains key to managing stakeholder expectations).
• Profile Navigation: Implement up/down arrows for profile navigation. Ensure it aligns with the overall product flow.
• Notes Overlay Panel: Replace the "chat interface" look with an overlay panel to avoid confusion. It's notes, not chat.
• Profile-Level Notes: Notes are tied to the profile level
• Notification MVP: For MVP, implement a one-time pop-up notification (shown below). Keep it simple.
• Wireframe Focus: We need the layout to make sense now. Ensure wireframes prioritize logical layout and clarity. Once this is done, move to optimize the information flow.
• Development Frame Addition: Add a frame on the development website with a click-through feature for Sophia Johnson. It should communicate the feature’s purpose to users. Priyanka will review the wireframes on Sunday.