Filter Menu Redesign
Problem
The filters menu was being used across four site pages on the SAMHSA page, yet all were adopting different styling.
Layout, iconography, and overall interface of the component were vastly different from one another, but all functioned similarly, which can lead to user confusion with the menu’s inconsistency page to page.
Moreover, the styling for all of the menus could be improved to align with the more minimal, evolved, and clean branding the site has been moving towards.
Side by Side Comparison of all Filter Menus
Research
Beginning the project with a mobile-first approach, I researched other federal sites to study what menus they adapted for similar pages, specifically dashboards displaying data or resource libraries.
Most federal sites used sticky components for their active filters menus.
Additionally, I looked at some other non-federal sites to study more modern approaches for designing mobile active filters.
These interfaces also typically used sticky filters, but adopted a more minimal layout and style.
Solution
Based on my research, I went with a sticky filters menu containing collapsible accordions for mobile. The sticky filters menu allows the user to access more of the page without having to scroll too much.
Reducing margins and spacing created a more legible interface, with content being better distributed along the screen.
Updated iconography and colors produced a cleaner and more modern aesthetic, enhancing the overall user experience.
If there were more than five facets, the additional facets would be hidden, and then appear once the user taps on “Show more,” maintaining the same functionality as the old design.
I adjusted the focus styling so that it would not cover the entire accordion, and lastly, changed the outdated styling of the active filter tags to a more modern, subtle pill shape.
Desktop Designs
To match the mobile layouts, I had the filter menus utilize the same styling but remain in the left rail, same as the original menu.
Now, all four site pages use the same menu design, with improved styling that is modern and consistent with the recent enhancements made to the site.
