Change TRICARE switch link from informational alert to warning alert

[mmiddaugh]

Issue description

VHA DM received word from our Lovell colleagues that they are receiving complaints from Veterans regarding the dual-banner view:

We have already started experiencing many complaints from our different services regarding the confusing dual-view banner on our website. This is specifically affecting our TRICARE patients who can’t find the information they need for scheduling or services and they are weighing down service time by having to go directly to the service to find out any information they want since they can’t find it on the website. We knew this would generate a great deal of frustration with our facility even before the launch and told the team this but were told the committee wouldn’t support any changes to the appearance of the site. I can appreciate that the committee themselves don’t have to deal with the site so would consider this a non-issue; however it is major for us and is preventing our TRICARE service members and family from getting the care they deserve quickly and efficiently. We would like to prevent people from giving up on using our new site by addressing this issue as quickly as possible. Can we get the change we originally requested so we can fix this issue?

This is a relatively new experience - time and familiarity may resolve this issue.

Analytics

Patient population numbers from January 2023 and were provided by the Lovell communication staff.

• 18,000 enrolled Veterans
• 45,000 TRICARE recruits
• 12,00 TRICARE beneficiaries

Lovell health care analytics June 21 - July 18, 2023

• Pageviews (total) 17,276 VA/ 1,934 TRICARE
• Pageviews for Captain James A. Lovell Federal Health Care Center 3,197 VA/ 267 TRICARE
• Pageviews: System level Health Services 1,950 VA/ 169 TRICARE
• Pageviews: Make an Appointment 1,691 VA/211 TRICARE
• Pageviews: Contact us 1,402 VA/ 46 TRICARE
• Pageviews: Locations 542 VA/ 70 TRICARE
• Pageviews: Pharmacy 424 VA / 50 TRICARE
• Users (total) 7,426 VA /1,048 TRICARE
• Views/user 2.33 VA / 1.85 TRICARE
• Average engagement time (seconds) 52 VA/ 49 TRICARE

Open questions

• How many complaints have been received? (and over what period of time?)
  • Does this change over time?
• Do Veterans also experience confusion related to the toggle?
• What is the desired outcome?
• Do the analytics (i.e. Medallia feedback/CSAT) support the anecdotal reports?

I discussed with Amanda. Her recommendation is to replace the existing Informational alert style with the Warning alert style, changing the color to Yellow and changing the icon to an exclamation point. This allows us to make it more visible while staying within the design system and established patterns.

Acceptance criteria

• [ ] I expect that the switch link on Lovell pages on Production uses the warning alert style
• [ ] I expect that the switch link fonts, size, styling align with design system
• [ ] I expect the font weight of active link is set to 700
• [ ] I expect that the tag is ended before the space between beneficiary and >
• [ ] I expect that the link to the updates in staging have been provided in this ticket to @aklausmeier for review
• [x] @aklausmeier has approved updates

[swirtSJW]

Can we get the change we originally requested so we can fix this issue?

Do we know what they originally requested?

[davidmpickett]

I discussed with Amanda. Her recommendation is to replace the existing Informational alert style with the Warning alert style, changing the color to Yellow and changing the icon to an exclamation point. This allows us to make it more visible while staying within the design system and established patterns.

@mmiddaugh That was the original design we took to Midpoint Review and was rejected by platform

https://github.com/department-of-veterans-affairs/va.gov-team/issues/46056

[aklausmeier]

@davidmpickett Thank you for the contextual background on Midpoint Review, this confirms my only hesitation.

Also, noticed feedback in Midpoint suggested ensuring font size and styling is the same as what is shown in design system and we have room to improve as the current fonts in informational alert on the Lovell pages are much smaller. It's another solution that would require minimal effort to test.

If data supports moving forward, I would suggest design alternative solutions to test into with usability testing.

cc @mmiddaugh

[mmiddaugh]

Acceptance criteria has been updated to reflect Amanda's point about font size and styling.

In collaboration with VHA DM, we determined that we will measure the impact of the change by monitoring page traffic (based on percent of beneficiaries) and VSAT scores (benchmarked against Veteran data).

[jilladams]

From planning: If Eli gets access, this is a good first task. If not, Max will own completion before end of sprint, and pair.

[eselkin]

I have made the change locally, will open a PR with some direction from @maxx1128

[eselkin]

Opened PR: https://github.com/department-of-veterans-affairs/content-build/pull/1654

[jilladams]

Merged / deployed. Took a look cuz I'm curious, and verified in Prod, screenshots:

 

Closing! FYI @xiongjaneg . Congrats, Eli!

[aklausmeier]

@jilladams @xiongjaneg It was brought to my attention that the alert style was updated to "warning" but the updates to fonts, size, styling were not brought into alignment with design system, link to design system in above Acceptance Criteria. What would be next steps to have this reopened and add AC that I review during staging?

One additional AC: Additional guidance that was shared with me today was from original staging collab cycle that is needed to close #54298

Change font weight of active link to 700 and end the tag before the space between beneficiary and >

cc: @laflannery

[xiongjaneg]

@aklausmeier I'll reopen and move to Facilities backlog. We have some work with VHA Digital Media on this topic, so this is timely. Thank you.

[eselkin]

@aklausmeier @xiongjaneg @jilladams There was a mention of the word active in the link. Should this be an Active link? https://design.va.gov/storybook/?path=/docs/components-va-link--active

Currently it's just an anchor tag. It would make sense if it is actually supposed to be an Active link instead though.

[aklausmeier]

@eselkin Yes, it is an active link component with font-weight of 700.

[aklausmeier]

@eselkin This "warning alert" should also mirror the heading and paragraph styles with font family, size and weights. shown here in Storybook https://design.va.gov/storybook/?path=/docs/components-va-alert--warning

(but with space between the link and the caret)

cc @xiongjaneg @jilladams @laflannery

[eselkin]

@eselkin This "warning alert" should also mirror the heading and paragraph styles with font family, size and weights. shown here in Storybook https://design.va.gov/storybook/?path=/docs/components-va-alert--warning

(but with space between the link and the caret)

cc @xiongjaneg @jilladams @laflannery

Yep, I have a change in (still rebuilding) that I'll have you check out. It looks similar to your image above (an H2 for the text and an Active link -- with the animated arrow not underlined)... here's a screenshot:

It's interesting, nowhere on any template in content-build do we use a va-link component (let alone the active one).

[aklausmeier]

This is great @eselkin

[jilladams]

For reporting purposes:

• Issue was originally closed in Sprint 90.
• Reopened to track additional style changes for font, in Sprint 92.
• Will be tracked again in S92 reporting for visibility on the follow up changes / status.

[jilladams]

Verified in prod: H2, Active link uses animated arrow not underlined, Amanda signed off at PR review. Closing!