Overview

YOUTUBE SPORTS

Design System Synthesis
Standardization & Scalability
Enhanced Workflows
Library and File Optimization

LEAD DESIGNER

Deloitte Digital x YouTube
2024-2025

CHALLENGE

YouTube provides subscription-based live sports programming such as NFL Sunday TIcket on two separate products YouTube TV and the YouTube Main App. Although providing the same service, these are two discrete products with their own design and engineering teams. Over time, these separate teams diverged in their design systems and workflows. As plans to expand YouTube Sports developed, the need to synthesize the processes, systems and libraries according to YouTube Foundations standards was required to improve efficiency, cohesiveness, and scalability across all channels and future sports.

SOLUTION

Audit current systems, design files and libraries; find deltas; standardize, ideate and create components for utlimate scalability across all sports, platforms and devices.

SPORTS CARDS COMPLETED

DESIGN SYSTEM SYNTHESIS

As divergences grew between two different design teams, things such as Figma libraries, components, typography, and color systems began to diverge as well. This essentially doubled the amount of work and resources needed to design and engineer new features for sports cards. This wasn’t a simple logistical challenge, however, as sports—and its statistics, in-game data, etc.—was its own growing subset or ecosystem which the main YouTube design system wasn’t necessarily designed for. This required a cross-collaborative effort to adhere to a single source of truth while creating a unified workflow for future creativity, scalability and evolution.

Team MANAGEMENT

The complexity of this network was further exacerbated working in an external design and consultancy team for Deloitte Digital Experience Design with most of our designers in India. As the Lead U.S.-based Designer, I was the main design point-of-contact between YouTube’s various internal teams and managed tasks for our India-based designers where a large bulk of the design work was executed. With hundreds of micro-elements in flux, this required great planning and day-to-day agility.

FINDING DELTAS AND SCALING

Beyond synthesizing foundational elements such as typography and color, auditing existing components would give us an idea of what was easily scalable and what wasn’t. We started with the most extensively designed sports cards from the NFL (or football) as our baseline and then scaled those across the other sports when possible.

1. LIVE SCORE BY PERIOD

*Simpler adjustments to the number of columns accounted for the differences in each sports time-period*

2. Player Highlight + Total Stats Card

The format here stayed the same. Only research in best-practices for most relevant statistics per sport was needed.

3. Score Card

FINDING ANOMALIES & IDEATING

Not every card scaled so easily. While score cards for team sports such as football, soccer and hockey required relatively simple adjustments to score columns, other individual sports like golf needed a completely new card format. Research, ideation, and iteration were necessary.

FANTASY FOR ALL

A WHOLE OTHER SUBSET

Linking a user’s fantasy account is a critical feature for YouTube Sports. Translating external fantasy products into the YouTube design ecosystem meant recycling elements from YouTube foundational atoms as much as possible. New elements such as sports-related icons or badges were sometimes necessary.

SPORTS-AGNOSTIC DESIGN

Although most of our work was for NFL Fantasy Football, we had to keep in mind how designs might scale to other sports such as Fantasy Soccer, Basketball, etc.

Matrices FOR COMPREHSIVE INVENTORY

🔴 Red pill: since there were two separate design teams for YouTube TV and the main YouTube app, design files were organized very differently. It was difficult to find specific components without guidance from a team’s respective designers. We created matrices organized by parent components, specific sports, card/statistics types, and atoms which were discoverable in a single Figma space—all linked to the proper foundational and local libraries. This meant less time trying to find things, and changes made at the component level were global, significantly reducing time wasted.

🔵 A happier simulation was created for everyone including designers, engineers, product managers, et al. Below are just small snippets from a much larger but well-ordered matrix.

Variant Architecutre

Efficiency was integrated at the component-level as well. Variant options within cards allow for designers to easily change elements within cards for both rapid mock-up’s and final delivery.

EASILY SWITCH FROM Light TO Dark Mode

Easy Figma options to change color modes according to pre-defined color system

EASILY CHANGE SPORT, PLATFORM, BREAKPOINT/SIZE, AND MORE

Figma options to flip through sports, platform, breakpoints, card states and other options

FIGMA Nerds will understand

To change player images, team and league logos, we set PNG images as pre-set color styles for rapid mock-up capability. Additionally, using player images with transparent backgrounds allowed us to change the background team color behind the portraits conveniently. This not only helps the engineering team write great code but also makes the images future-proof in case the player changes teams, which they often do.

Scalability for a global audience

For each quarterly centerpiece campaign, there could be anywhere between 18,000-20,000 total design pieces to output—much of this due to localizing copy for over 11 countries, languages, and currencies. After understanding all pain points and empathizing with members across teams such as brand, marketing, copy, translation, and production, I acted as the lead designer in designing Udemy’s new display ad formats. While achieving the new desired brand look, the scalability of these design systems vastly improved production efficiency, reduced time spent, and helped inform design in other channels such as automated social media ads.