Design & implement landing page changes for Records Phase 1

[sterkenburgsara]

Description

Medical records plans to reach Phase 1 (to at least 1% of users) in September 2024. Prior to that launch, the landing page needs to be prepared to point to the new experience, and we'll need to iterate on the "grey box" design for MR.

User story

As a Veteran for whom Records has been enabled, I want the MHV landing page and secondary nav to provide an integrated experience with the new Medical Records app on VA.gov, so that I can get to the tasks I need to complete directly on VA.gov seamlessly, without any confusion.

Notes

• Implementation should coincide with ticket for secondary nav link update
• Launch of phase 1 will only be released to about 1% of users at first, and will slowly build with the goal of releasing to 100% of users by November 2024.
• The design may need to have iterations as that deadline approaches, but not with the initial launch to Phase 1. We may need to link to another page that allows full Blue Blue downloads that may also need to live under the /my-health isolated app build. TBD.
• Jonathan has notes from office hours input from Kaitlin
• Note that there is already a feature toggle that is already on that shows the medical records temp page.

Possible tasks:

• [x] Design updated gray box for the landing page, with full annotations for developers
• [x] Update Learn More section (design and content)
• [x] Get designs approved by MR team and Kaitlin Fink
• [x] Sync with devs about updates
• [ ] Implement changes behind feature flag

Acceptance criteria

• [x] An iteration of the landing page is designed for the launch of Medical Records to Phase 1
• [x] Design is implemented behind a feature flag (is there an MR one we should reuse?)
• [x] QA review
• [x] A11y review
• [x] UX review

[carlosfelix2]

We think this will require some new way to handle the current medical records toggle which is currently on.

[jonathanjnelson]

(WIP) Working Figma file can be seen here

[jonathanjnelson]

Hi @carlosfelix2,

Please see the updated designs (in Figma)

Updates to note:

• Remove the "expandable alert"
• Regarding Medical records box:
  • Change the “Coming soon” tag to “NEW” tag
  • Add content to box
  • Surface one link

[allanto-ah]

Environment: Staging

Verified that the "Medical records" box has been updated when the user has the feature toggle enabled for them. When clicking on the link, the user is directed to: https://staging.va.gov/my-health/medical-records/

Users without the feature toggle enabled still sees the "coming soon" version of the box and the temporary medical records page.

With feature toggle enabled:

[allanto-ah]

@jonathanjnelson There's a UX review in the acceptance criteria. When you get a chance, can you review? Once you review, I'll close this ticket. Thank you!

[jonathanjnelson]

The changes to MR box on landing page looks good @carlosfelix2

Will create additional tickets for changes on the landing page (e.g., removal of the expandable alert)