Working closely with the project’s art director, I developed a vast menu system that would accommodate the organization’s various needs.
This project required three different designs to support the extensive list of menu and submenu items: desktop hovered, inner-page revealed and mobile.
We launched with a hovered design that featured the submenu items in a single row, much like the inner page reveal design. We found that maintaining the active state of the submenu was inaccessible for some users given the small amount of vertical real estate it occupied.
We opted for a dropdown menu design that made submenu items much more accessible.
We created a revealed inner-page submenu that is distinct from top-level menu items, and that does not interfere with other page content.
It was necessary to have a different design for mobile navigation. Inspired by popular app design, we decided to use a fixed footer bar for top-level menu items.