Improving mobile navigation
Visitors to consumerfinance.gov were overlooking a key navigation component that appears on more than 1,000 pages and is sometimes the only way for users to navigate to a page’s sibling or child pages.
My team redesigned, tested, and launched a modified section menu. Followup usability testing revealed that 100 percent of test participants were able to locate and use the modified section menu—an increase from only 30 percent of participants successfully using the section menu’s previous design.
My role
Design: I reviewed existing research and metrics, performed a competitor analysis, researched best practices, collaborated with a junior designer to redesign the menu, ensured WCAG compliance, and worked closely with a developer to translate the design into code.
Research: I articulated research goals, wrote tasks, shepherded the testing plan through the CFPB’s research approval process, handled all coordination and test setup, conducted testing, synthesized findings, presented results, and made design recommendations.
1.
Review existing data and research
During routine 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 on consumerfinance.gov that contained the section menu further affirmed low engagement.
2.
Redesign the section menu
To get started, we consulted mobile navigation best practices and performed a competitor analysis to see how other government agencies and organizations were handling section navigation.
We sketched menu alterations, focusing on small design changes such as the menu’s wording, color, and icon. We considered ways to make the menu stand apart from in-page components and fit seamlessly with other navigation components.
In addition to the section menu design, we experimented with truncating the breadcrumb to shorten its footprint and free up top-of-page screen space.
Collaborating with a junior designer, I designed modified section menus in Figma.
Our first prototype included a truncated breadcrumb.
3.
Conduct usability testing
I ran an unmoderated usability test to evaluate the discoverability, design, and interaction of our modified section menu design and truncated breadcrumb. In reviewing test session videos, I saw that participants interacted successfully with the modified section menu, but they struggled to see and interact with the truncated breadcrumb.
We decided to un-truncate the breadcrumb—keeping the modified section menu design in place—and rerun the test, which showed a significant increase in participants’ discovery and use of the breadcrumb.
I created a research plan and wrote tasks.
4.
Launch and follow up
Following usability testing, we launched the modified section menu. Several months after launch, we used Mouseflow to observe visitors to a consumerfinance.gov high-trafficked page opening and using the modified section menu to navigate.
In addition, routine usability testing of the site’s high priority components revealed that 100 percent of test participants were able to locate and use the modified section menu. In this same usability task conducted in a previous routine usability test, only 30 participants were successfully able to complete the task using the previous section menu design.
The section menu appears on more than 1,000 pages on the site.
