All projects

Case study: VA Mobile Header

The problem

The header for VA.gov was never optimized for mobile devices. It took up a lot of real estate on mobile screens, so much so that users could not see the H1 on page load if an alert was present.

Design process

In order to know how to improve the mobile header, I had to collect data (by observing user behavior and reviewing analytics) which lead to proposing the following changes:

1. Shrink the "Official government website" banner.
2. Simplify the Veteran Crisis Line component to consume less space. In addition, remove the "logo" becasue we observed Veterans mistaking it as a hamburger menu.
3. Minimize the VA logo by removing the VA Seal and typography, as they became illegible on small screens.
4. Collapse and move search under the main menu. Our analytics indicated search was not heavily used on mobile, and giving it prominance in the main menu might increase search usage.
5. Remove "Contact" (a duplicative interaction), but leave it in the footer.
6. Display a persistant sign in or authenticated state.
7. Eliminate the redundant "Home" link in the exposed menu.

The solution

A mobile-optimized, accessibility-first header for VA.gov.

The impact

We monitored key interactions to ensure the changes did not have an negative impact, but improved the user experience on mobile:

1. Search usage stays the same or improves.
2. The Veteran Crisis Line did not receive fewer calls.
3. Sign in stayed the same or improves.
4. The main menu usage stays the same or improves.
5. The call center does not receive more requests.
6. Home page visits stayed the same or improved

Thankfully, all the changes made to the mobile header saw an increase in all desirable areas, and zero negative effects.

My role

This initiative was created, driven, researched, and designed by myself. I iterated on many design variants internally, reviewed by other designers and contract teams at VA built the changes and validated the results.

All projects