Phoenix Standardized Navigation
The Basics
A new standard was needed across all of the sites running on Phoenix to allow for better consistency as well as a better responsive experience
Examples
Context
Bulky, Outdated Presentation
The navigation patterns between GameSpot, Giant Bomb, and Comic Vine became inconsistent and bloated over the years. Search took up a considerable amount of space and attention despite its relatively low usage from site to site.
Visually, the navigations still retained many treatments that had aged (heavy drop shadows, gradients, text shadows, etc) and needed to be simplified.
Inefficient Responsive Layout
The navigation on mobile displayed the menu elements in a way that only covered most of the viewport, causing a fragmented mode switching experience. In such a small display area, this caused unnecessary visual noise for the user.
Additionally, visual cues for expanding some navigation. elements were not clear for the user as to which hit area is for the parent element and which is the hit area to expand its child elements.
Outcomes
Streamlined, Module-Based Layout
The new standard for navigation across all of the sites contained clearly defined modules: site branding, primary navigation, secondary navigation, and search. Primary elements were for navigating the site and secondary elements were for navigating user-specific interfaces (profile, messages, etc.)
These modules also standardized visual treatments, expanding parent elements, iconography, and typography with the ability to override when stylistically or experientially necessary.
Better Responsive Implementation
The new navigation pattern provided the chance to use the same code across all of the site as well as across all device types. This way, any updated patterns or visual standards could propagate across all of the supported sites at the same time instead of through fragmented templates.
This also provided parity across device types so that the same navigation elements were always available in the same module-driven formats. On mobile, elements were arranged by priority based on ease of reach to tap.