[UX - TESTING] Test Sitewide-managed apps/features/products against a 640px breakpoint

[FranECross]

Status

[2024-05] 768 deprecation has no listed date. We've deprioritized this effort until it's clear that it's a priority with a timeline.
[2024-04-25] This will be unblocked by the work in Sprint 2 wherein the FE folks will stand-up a test environment for testing the new breakpoint, so moving it into Ready for Jordan's consideration for Sprint 3.

Description

The Design System Team will be deprecating the 768px breakpoint and adding a 640px breakpoint (tentatively) in mid-August.

We need to ensure this change doesn't adversely affect any Public Website managed features/apps/products, and Jordan has offered to test the Public Websites products/apps/features at the 640px breakpoint to identify any issues.

User story

AS A PO/PM for Public Websites apps/features/products
I WANT to ensure we accommodate the deprecation of the current 768px breakpoint and addition of a new 640px breakpoint
SO THAT Veterans, their caregivers, family and survivors continue have a good experience when in VA.gov

Engineering notes / background

Analytics considerations

Quality / testing notes

Acceptance criteria

• Using a 640px reakpoint, test the screens in the following PW apps/features/screens, and note if there are issues that may need wireframes, and/or adjustments

Facilities products are audited for 640 breakpoint impact

• Breadcrumbs (every page, applies to Public Websites products too). Screenshots in comment for where breadcrumbs appear and are built with custom code - spot check is fine.
• VAMC (systems, facilities, top task pages)
  • VAMC System: https://www.va.gov/minneapolis-health-care/ -- custom code details VAMC System (incl banners): adopt V1 and V3 components where components are not used #16952
  • VAMC Facility: https://www.va.gov/minneapolis-health-care/locations/minneapolis-va-medical-center/ -- custom code VAMC Facility template: adopt V1 and V3 components where components are not used #17654
  • Health Services: https://www.va.gov/minneapolis-health-care/health-services/ -- has custom code (VAMC Health Services template: adopt V1 & v3 components (incl spotlights) where components aren't used #17657)
  • News Releases: https://www.va.gov/minneapolis-health-care/news-releases/ -- custom code News Release detail page: adopt V1 components where components are not used #17068
  • Stories: https://www.va.gov/minneapolis-health-care/stories/ -- custom code Stories: adopt V1 and V3 components where components are not used #17067
  • Programs: https://www.va.gov/minneapolis-health-care/programs/
  • Policies: https://www.va.gov/minneapolis-health-care/policies/
  • Police: https://www.va.gov/minneapolis-health-care/va-police/ -- custom code details: VAMC Policies: adopt V1 components where components are not used #16953
  • Billing & Insurance: https://www.va.gov/fayetteville-arkansas-health-care/billing-and-insurance/ -- custom code VAMC Medical Records: adopt V1 and V3 components where components are not used #16960
  • Medical Records office: https://www.va.gov/tampa-health-care/medical-records-office/ -- custom code VAMC Medical Records: adopt V1 and V3 components where components are not used #16960
  • Register for Care: https://www.va.gov/miami-health-care/register-for-care/ (includes a Facility status banner as of 4/12) -- custom code: VAMC Register for Care (Top Task pages): adopt V1 and V3 components where components are not used #16957
  • Locations - https://www.va.gov/minneapolis-health-care/locations/ - custom code VAMC Locations: adopt V1 and V3 components where components are not used #16964
  • Detail page: https://www.va.gov/minneapolis-health-care/work-with-us/ -- custom code VAMC Detail page: adopt V1 and V3 components where components are not used #16999
  • Operating status: https://www.va.gov/boston-health-care/operating-status/ -- custom code VAMC Operating status: adopt V1 and V3 components where components are not used #16998
  • Staff page: https://www.va.gov/battle-creek-health-care/about-us/leadership/ -- custom code Staff templates: adopt V1 components where components are not used #17066
  • Staff profile: https://www.va.gov/battle-creek-health-care/staff-profiles/michelle-martin/ -
• System banner with situation update - https://www.va.gov/miami-health-care/register-for-care/ (includes a Facility status banner as of 4/12)
• Vet Centers - CMS examples: https://prod.cms.va.gov/admin/content?title=&type=vet_center&moderation_state=published&owner=All
  • Location: https://www.va.gov/manchester-vet-center/locations/
• Facility Locator - https://www.va.gov/find-locations
• Facility Locator detail pages - https://www.va.gov/find-locations/facility/vba_348
• Regional Offices (pre-prod templates) -- this is probably not possible to test on the branch unless we set up a Tugboat for it, so may need to wait til typography hits prod and then test on preview

Public Websites

• Global header / footer
• Search / results:
• VA.gov homepage
• Header / footer injection -- https://benefits.va.gov
• Veterans Crisis Line modal
• Benefits Detail Page - https://www.va.gov/health-care/
• Benefits Hub Landing Page - https://www.va.gov/health-care/about-va-health-benefits/
• Campaign Landing Page - examples from cms - https://prod.cms.va.gov/admin/content?title=&type=campaign_landing_page&moderation_state=published&owner=All
• CTA widgets
  • Get medical records
  • Cerner: Make appointment - https://www.va.gov/health-care/schedule-view-va-appointments/
  • Cerner: Refill/track prescriptions - https://www.va.gov/health-care/refill-track-prescriptions/
  • Cerner: Send secure message - https://www.va.gov/health-care/secure-messaging/
  • Cerner: View test and lab results page - https://www.va.gov/health-care/view-test-and-lab-results/
• Discharge upgrade wizard - https://www.va.gov/discharge-upgrade-instructions/questions
• Event -- CMS examples (prob good to check a few): https://www.va.gov/discharge-upgrade-instructions/questions
• Events List -- https://www.va.gov/outreach-and-events/events/
• R&S content types
  • FAQ page -- CMS examples: https://prod.cms.va.gov/admin/content?title=&type=faq_multiple_q_a&moderation_state=published&owner=All
  • Resources and Support Detail Page -- https://prod.cms.va.gov/admin/content?title=&type=support_resources_detail_page&moderation_state=published&owner=All
  • Reusable Q&A -- https://prod.cms.va.gov/admin/content?title=&type=q_a&moderation_state=published&owner=All
• Find a Form - https://www.va.gov/find-forms/
• Full width alert - any published will be here: https://prod.cms.va.gov/admin/content?title=&type=banner&moderation_state=published&owner=All.. (4/12: only published one appears on /housing-assistance/)
• Income Limits -- https://www.va.gov/health-care/income-limits/introduction
• Outreach Hub -- https://www.va.gov/outreach-and-events/outreach-materials/
• Promo banner -- there are none published right now. We may need to get a Tugboat going to create content in order to see this example live: https://prod.cms.va.gov/admin/content?title=&type=promo_banner&moderation_state=published&owner=All
• Translations widget - https://www.va.gov/family-member-benefits/comprehensive-assistance-for-family-caregivers-esp/
• PACT Act -- https://staging.va.gov/pact-act-eligibility/introduction -- this isn't in prod, you may not be able to preview it for this audit. If not, we can cut a separate ticket to review it / fix things once typography update is in prod.

Other

• Notes on impact are added to ticket and reviewed with PMs in order to define follow up tickets
• If wireframes are needed, add information to [UX] Create wireframes or design for new 640px breakpoint while accommodating deprecation of 768px breakpoint #17747
• Next step tickets are created
• Notify Fran when finished

[FranECross]

@chriskim2311 @randimays Jordan mentioned having ya'll put the new 640px breakpoint on a lower environment so she can then test our products against it. Do you just need a basic ticket asking for this, with AC that Jordan is able to access the test against it? Thanks in advance!

[randimays]

@FranECross Yes, a basic ticket would be good 👍🏻 thanks!

[FranECross]

Thanks, @randimays! I saw your questions to Micah and used info from the Slack thread to create this ticket.

@jilladams I'll still broach this to the PO COP, but wanted to get ahead of the game by creating these tickets, since I don't really see any way to get around at least spot checking/testing. cc @thejordanwood

[davidmpickett]

In UX Sync, we discussed that this is not ready to move yet because DST has not provided a branch where breakpoint changes are staged

[jilladams]

Got lost in the sauce live: #17775 tracks having FE stand up the branch, and that ticket is already listed here as a dependency. 🤦‍♀️

[jilladams]

Also: That ticket is going to move in Sprint 2, very likely. So: back to needing to refine this for Fac vs. PW and whether both can happen.

[jilladams]

FYI: I updated this story to span both PW & Facilities, and borrowed the check list of products from the typography audit ticket.

[jilladams]

(Some of the ACs per product may be silly for a breakpoint check, e.g. the various Cerner CTA widgets. If we know one of them looks ok at this break, they probably all do. Feel free to push back or suggest AC adjustments as necessary.)

[davidmpickett]

Given the scope of the products to review this is an 8 by default. I could see this being just a 5 if there are very few issues to document.

[FranECross]

Thanks, Dave! Leaving it an 8 since there are so many products/apps/pages to look at makes sense.

[jilladams]

We are going to push this from Facilities SSprint 3 to June (after typography). When it comes around, Amanda noted she's happy to help out.

[FranECross]

Per Jill Adam's note in the Epic: Closing this. We've decided we'll work on adopting the 640 breakpoint for all our products, when we move everything over to Accelerated Publishing templates.