Portfolio

Explore

Jenny Wang

Made finding and completing health tasks easier for Veterans

Improving the the current secondary navigational strategy on VA.gov so that Veterans can easily find and manage their health on My HealtheVet on VA.gov.

Overview

Project summary

My HealtheVet (MHV) is a digital personal health management platform that gives Veterans access to their health information and tools to improve their health. MHV is in the process of integrating with VA.gov, and it might create find-ability issues for health tools and information once the integration is complete. So, in thinking ahead of the development and makes sure VA.gov is ready to handle all the tools in MHV, the health team asked: How might we ensure Veterans can easily navigate MHV and quickly manage and take actions towards their health?

My role: UX researcher/designer

Team:

1 design lead

1 information architecture specialist

1 UX designer

Duration: 3 months

The Problem

The current secondary menu is designed for navigating information content, and there’s inconsistency in visual and interaction designs. MHV is a personalized tool, and Veterans need to not only navigate content, but quickly take actions. Even though there are strong hypotheses that informs us the potential problems, we still don’t know if simply plugging in the existing secondary menu will work for Veterans without research.

The Goal

As a researcher, my goal is to understand veterans' mental models by examining how they navigate and complete health-related tasks. This understanding will enable the team to design a secondary navigation strategy that makes finding health information and completing tasks easier.

My Process

Understand the problem space: Examine the existing secondary navigation to identify any unmet needs that we hypothesize it may not be addressing.

User research: Understand how Veterans expect to be able to navigate within MHV on VA.gov.

Ideate and Prototype: Use research insights to inform low-fi designs that match Veterans’ mental model for navigating with MHV on VA.gov.

What are the existing problems?

I mocked up what the MHV on VA.gov would look like using the existing secondary navigation design pattern for VA.gov. The existing side navigation component is not fully supported by the VA Design System, and its implementations are likely inconsistent across VA.gov. With the mock up of the future state of MHV with the current secondary menu pattern, my team members and I were able to identify a couple of hypothesis of the problems .

⁠

MHV on VA.gov with existing secondary navigation pattern

MHV on VA.gov with existing secondary navigation pattern

⁠

Users may not know there is a secondary menu on mobile due to the position and title of the secondary menu

From previous research on way finding on health tasks on VA.gov, users kept gravitating towards the primary main menu to search for health related tasks, which is not the right place and takes them through a rabbit hole. The "in this section" secondary menu appears before the page title (H1) which removes its context. The loudest text on the page is the title, and most users would expect to see options beneath or alongside this title text, not above it. “In this section” may confuses with what’s on the page instead of a menu that leads to somewhere else. Because of the position and title of the secondary menu, users may not know there’s another menu, and end up using the primary main menu to navigate within the health section.

Users may be confused about where they are on My HealtheVet on VA.gov because the current secondary menu narrows what is visible based on how deep users are within a tool.

The secondary menu dynamically updates and narrows what pages are visible to the user as they continue to click more deeply into the site. On mobile this is a confusing and unexpected experience, as it is much less clear where users are at on the site.

The purposes of 2 hamburger menus may be confusing.

⁠

Competitive analysis mural board

Competitive analysis mural board

⁠

BBC's 2 menus analysis

BBC's 2 menus analysis

⁠

I worked with a UX designer and an Information Architecture on a comparative analysis. We looked at how other websites handle secondary navigation, and what we could learn and transfer to MHV on VA.gov. We didn’t limit to health care websites because we thought all content heavy and actions heavy websites could be helpful for us.

Only one website (BBC) has two hamburger menus. Other websites all had one menu that displays on every page clearly and enables users to navigate to anywhere of the website.

BBC had two hamburger menus, and it was clear what each menu’s purposes are and where users are on the website by utilizing visual elements and principles.

Research

The UX audit exercise and competitive analysis helped me understand what potential problems our team needs to validate through the research and think through what users feedback can help us improve the navigation within the MHV on VA.gov. I drafted a research plan to help the team get clarify on what we want to solve and our goal and outcome.

See my detailed

research plan⁠

and

interview guide⁠

Goal: Understand how Veterans expect to be able to navigate MHV on VA.gov.

Outcome: Inform us how Veterans navigate health tools on MHV on VA.gov to complete health tasks, which give us a better sense of what works and what doesn't with the current secondary navigational strategies (section navigation menu and breadcrumbs). For what doesn't work, we are able to use the feedback to help us make improvements to the secondary navigational strategies.

Key research questions:

How does the current VA.gov secondary navigational pattern align with Veterans’ expectations for MHV on VA.gov?

In what situations might a Veteran want to navigate back to the MHV on the VA.gov landing page, if they want to go back to the landing page?

In what situations might a Veteran want to jump directly from one tool to another?

Synthesis

I conducted interviews through Zoom. These interviews include questions that help me observe users’ process of navigating to and within My HealtheVet on VA.gov, the mental models they use to find certain information, and their expectations related to health-specific tasks. The interviews consist of a combination of health-related tasks and direct questions.

⁠

⁠

After interviewing a diverse group of participants, I utilized Mural board, transcriptions and excel to synthesis findings. I used the key research questions as anchor points for grouping each participants’ session, and color coded stickies to highlight their behaviors and their pain points when completing the assigned tasks.

Primary findings

Main menu and landing page

Most participants expected to use the main menu to navigate MyHealtheVet on VA.gov.

Most participants tracked back to the My HeatheVet landing page with browser back button and in-page breadcrumb and used it to navigate MyHealtheVet on VA.gov.

"In this section" secondary menu

Most participants didn't use the "In this section" menu. They expected the "In this section" menu to only show what's on the page, which would not have helped them to navigate.

Most participants were confused by the fact that the "In this section" menu changes what is visible depending on how deep they are in the site.

Secondary findings

Most participants didn't utilize breadcrumbs within the "In this section" menu.

Quote: "This is repetitive to the breadcrumbs on the page."

Medical records' 3rd level (the child pages of the tools) "In this section" menu gave a false hierarchy in the visual design.

Quote: "I didn't think vaccines and vitals are lab and test results."

Ideate and Prototype

Based on the primary and secondary findings, we know that the current secondary menu has lots of improvement. Even though participants struggled and took a while to complete the tasks, they were able to complete them. So, there’s something about the current navigation works. We don’t know if improving the usability and visual hierarchy will fix the problem. That’s not to say a whole new secondary navigation is a bad idea. We need to test out a couple of different ideas to see what works the best. I came up with two recommendations for the team:

If we keep the existing secondary menu, we should improve:

Relabel "in this section" menu so that Veterans know they can rely on it to navigate within My HealtheVet on VA.gov. Example: My HealtheVet menu

Consider to add a persistent way for Veterans to get back to the My HealtheVet landing page.

Example: Expose "My HealtheVet" throughout the site.

Make information hierarchy clear and consistent.

Or, we could reimagine how secondary navigation works:

How might we create a secondary menu that is easier to use than going back to the landing page? Make the options they gravitate towards on landing page visible and easy to access throughout the site.

I presented the research findings and recommendations to the design lead on my team, product manager, and product owner. Their response was notably positive, indicating satisfaction with both the findings and the strategic direction outlined for our next steps. Moreover, they expressed eagerness to proceed with the second recommendation proposed during the presentation.

Sketches

⁠

Sketch 1

Sketch 1

⁠

Sketch 2

Sketch 2

⁠

So, how might we create a secondary menu that is easier to use than going back to the MHV landing page? I want to make the options they gravitate towards on landing page visible and easy to access throughout the site. First, I started sketching out rough ideas on paper (see Sketch 1 and Sketch 2). Participants see MHV landing page as an anchor point and a dashboard where they can access all the major tasks. Our team knows the major tasks Veterans do on MHV.gov, which relates to Appointments, Medications, Secure Messages, and Medical Records. How do I create something like landing page that can be visible and easy to access for Veterans? Ideas came out from brainstorming around this question. I collaborated with another designer on brainstorming the potential designs to test. Below it’s an example for what the 2 designs look like for Messages landing page.

⁠

Design 1 for Messages landing page

Design 1 for Messages landing page

⁠

Design 2 for Messages landing page

Design 2 for Messages landing page

⁠

Next Steps: More Tests and Implement

We will need more test on this new secondary navigation menu. Because it only targets the major tools Veterans and caregivers use, we want to make sure they are still able to find the other tools, such as travel pay reimbursement and supplies orders. MHV on VA.gov is a complex platform that consists of many tools and content, so we will need to think about the secondary navigational strategies more holistically. At the end, I will work with the contract team’s developers to ship the designs and ensure it’s implemented correctly.

Results/Feedback From Leadership

Design Lead:

“You did a great job. This is exactly what we needed to move forward with this project.” (referring to the research read out presentation)

“You collaborated with many people (research lead, I.A. specialist, and contractors) in the process. It’s not an easy job to communicate and make sure everyone is on the same page for a junior designer.”

Research Lead:

“ You did a great job on synthesizing the findings and come up with actionable recommendations.”

Lessons Learned

Facilitating cross-team communication and alignment on decisions was challenging due to changes in leadership and the diverse opinions influencing the direction of generative user research. Things I could have done:

Having a meeting facilitation template to document everyone’s opinions and ideas and narrowing down what we as a team needs to focus on to move forward is something that could have helped with communication and decision alignment. Looking at the process documentation of how decisions change might also help with persuading others (contractors) why leadership or the majority change decisions.