Sean Madrid's Logo

State Parks Site Menu

GOAL

A multi-tier navigation system for the Montgomery County Parks Organization that is responsive and drives a wide range of conversions

Working closely with the project’s art director, I developed a vast menu system that would accommodate the organization’s various needs.

OBSTACLES

Maintaining a clean design, for mobile and desktop, that displays three tiers of menu items while resolving the need to display submenu items, as a default, on inner pages

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.

SUCCESSES

Comprehensive site navigation with a clear hierarchy that indicates the user’s current location and provokes exploration

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.

In order to save real estate, it was necessary to conceal the menu behind a hamburger icon in a fixed footer navigation feature.

Clicking the hamburger would reveal the full menu.

Clicking a top-level menu item would reveal submenu items, while always maintaining a quick path to the previous screen.