Navigation Standardization

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
šŸ’¬ This contains abbreviated details of the full project. If you'd like to talk more deeply about UXĀ projects, feel free to reach out directly.

Problem Spaces

Bulky, Outdated Presentation

The layout for the navigation across the sites supported by Phoenix was tall, clunky, and difficult to work with as links and sections would ebb and flow due to iterative changes in each sites' structures.

Inefficient Responsive Layout

The responsive layout for the navigation would often break down from breakpoint to breakpoint and was a challenge to retain a reasonable level of consistency between layouts for each device type.

Original Navigation Layouts

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.

Redesigned Navigation

Streamlined, Module-Based Layout

The new standard for navigation across all of the sites contained clearly defined 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.