Additional Ideas

[donschaefer]

General

1. Employ standardized date format that always has the same number of digits (i.e. "01/01/24" instead of "1/1/24") to ensure uniform appearance of date-related data & thereby improve scan-ability when multiple dates are displayed in a vertical column
2. Improve prominence of search functionality
3. Replace "Expand" & "Collapse" buttons with a single expand toggle that is either on/off
4. Leverage an icon set that uses the same 1-2 colors (+ black and/or white) consistently for all icons to reduce visual "noise"
5. Avoid color combinations without enough contrast to improve accessibility (minor example: Referrals > family details, black text on rgb(51, 155, 165) / #339BA5 background when hovering over arrangement details - this fails WCAG AAA, but passes WCAG AA according to https://webaim.org/resources/contrastchecker/)

Dashboard: Need real/test data in order to provide UX review

Inbox page: Need real/test data in order to provide UX review

Referrals page:

1. Fix alignment issues (specifically the person names in relation to the "Location unspecified" text)
2. Increase margins/padding within referral cards to make them seem less claustrophobic/cluttered & easier to read
3. Consider whether "All" should really be the default view... is it common for users to want to view hosting referrals that have ended? Are there additional statuses besides "Ended" that also appear in this view (which may warrant an additional view of their own)?
4. For easier display on mobile, consider the following adjustments...
   • Make "Open since MM/DD/YYYY" a sub-heading or suffix text that immediately follows the family name (either to the right of the name or below it)
   • Remove the "Referral Status" column header
   • Treat the container that holds the description (i.e. "The family needs help because Daylight savings...") & the container that holds the referral cards like flex rows with child elements that can wrap vertically on smaller underneath each other at a given break-point rather than persisting horizontally like table cells
5. Make it more obvious what is clickable & where those clicks are going to take you... at present, clicking anywhere within a family takes you to the same place... which is fine, but looking at the screen, it doesn't immediately seem like anything is clickable, except possibly the various referral cards & when I click on those, I was expecting them to take me to different places (i.e. a details screen specific to that particular referral)
6. At what point is a referral no longer a referral because it has conceptually evolved to something else? When I think of a referral, I think of advice that someone has offered to say "hey, this person/group would be a good fit for a particular task/job/etc." - it is a one-time event that may or may not warrant followup (i.e. research, phone calls, etc.) processes to move things forward, but once something comes of the referral (or, when it becomes obvious that nothing will come of the referral), I don't know that it makes sense to continue treating data about that person/group as a referral - I'm thinking here of "Eric Doe's 'Hosting' referral that ended on 2/28"... did Eric make or receive the hosting referral? Is the referral ended because hosting was provided or because nothing came of the referral? This mental model could use some clarification

Referrals > Family Details page:

1. Consider the following updates to the left-side event log:

• Hide it entirely on initial page view, opting instead to show a button that can optionally include an icon when there are new events to be read
• When the button is clicked, show a flyout with all event data
• organize the data in the log chronologically
• Have each event show a date/time & subject & let the user expand the entry to see the details (un-read events can be expanded automatically while all others are collapsed by default)
• When buttons within event log entries need to be displayed & there isn't enough room to display them next to each other, allow them to wrap vertically (Note: this is not only an issue on mobile, but also potentially on certain tablets or small laptops)
• When displaying the edit options for a note in the log, rather than displaying "Backdate (optional - leave blank to use the current date & time)", just display the current date & time as the default value & allow users to change the date if they wish... it should be equally self-explanatory if not more so (and while using less words)

2. Rather than having "Edit" buttons for each individual field, try to limit it to 1 "Edit" button/link per "section" (i.e. 1 for the data at the top of the page & 1 per referral card) & have that button/link trigger a flyout with editable fields
3. ...General information overload... looking at this page, I have no idea what is supposed to be drawing my attention & if I want to find something specific, it is not immediately clear where I should look because there is so much data, so many colors, bold items, buttons, etc. - layout should be broken into clearly segmented sections with appropriate visual weight given to those section headings (to help users quickly get their bearings) & with visual weight removed from data/buttons/etc that don't need it. Leverage progressive disclosure & simplify color palette to improve UX. Pay careful attention to how layout wraps/collapses on mobile to ensure content is still readily accessible there.
4. Rather than having the various buttons across the top of the page above the content, collapse all of them into the kebab menu & move the kebab menu to the upper right corner of the application to the right of the family name
5. Review what details are needed "at-a-glance" & which can/should be hidden within collapsible areas, re-organize if/as needed & then update the page to load all arrangements as collapsed by default (especially on mobile). If there's a need/use for a expand-everything-at-once, add buttons to that UI that provide that functionality (like what's being done on Volunteers)
6. The "Location History (for Eric Doe)" modal appears to have a "Plan a Future Change" tab that does nothing when clicked on aside from showing a css animation & a disabled (or perhaps currently active?) "Record a location change" tab... which tab am I currently on? What is the purpose of clicking the other one? This may make sense with some additional context, but it should make sense on first glance, so there's probably some room for improvement here. (also seems like there's some excessive margin between these tabs & the modal title)

Volunteers (General - applies to both "Approvals" & "Progress" variations)

1. Move filtering functionality into a panel that can (if desired) remain visible while viewing the page data.
   • May want to consider moving this functionality into the existing email/sms panel & re-factoring that panel to show filtering by default, with options to expand sms/email functionality if desired (since filtering will be needed for many scenarios, but most scenarios where filtering is done involve the subsequent sending of emails/sms)
   • On Mobile, consider achieving this expanding panel UI in a manner similar to how the main navigation is handled on https://www.ilfb.org for mobile devices

Volunteers > Family Details Page

1. Page layout considerations...
2. lot of empty/un-used space on the left-side of the page, which seems odd considering how busy the right side of the page can get - seems like there may be some room for improvement here
3. Instead of having various add-related buttons at the top, why not break up the page by the sections of data it contains, make those sections collapsible, replace the buttons at the top with "skip-to"-type buttons that jump you down to the corresponding area of the page (since you said some pages get quite large) & then organize the various add buttons somewhere nearby their "edit" counterparts

Volunteers (Progress Variant)

1. Provide a key at the top of the screen that shows a series of icons with labels that correspond to each of the various columns to the right of the "Last Name, First Name" column, then eliminate those columns in favor of a single column that just displays the relevant icons for each family member #/ # #

Communities Page Unsure from test data whether or not a table layout is truly warranted, but assuming that it is, I suspect we could still re-gain some screen real-estate by doing the following:

• Shorten "Member Families" to "Families" & "Role Assignments" to "Roles" (to keep all column headings to 1 word & the same height)
• Consider changing "Member Families" (or "Families") from a column to a simple notation to the right of the community name (i.e. "Officer's Poker Group (3)"
• Make the "Description" column a collapsible, full-width row underneath the community name (similar to how "Individual Family Members" are collapsible to a larger "Family" on the Volunteers page)
• Consider collapsing all description rows by default

Communities > Community Detail

1. For consistency with Referrals, ditch the "Rename" button at the top & instead implement it as a dropdown option from a kebab menu (which could also be placed in the upper right corner to the right of the community name)
2. While there's a benefit to keeping each of the various edit flyouts restricted to their intended purpose, a similar benefit might be achieved in a more practical manner by having ALL sections present in a single edit flyout & simply collapsing all of them EXCEPT the one that the user clicked on... that way the target section gets the intended focus/visibility it needs without necessarily driving additional clicks for users that want to edit multiple areas (to close one flyout only to turn around and open another one)
3. Improve UX for adding community role assignments...
   • Am I supposed to be able to assign William Riker to BOTH the "Community Organizer" role AND the "Community Co-Organizer" role? Currently, I can, but if that's intended functionality, I would think that a multi-select checkbox arrangement would be a better reflection of that intent
   • Is a single person only supposed to have 1 role within a community (as the use of radio options imply)? If so, there's a bug that needs to be fixed & we could potentially make the entire process a lot less complex by just providing 1 dropdown per role (and disabling the name options for a given role that have already been assigned other roles)
   • Regardless of whether checkboxes or radio options are used, consider defaulting the selections to whatever the selected adult currently has assigned (if/when an adult is selected)
   • Clicking the delete icon to the right of a role assignment currently yields a browser alert window, whereas attempting to delete a family yields a styled "Are you sure you want to delete....?" modal. These experiences should be consistent with each other
4. Clicking on "Revised five-card stud rules.pdf" within the Officer's Poker Group takes me to a "BlobNotFound" xml file... is this a bug or just misleading test data?
5. While tricky, it IS possible to do a styled file upload button (for the upload documents flyout) - doing so would better match the theme in use throughout the rest of the site

Settings

1. After the initial page load, the "Role" dropdown...
   • Appears to have text that should be vertically centered, but is instead bottom-aligned (making a selection fixes this)
   • Has explanation text that says "Select a role to edit"... though, realistically "OrganizationAdministrator" (which should have a space between the two words) is not actually editable... might want to consider updating the description for accuracy
2. When selecting "OrganizationAdministrator", there are several horizontal lines shown, which I presume are meant to vertically break the various permissions into different sections... assuming that's accurate, it might be nice to do more to call out those various sections (whether via subheadings or some other mechanism) so that users can more easily scan to the specific type of permissions that they're interested in reviewing/updating #

[donschaefer]

@LarsKemmann - This particular issue is really more of a catch-all for the various items I had identified previously that I wasn't able to flesh out into individual issues within the 1hr time-box that you had allotted for me to migrate the various ideas from the UX review into this kanban board. If you'd like me to spend the additional time needed to separate them out into their own more well-documented stand-alone issues with appropriate context/thoughts for future consideration/work, please let me know & I'll be happy to do so.

[LarsKemmann]

Thanks! Let's leave this here for now as documentation and we'll come back to it when we get to those areas of the design.

The one really interesting thing to consider for our overarching discussion of redesigning the family screen is that idea of collapsing and jumping to areas. I have mixed feelings about that but it's getting at the idea of progressive disclosure, just from another design approach

[donschaefer]

@LarsKemmann - added an additional hours worth of UX review notes to this issue (including 1-2 items that came up during a prior phone conversation but hadn't yet been logged anywhere)

[donschaefer]

@LarsKemmann - added an additional 1.25hrs worth of UX review notes to this issue.

P.S. ... is there a prize for finding Waldo?

[LarsKemmann]

There was a prize! You're too late though. $5 Amazon gift card. 😁

[LarsKemmann]

Also thank you. Looking forward to digging into this! 😊

[LarsKemmann]

Thanks! Right now the biggest overall need is to start thinking about a better design for the family screen. As an initial starting point, I would like to actually make the screen "worse" (by adding even more information) before we make it better, so we can see more of the behavior and functionality that the screen actually needs to expose before we decide how to optimize it. Specifically, there are two things I would like to see happen on the family screen:

• allow the user to see a list of past referrals and select one referral to view the details of, with the most recent referral being the default.
• allow the user to see a list of which communities the family has been added to. This is basically the counterpart to how you can view member families from the community screen. This should be a quick one to implement, and as an FYI, I don't expect most families to ever have more than one community that they are a part of. So you can absolutely optimize for that case.

If you could start on the display of communities, ideally with the community being linked to navigate to the community screen (like the family is linked to the family screen on the community screen), that would be fantastic. I've had several requests for that over the past 2 weeks.

[LarsKemmann]

@PabloDinella @Rabi94 FYI for design update work