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.

[lola3736]

@lasryariel okay to remove the label "ready for product" as it looks like Design is currently working on the wireframe with discussions with Product.

[gabcdominic]

10/29/24 Stakeholder Meeting

Layout approved. Next, we need engineering validation on feature viability to determine prioritization and avoid churn, scope creep, and design rework.

MVP Decisions:

1. Navigation Flow: Previous & Next Options: Removed for MVP. After completing a section, Coordinators are directed back to the dashboard to streamline task navigation.
2. Approval Process and Visual Changes: Coordinators approve sections individually. Consider visible change highlighted in a side-by-side view for easy comparison of "before" and "after" states (see below).
3. Intake Profile Feedback: No character limit for Coordinators on intake profile feedback, allowing flexibility without imposing restrictions.
4. Version History and Display:
   • Intake Profile View: Stakeholder suggested for Coordinators to be able to see both current and prior versions side-by-side at both the top and bottom of the screen, facilitating seamless comparison. Update Requests:
   • End-User View (Hosts/Guests): Only the latest update request from the Coordinator is visible, ensuring simplicity in their view.
   • Coordinator View: Displays a complete chronological history, with the latest entries at the top. This enables Coordinators to manage updates by keeping relevant notes and removing those no longer needed.
5. Completion and Updates Process: Notes and Requested Changes: After each section, Coordinators can add notes to request changes. Once action is taken on the requested change, the note disappears from the Host/Guest view but remains in the historical log for the Coordinator. Hosts/Guests see "changes requested—see details," showing the original question and the Coordinator’s feedback, which can be displayed as a thought bubble or feedback box.
6. Enhanced Notes Features:
   • Coordinators can view summaries of notes with the option to collapse sections for a streamlined experience. By default, notes are fully visible, but users can opt to hide them as needed.
   • Search/Edit/Delete Capability: Coordinators can edit or delete notes to ensure accurate and relevant information remains visible.
7. Search Capability: Coordinators will have a search function for profiles and notes, making it easier to find specific information efficiently.

Post-MVP Considerations:

1. Previous & Next Options: What happens to Previous & Next options if a filter is applied on the dashboard?
2. Admin Oversight for Notes: To prevent potential issues (e.g., inappropriate content), admin oversight can be added post-MVP, allowing admins to edit/remove specific notes if necessary.

[gabcdominic]

11/12/2024 Team Meeting

1. Guest/Host Team Sync Needed to define the intake profile submission and resubmission process. For example, UI expectations for handling unapproved fields, enabling feedback loops and revisions for intake profiles, and locking approved fields in the Guest/Host UI to prevent modification. For example, if there's revision needed under "Substance Abuse," can that section of the intake profile be editable, and we lock all other sections that have been approved?

2. MVP Scope Reminder to minimize Coordinator workload. Prioritize elements that streamline their tasks.

3. Discussions regarding 10/29/24 stakeholder feedback

   • Navigation (Next/Previous Buttons): Feasible implementation for us to have next/previous functionality to fetch data in sets. Engineering will have to look more into this if we have large data sets (ex. 1-50 are on page 1, 51, and on is on page 2 of the dashboard)
   • Side-by-side before and after layout should be workable. Line-by-line design can be too complex (feasibility and ease of development)
   • Notes management (Search/Edit/Delete): confirmed to be implementable, can proceed
   • Feature prioritization: 1) Intake Profile 2) Notes Management. Execution: Priyanka to lead Intake Profile, Nihan to work on Notes. Engineering begins overall layout
   • Dashboard customization (saved view dashboard customization, shared views between coordinators for filters applied): We need to assess further technical requirements for saved views and coordinator-specific shared views based on applied filters

4. Engineering Parallel Development Approach

   • The objective is to allow Engineering to progress with skeleton and iterative refinements. Engineering can start with general structural design with minimal expected changes like the approved core layout, user profile views, and accordions for content organizations. They can maintain the current scaffolding & adjust only if necessary.
   • Engineering will need more direction for the intake profile as we work with Host/Guest on intake profile submission & resubmissions