Design: Standardize spotlight patterns in CMS facility content types

[laflannery]

Description

The Health services list and Vet Center content types in the CMS both have spotlight/featured content but they have different CMS fields and different displays on the front end. These should be updated to be standardized (follow VBA).

This was discussed in #14981 with a decision to "leave the spotlight section as is (for VBA), with blue boxes and in the same location. We can review this along with it's placement on Vet Centers at a later date."

This is for Drupal alignment with Front end.

Design

Spotlight content page in VAMC facilities Figma file

Acceptance Criteria

• Spotlight content is standardized across products
• Review with accessibility
• Review with content design
• Review with engineers
• Schedule review with UX Lead
• Create CMS Collab Cycle ticket for async review (tag Erika Washburn, Marisa Dominguez, Steve Rancour on CMS) this process is changing, for now VA UX/PO reviews will take it's place
• Stub follow up tickets or tag PO to stub subsequent tickets.

Team

Please check the team(s) that will do this work.

• CMS Team
• Public Websites
• Facilities
• User support

[davidmpickett]

Just adding some screenshots and examples for clarity. The multiple blue boxes are currently used in two places (and soon to be a third with VBA regional offices).

VAMC health services page

Vet center page

The single blue box approach is used on VAMCs. It is controlled at a System level, but shows up on multiple front end pages

• https://www.va.gov/chicago-health-care/
• https://www.va.gov/chicago-health-care/locations/jesse-brown-department-of-veterans-affairs-medical-center/

[davidmpickett]

• Vet Centers are using Featured content paragraph type
• VAMC Health Services lists are using Link teaser paragraph type
• This hasn't been added to the VBA Facility content type yet
• VBA centralized content is using Featured content paragraph type for 3 national
• VAMC Health Services lists should probably switch to using the Featured content paragraph type for consistency

[xiongjaneg]

Per Dave in Slack

Want to point out that @Laura Flannery
original point in filing #13804 was to note a discrepancy in the CMS/editorial interface that is independent of FE display. Fixing that issue looks like:
content modelling > Drupal field migration > FE query update
Updating the FE display to use new components is a separate piece of work that would be more like:
Product design > FE template update

[laflannery]

@xiongjaneg I found a comment that an AC was added to this ticket back in May and turns out it never was. I think technically the second AC you added here might cover it, but ultimately we want to make sure that the spotlight patterns use components when available or we consider componentizing them and I want to make sure that doesn't get lost.

[xiongjaneg]

@laflannery I added an AC that hopefully captures the missing AC but please edit if it doesn't quite capture the intent. Thanks for flagging!

[aklausmeier]

updated ticket with link to Featured Content VADS V3 component that we need to align with

[xiongjaneg]

CMS Team review would likely be after this ticket, possibly as part of Platform CC

[aklausmeier]

CMS Collab cycle will follow same ticket creation process with async review, no kickoff needed slack thread with CMS for reference

[thejordanwood]

@aklausmeier @laflannery @davidmpickett @omahane This is ready for your review! I've been working on aligning this across Vet Centers, VBA Regional Offices, and VAMCs. As Laura suggested in the ticket, we're going to align with VBA/Vet Centers.

I've also been working on aligning the Drupal design with the card component we're converting the spotlight pattern to. I've captured some FE use cases in this Figma file. In some of the use cases, editors for Vet Centers are using email addresses and phone numbers as CTAs instead of links. In other cases, they're using a combination of a phone number and link as a CTA.

My recommendation is to encourage editors to only use one CTA, whether that be phone, email, or a link. I've explored that possibility in this Figma file. The design would be similar to the Events content type, where we use conditional formatting to show different fields depending on what the editor chooses.

We can discuss this in UX sync if that would be easier!

• @omahane I'm wondering if using conditional formatting here is possible?
• @laflannery Will using conditional formatting in this way be accessible?

[aklausmeier]

@thejordanwood left comments in the Figma file, looks like we need a mockup for the system level as well

[thejordanwood]

@aklausmeier Thanks! I just put in a mockup for the system level.

[davidmpickett]

@aklausmeier @thejordanwood - I took some of my concerns about the Link Collection variant from the Figma comment threads and spun up a new ticket stub for future consideration

[thejordanwood]

@omahane We reviewed this in UX sync, but I wanted to make sure I got your eyes on this too.

For spotlight news sections, I'm proposing an MVP state that would align VAMC with Vet Centers/VBA. The next step would be to introduce conditional formatting to the CTA section. A bit more context can be found in my previous comment.

For spotlight sections that have relevant links, my suggestion is to remove the Title and Link summary fields. I've been told these don't map to the FE/it doesn't matter what the editor inputs here.

[omahane]

@thejordanwood I looked at the Figma, and I don't see any glaring issue. It looks very useful, in fact, in both the MVP and longer-term future state. The showing and hiding of fields based on a previous selection should be possible.

When we go about implementing this, though, I think we need to be considerate of the entities that currently use CTA:

It would make sense to create a "spotlight CTA" that is distinct from the current one so that we don't have to figure out how to backport all of these fields to other entities and address what would be pretty extensive change management in terms of UX. As I was out for the last UX sync, I can't say for sure whether this has already been considered.

[aklausmeier]

@thejordanwood for our future selves, can you add @omahane's screenshot to our Figma file. That's a big bowl of Drupal spaghetti.

[thejordanwood]

@aklausmeier Just added that!

[jilladams]

Not sure about the state of review with Amanda - are we clear on this ticket except for ticketing next steps?

Have also noted in epic the things we'll need to consider re: ticketing, when we get there: #15931 (comment)

[thejordanwood]

@jilladams Yes, I believe this ticket is ready to close. I agree that any additional tickets can be created later.

Feel free to add any additional feedback you may have though @aklausmeier!

[aklausmeier]

@jilladams final review done, looks good, ok to spin up next step ticket and close

[jilladams]

From Figma review (#13804): my understanding of next steps for ticketing MVP is brain dumped below -- @thejordanwood could you sanity check, and if this is right, I'll work on ticketing (2 questions below):

VAMC Health Systems page:

update Common Links > Link teasers section:

• Link Text field:
  • add help text (present on VBA RO Local spotlights > CTA > link text field)
  • add character counter
• Remove Link summary field
• @thejordanwood (@aklausmeier ) one question: for Systems, the link field still has label URL instead of Link, like the others. Is that intentional?

VAMC Health services pages

Update "Featured content on health-services page" section to match VBA "Local spotlights" treatment.

• Update header
• Add Title field with helptext & character counter
• Add Description rich text field with helptext & character counter
• Convert "Link teaser" to VBA's "Call to Action" treatment, including:
  • Link Text field:
    • add help text
    • Add character counter
  • remove Link summary

Also: @mmiddaugh the designs include a stop-gap update for VAMCs, and a bigger overhaul to address specific use of phone / email as CTA. I can go ahead and build out those tickets, if we think this is something to go ahead and queue up / get refined for implementation? Not sure where that sits in priority, relative to All The Things. Will add to product sync Qs for Monday.

[thejordanwood]

@jilladams These are my notes about the VAMC health system pages. The VAMC Health services pages section looks good to me.

update Common Links > Link teasers section

• We're also removing the Title field. This isn't really where the title is controlled in Drupal.
• Yes, it's intentional. I think the URL/Link fields are using different Drupal modules? I really can't remember the exact reasoning they're different, but have a vague memory of being told this in the past. I decided to keep this as URL since that's what it already says.

[jilladams]

#17688 created! Closing.