fmccaf1
commented
6 months ago CC: @sterkenburgsara @jonathanjnelson @wesrowe @dcloud @carlosfelix2 @radavis
Open fmccaf1 opened 6 months ago
fmccaf1
commented
6 months ago CC: @sterkenburgsara @jonathanjnelson @wesrowe @dcloud @carlosfelix2 @radavis
caw310
commented
5 months ago @fmccaf1 are you available to attend the Design System Council meeting on Thursday, June 27 at 11:05am?
fmccaf1
commented
5 months ago @caw Yes, I'll plan to meet with you then. Thank you!
caw310
commented
4 months ago Follow up from DSC meeting:
What
The Cartography team, which works on the My HealtheVet (MHV) landing page as well as anything portal-related that is not covered by health product teams, seeks review of the secondary navigation bar design for use within the MHV portal.
Purpose
With this design, the Cartography team seeks to improve our users' experience of navigating throughout the MHV portal. In recent testing, the secondary navigation bar has significantly improved Veterans' ability to find and navigate to the four main health tools in the portal (appointments, messaging, medications and health records). For several other health care affordances that do not fit within the four main tools, findability and navigability were - at worst - unchanged.
Usage
Our plan is to show the secondary navigation bar at the top of each page (under the VA.gov header) of /my-health. From any page within the portal, users will be able to quickly locate and navigate to any of the four main tools and the landing page without needing to first find a landing page, or open a dropdown menu on mobile (a navigation difficulty we've seen Veterans struggle with for awhile). See: Health Wayfinding Study, 6/2023; MHV Secondary Navigation Research 10/2023
In this commonly occurring context, users can enter MHV on VA.gov through a product try-me banner, complete the task with the new VA.gov version of a tool, and then go directly to a different health tool on VA.gov to complete a different task, without any need for an additional click or step.
In the future, when try-me banners are irrelevant and our users are entering the portal through VA.gov or Google searches, it is more likely that they will visit the landing page. In this context too, users will have access to the secondary navigation bar to directly move to and between health tools (a quality Veterans we've heard Veterans say they value in recent research). See Health Navigation Comparison study, 2/2024
Behavior
Both desktop and mobile designs are displayed as a horizontal blue banner right under the VA.gov header, in which 5 navigation link options are shown at all times: the MHV landing page, appointments, messages, medications and medical records. All 5 options show a single white icon in addition to white text.
On desktop, when a user's cursor hovers over an option, rectangular background around the icon and text lightens in color and the text darkens.
Both on desktop and mobile, when a user selects an option, the rectangular background around the icon and text becomes white and the text becomes blue.
Examples
I think it would be best to see the component in staging as an authenticated user. You'll need to turn on the feature flipper that enables the secondary nav and then check it out/use it at staging.va.gov/my-health.
If you need help finding a staging user please reach out on Cartography team's slack channel: mhv-on-vagov-cartography-team
Your team
Research (optional)
Health Navigation Comparison study, 2/2024
Code (optional)
Link to code in Github
Next steps
You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.
Submit requests to join an upcoming Design System Council meeting in #platform-design-system.
During the meeting, the Design System Council Working Group will evaluate the request and make a decision.
If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.