Improving mobile navigation

Visitors to consumerfinance.gov were overlooking a key navigation pattern that appears on nearly 1,000 pages and is sometimes the only way to navigate to related content. I redesigned and tested the pattern, leading to a 70% increase in the pattern’s discoverability and usability.

About the work

Challenge

Redesign the section menu to improve visibility and usability while preserving consistency with the site's existing navigation patterns.

Project team

  • UX/UI designer (me)

  • Jr. UX/UI designer

  • User researcher (me)

  • Front end developer

My responsibilities

  • Component design

  • User research

  • Design mentorship

Identifying the problem

During usability testing of our site’s high priority components, we saw that participants struggled to notice and interact with the section menu.

Reviewing heat maps of live pages that contain the section menu further affirmed low engagement with the menu.

 955 

pages on the CFPB’s site contain the section menu, making it a key navigation pattern

Exploring design solutions

I began by reviewing navigation patterns used by other organizations before sketching a range of design refinements. Rather than redesigning the component from scratch, I focused on subtle changes that could improve visibility without making the navigation feel unfamiliar. I explored adjustments to the menu's label, iconography, color, and visual hierarchy to better distinguish it from surrounding page content while maintaining consistency with the rest of the design system.

At the same time, I explored truncating the breadcrumb to shorten its footprint and free up top-of-page screen space.

Modified section menu designs I created in partnership with a jr. designer

New section menu design with a truncated breadcrumb

Validating the design

To validate the redesigned section menu, I planned and conducted a usability test to assess the menu's discoverability, design, interactions, and truncated breadcrumb.

The first round confirmed that participants noticed and successfully used the redesigned section menu, but participants struggled to recognize and interact with the truncated breadcrumb.

Based on these findings, I restored the full breadcrumb while retaining the redesigned section menu and conducted a second round of testing, which showed a significant increase in participants’ discovery and use of the breadcrumb.

Usability testing plan I created to evaluate the redesigned section menu

The result

Following usability testing, we launched the redesigned section menu.

Observation of live visitor behavior showed people successfully finding, opening, and using the menu to navigate between related pages. And routine usability testing revealed that 100% of test participants were able to locate and use the redesigned section menu.

Overall, the redesign increased the menu's discoverability and usability by 70%, improving navigation across nearly 1,000 pages while preserving consistency within the CFPB's design system.

Final section menu design

100%

of participants in followup usability testing located and used the redesigned section menu

View more work