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 to navigate to a page’s sibling or child pages. My team redesigned the menu, with followup testing revealed that 100 percent of participants were able to locate and use the modified menu—an increase from only 30 percent successfully using the menu’s previous design.
My contributions
UI/UX design
I reviewed existing research and metrics, performed a competitive analysis, researched best practices, collaborated with a junior designer to redesign and reword the menu, ensured WCAG compliance, and worked closely with a developer to translate the design into code.
User research
I articulated research goals, wrote tasks, shepherded the testing plan through the 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 performed a competitive analysis then sketched menu alterations, focusing on small design changes such as the 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.
My team’s junior designer and I prototyped modified section menus. We chose one design to usability test.
Our 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 for an unmoderated usability test.
4.
Launch and follow up
Following usability testing, we launched the modified section menu. Several months after launch, we used Mouseflow to observe visitors opening and using the 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.
I worked closely with a developer to translate the design into code and launch the modified section menu.
View more work
