ESPN - Gamecast

UI/UX

B2C

Web

Mobile

Research

Accessibility

Project Contents

Results

Overview

What is ESPN Gamecast?

The user companion experience for live, past, and future games on ESPN app and web.

Opportunities

Improve the accessibility, consistency, design system, personalization, and betting/Fantasy integrations of ESPN Gamecast. Help users reach their goals more efficiently. Meet business goals including increased video consumption, social engagement, time spent per session, and increased lean-forward interactivity.

My Role

Lead designer on the Gamecast redesign efforts from ideation to research to UI design to release, spanning across all major sports leagues. To improve Gamecast I also revamped the ESPN design system and sports team brand libraries, built entirely in Figma.

Team

Me (Lead Designer), Product Owner, Project Manager, 2nd Designer, Lead Developer, and UX Researcher.

Discovery & Research

I kicked off the project by running a discovery workshop in FigJam with the Product Owner, Product Manager, Lead Developer, and fellow Product Designer. We identified business goals, known user pain points, platform needs, and high-level user testing goals.

I evaluated the existing Gamecast experience across NFL, NBA, NHL, NCAAM and soccer, taking screenshots and then annotating major usability findings between pregame, live, and postgame states.
‍

We also did a competitive analysis of comparable apps' Gamecast experiences and analyzed customer support logs. Major themes were a lack of accessibility, design system inconsistencies, users’ desire for interactivity, integration with Fantasy, and personalization.

Next I collaborated with our UX Research team to identify additional user needs of the existing product. Above shows an overview of our research data points

We outlined the user testing goals and outlined recruitment criteria. I also created realistic tap-through prototypes with motion design in Figma.

The UX Research team conducted moderated user testing through UserTesting.com while I observed and documented the findings.

The summary of findings revealed the users' desire for speed and efficiency, betting integration, and personalization.

From here we split the project into 2 phases: quick win enhancements and large scale improvements.
‍

Design System

Our research revealed inconsistencies between styles, modules, and the assets within them. As part of Phase 1, we updated the components to use ESPN's latest design system, called Prism (used across Disney). The system uses a color ramp for both light and dark mode (shown above), contextually defining when to use each color.

It also pulls from a type ramp with accessible brand fonts that can flex between desktop and mobile breakpoints.
‍

I helped construct the libraries for ESPN branded Prism components such as CTA Buttons, card collections (shown above), navigation, controls, and iconography.

In order to make Gamecast modules more consistent and accessible, I created components specific to ESPN such as Game Headers using Figma variants (see above). Game Headers are the scoreboard headings found at the top Gamecast & feeds and use the Prism design system.

Using the base Game Header component and linking to the ESPN Media Library (see #8 below), I built out content-rich templates for each league. This example shows the scores at the top of Gamecast.

This is another use-case for the Game Header templates, this time for scores at the top of card collections such as the home feed, league feeds, and team feeds across all devices.
‍

Similarly, I created base components for Scorecells, or condensed rows of scores that reside in card collections across many app features & pages. I linked the base components to the team logos (see #8) and sport-specific data to generate template variations for each major league and sport (see image above).

In parallel, I built out the ESPN Media Library (in Figma) composed of team logos & color swatches across the major leagues and 300+ teams. These were used across all of app and web including in Scores and Gamecast.

A primary user pain point was the contrast accessibility of team colors within data viz. In response, I created a flow document to establish logic for our devs to dynamically generate accessible team colors.

I also created team branding accessibility guidelines for our designers, devs, and broadcasting teams. This, combined with the logic tree saved them hundreds of hours because they previous created thumbnail assets manually.

Final UI - Gamecast