OTT Sports Cards
Timeline
1 year 3 months
Team
Malvika Nanda
Yun Easing
Riya Ghosh
Role
Product Designer
Skills
Design Systems
Component Architecture
Product Strategy
Tools
Figma
Photoshop
GM3 Design System
Context
When YouTube Sports expanded its OTT content, the design problem wasn't "what should a sports card look like." It was messier than that: how do you design for sports data when every sport tracks completely different things?
An NFL live score, a Golf leaderboard, a Hockey game tracker, and a Fantasy league matchup share almost no structural DNA. The system had to handle them all — and end up as a single, live product at tv.youtube.com/welcome — without a separate design file for each sport.
What If A Single Component Library Could Handle NFL Scores, Golf Leaderboards, And A Paid Fantasy League — Without Rebuilding Any Card From Scratch?
Initial Observation
I came into this project expecting a visual design problem and found a taxonomy problem. Every sport has its own vocabulary — NFL has yards and red zone conversions, cricket has run rates and DLS targets, F1 has gap-to-leader and pit stop strategy. Before designing anything, I needed to understand what each sport was actually asking the interface to communicate.
When I audited the existing cards, the pattern was predictable in hindsight: designers had been building sport-by-sport with no shared molecule layer. A live score card for NFL and a live score card for NBA were essentially the same component, built twice by different people at different times. A layout change in one had never carried over to the other.
Pain Points
No shared structure
Cards were built per sport from scratch. There was no molecule layer, so a layout fix in one card had to be manually replicated in others. Two designers could be working on visually identical components without knowing it.
Two platforms, double the work
YouTube TV (YTV) and [PTC] had different display constraints. The approach at the time was separate designs per platform, which meant every card decision got made twice.
Brand and UX Inconsistency
The lack of a system meant there was no single source of truth for the user experience. A score card for the NFL might behave slightly differently than one for Baseball, creating a fragmented and unpredictable user journey.
Key Insight
The repeating elements across sports were always the same handful of things — a score, a team name, a player image, a stat, a timestamp, a status indicator. Everything else was variation on those six.
Becoming The Fan
I watched a lot of sport before designing. Not as a research exercise — I genuinely wanted to understand what matters moment to moment. Watching Soccer games while paying attention to how I was using score graphics on a second screen taught me things I wouldn't have found in a brief. The main one: good sports graphics know where you are in the game. Bad ones show you everything regardless.
Exploration
We spent the first two weeks auditing the existing cards across all sports: mapping every element, identifying which variations were meaningful (different sports, different data) versus accidental (two designers solving the same problem independently).
That audit produced the molecule candidate list. Any element that could be abstracted without losing its meaning became a molecule. Each molecule was then built as a robust, variant-driven component in Figma.
Outcome
From Architecture to Production: A Live Design System Powering YouTube Sports.
The result is not a theoretical library, but a living, breathing design system currently in production on YouTube TV Sports. I delivered an ecosystem of 500+ production-ready components, architected to handle the unique data structures of Golf, Hockey, Baseball, Basketball, and the NFL, including the specialized data modules for the paid Fantasy platform.
This system was built from the ground up to be fully responsive and theme-aware, providing a consistent and polished user experience across all supported viewports and modes.
500+ Components, From Architecture To Production: A Live Design System Powering YouTube Sports.
Reflection
Design systems work is mostly invisible. The 500+ components, the handoff matrix, the usage guidelines — none of that is what a viewer on YouTube ever sees. What they see is the landing page, the score cards, the live game ticker. The system exists entirely to make those things consistent and maintainable.