Global Navigation and Filters

This project was a redesign of the navigation for ESPN streaming platforms. The objective was to decrease time spent looking for content get users to watch faster. I worked in collaboration with Design, Product, and Engineering leaders to organize, present, and iterate designs, ensuring they met business goals and were consistent with ESPN's current design system.

Client

ESPN

Services

Product Design

Industries

TV & Streaming

Date

July 2022

Project Links

01 • Background

02 • Previous Design

03 • Pattern Audit

04 • Nav Structure

05 • Personalization

06 • Wireframes

07 • Exploration

08 • Components

09 • Design System

10 • UI Iterations

11 • Prototypes

12 • Results

Background

Next: Previous Design

Previous Design

Next: Pattern Audit

Pattern Audit

We decided to explore existing navigations from our existing platforms, and gathered what we thought would be successful. Using pills in a subnav on mobile was a potential pattern we could adopt on other platforms.

Next: Filters

Filters

We looked at our mobile filters to get inspiration for how to categorize our content into an explore bar for our navigation.

Next: Nav Structure

Nav Structure

Next we redefined the top level categories and content rows for 'Watch' on the ESPN app. We replaced 'Featured' with 'For You' and focused on personalizing the quick menu by section and Live content. We translated this strategy across connected devices as well.

Next: Personalization

High-level Site Map

Categories

We began thinking of how quick filters are organized on the high-level category pages and how to personalize the experience. We established evergreen content such as Live events would be the focus. Shows, sports leagues, and seasonal events would also be highlighted for users who frequently view or follow specific sports and leagues.

Next: Wireframes

Wireframes

I created rough wireframes with the nav on the left and quick categories on the top row of content.

Next: Exploration

Exploration

We explored several concepts for quick categories, and developed different concepts. The tiles concept well recieved by our stakeholders for users to navigate through subcategories on various screens.

Next: Components

Pills Concept

Quick Tiles Concept

Components

Next we created the button components needed with resting and selection states. I also started exploring more ways of using sports leagues and show artwork for the hover states and eventaully led to using the artwork on the hover background, similar to Disney+.

Next: Iterations

Iterations

Next: Design System

Category Selected

HIgh-Fidelity UI

Design System

I used a template from our design system as the foundation for the design. I added in the Nav links from our navigation, and filled in the icons for each from our icon library.

Next: Prototypes

Final Navigation

Prototypes

We prototyped the Global Nav and Quick Filters on the main sections. This helped establish the flow for navigating categories and subcategories. This prototype focused on the various states of the vertical nav, and filter buttons.

Next: Results