Update police transparency FE design to account for expanded contact information

[davidmpickett]

User Story or Problem Statement

In #16415, it was decided that we will be moving to a model where local editors can associate multiple blocks of contact information with their VAMC System VA Police Page.

Our current design only has room for a single phone number in the middle of a paragraph.

Our new design might need to accommodate multiple types of contact information per facility. A possible parallel are the VAMC Billing and Insurance, Medical Records, and Register for Care pages.

Dave mapped out a content model in #16812

Design

Expand Contact Info page in the Police Transparency Figma file

Current FE Design

Billing and Insurance Example

Acceptance Criteria

• Review current layout of contact info on Billing and Insurance, Medical Records, and Register for Care pages
• Document recommendation for designs in Figma
• Requires content design review
• Requires accessibility review
• Requires UX Lead review

[eselkin]

Do we know what this data will look like?
For billing and insurance those get pulled from a field: fieldOffice.entity.reverseFieldRegionPageNode.entities
Do we anticipate a reverseField lookup?

[davidmpickett]

@thejordanwood Here's a stub ticket for you to look at adding more contact information on the VA Police page and possibly also redo the format on the Billing and Insurance, Medical Records, and Register for Care pages (since they will all use the same underlying content model). Let me know if you have questions

[mmiddaugh]

@thejordanwood @aklausmeier I hope you're able to provide design solutions to problems seen in existing uses of non-clinical services such as Gulf Coast Billing and insurance. This system actually has two billing and insurance locations listed in Drupal but there is no visual indicator or distinction. The Drupal experience will need to support your design suggestions by enforcing required fields, etc.

front end example

[thejordanwood]

@mmiddaugh @aklausmeier @davidmpickett I want to note here that Eli is working on service location paragraphs for VAMCs and is using our VBA version of the card component to organize this data for non-clinical services. (Link to his PR)

I've already been thinking of doing something similar for non-clinical services. Cards can also be applied to contact info on police pages as well. For police pages, I would like to put the contact info into accordions. This will condense that section of the page so that users don't need to scroll as far to see the data section.

Mockups for this work can be seen in the "Expand contact info" page of the Police Transparency Figma file.

[davidmpickett]

This is a good start. A few notes for next iteration:

1 - Missing fields to add

Since Non-Clinical Services use the same data model of Service Location as VAMC Health Services and VBA, we also need to account for the possibility of Service Options and Appointments information. Basically these fields (stolen from VAMC figma)

2 - Data structure flip flop

The Police design and the Billing and Insurance design have different implementations of the data structure. I think the Billing and Insurance model is likely the way we'll have to go where information is grouped by facility and then additional information can be added within Service Location(s). Kinda like this:

3 - The case of the phantom header data

We currently have no data/content model to support the Location/service header and short descriptive sentence on VAMC Health Services or Non-Clinical service. None of the existing 16,000 VAMC services are going to have any data to support this, nor have we come up with a centralized approach to populate this (life we're doing on VBA). This may be a good long-term goal, but I think we have to design for the case where this empty as the primary short-term reality. cc @mmiddaugh for product thoughts

[thejordanwood]

@davidmpickett Thank you!

1. I added service options and appointments.
2. I now show the data structure you proposed here. Although, you should probably double check my work. If I've misunderstood something, then it may be easier to hop on a call to discuss.
3. I'll wait for more feedback before getting rid of the location/service header. We could probably exclude it for now and implement it in the future.

In Figma, I now show some examples with real content along with the default content model for this. I thought it might be helpful for the Billing and Insurance example.

[davidmpickett]

Great work on the updates. I don't have any other notes at this time. Looking forward to discussing it in UX sync!

[laflannery]

@thejordanwood This looks good, no real concerns. I did add notes for the heading levels which does show that the Billing options do not fit the default heading structure, so we should make sure that this can be accomplished - it did already come up in what Eli was doing with the service updates

[davidmpickett]

FYI went in and added some real information from Black Hills health care which is one of the systems that has two distinct police offices

https://www.va.gov/black-hills-health-care/

[davidmpickett]

Reporting this comment from @mmiddaugh here for ease of reference

Contact information could include

• system level phone numbers with different numbers for

  • VA Police Dispatch
  • VA Police Admin
  • VA Police Investigators
    (this from archived Oklahoma City detail page)

• Separate numbers for the same purpose but dialed differently on campus vs off campus

  • Off Campus to VA Police Dispatch
  • On Campus to VA Police Dispatch
    (this from archived Salt Lake City detail page)

• Hours of operation for when non-emergency number is available vs emergency number

• VA Bedford has a physical location for their Communications Center and police emergency call boxes in multiple locations that dial directly into VA Police.

• Other services (with distinct contact information) example: Palo Alto

[aklausmeier]

@thejordanwood

In Michelle's example, I think there is an opportunity to support a better UX on the FE by exploring guardrails in Drupal. Using just the cards on the FE might be a Band-Aid to what is actually a Drupal issue. I don't want to duplicate these same issues on the Police pages or any work currently in progress. We should try to fix the root issue.

seen in existing uses of non-clinical services such as Gulf Coast Billing and insurance.

First service location:

For second service location, we are allowing the "Name of office or location" to be empty. Should it be? This one has the "use facility's street address" checked but nothing actually shows in the FE.

FE for reference:

[davidmpickett]

For second service location, we are allowing the "Name of office or location" to be empty. Should it be?

@aklausmeier Michelle and I have been having some conversation about this on the Drupal ticket:

#16813 (comment)

[thejordanwood]

I'm closing this ticket for now, with the expectation that the police design will continue after solutions are identified for VAMC non-clinical pages.

• The VAMC work will continue in Design updates for VAMC non-clinical contact information #17342
• A ticket stub has been created for future police design work in Continue to update police transparency design to account for expanded contact information #17343