← Back

standardized site navigation

standardized site navigation

Year

2019

Attribution

Myself
Design Lead
Erica Schoonmaker
Design

Outcome

Tactical Outcomes

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.

Additional Details

Problem Spaces

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.