Paramount • 2022–Present

Unified CTV experience

Unified CTV experience

Role

Sr. Product Designer

Team

1 Design Director

Cross-functional engineering & product partners

Skills

Design Systems

Product Design

Cross-platform Strategy

Visual Design

Tools

Figma

Overview

One platform, two CBS properties

CBS Sports and CBS News had been growing in parallel for years, which meant two separate CTV codebases, two component libraries, two sets of navigation patterns, and two teams rebuilding the same components every time a feature needed to ship. The unified CTV experience addresses that by bringing both apps onto a single scalable codebase with one shared design system underneath. I owned the full product design track across UX, prototyping, QA during build, and rollout, partnering with engineering on weekly spec reviews. The Design Director served as the approval layer rather than as a co-designer.

The challenge

Two apps, two libraries, twice the work

Anything new had to be designed twice, and both implementations had to stay consistent without a shared source of truth. Quality was difficult to maintain, velocity was slow, and there was no real foundation to build on. We aligned on three goals before producing visual design.

Business goals

Eliminate the two-codebase, two-library overhead. Design once, ship everywhere, and stop duplicating the same component work across two teams.

Brand goals

Allow CBS Sports and CBS News to remain distinctly themselves while sharing one foundation. Tokenized theming on top of shared components, instead of divergent components without a shared base.

Product goals

A single system that scales across Roku, Apple TV, Fire TV, Android TV, and Smart TVs without per-platform reinvention, with a focus model that holds up on every remote.

Mapping the surface area

Auditing two apps, side by side

Before any system work, we needed a clear read on what we actually had. I partnered with engineering to map both CTV apps side by side and step through every primary screen, tagging where the two surfaces did the same thing differently, where they legitimately needed to differ for live-sports versus editorial reasons, and where divergence was simply historical drift. That last category was larger than anticipated, and it was the first piece of evidence that one shared codebase and one shared system was the right approach.

Unified information architecture mapping CBS Sports and CBS News surfaces side by side, with shared structure across both apps.

Building the system

A shared foundation, codified once

With the audit complete, we broke the work into the layers both properties needed and wrote rules for each layer. A component was only adopted if it worked for Sports and News without a fork, matched remote behavior on Roku, Apple TV, Fire TV, Android TV, and Smart TVs, and removed duplicate engineering work instead of creating more of it.

Shared CTV side navigation and primary nav patterns applied to Sports and News.

Shared navigation

Side nav and primary nav patterns codified once and adopted by both apps. Sports orders its destinations differently than News, but the structure, the focus rules, and the way the rail responds to the remote are shared. Two apps, one navigation model.

Shared CTV video player frame with transport, metadata, and controls.

Shared video player frame

One playback shell for all video. Sports loads it for live games and highlights, News loads it for live coverage and clips, and theming sits on top rather than forking the player into two implementations.

Shared content rail family with rows, cards, padding, and focus rules.

Shared content rails

Rows, cards, padding, and focus behavior all live in one rail family. Rails are the spine of the home experience on a CTV, so codifying them once meant every new row type (discovery, ranking, branded, player) inherits the same skeleton instead of starting from zero.

Codified focus and selection states across tiles, rows, and overlays.

Focus and selection states

A codified interaction and focus model for remote-driven devices. We documented how a tile lifts, how a row remembers where the user came from, how attention moves between containers, and how the back button behaves at every depth. Both apps inherit the same model, so the system feels predictable across any remote a viewer is using.

Tokenized theming applied to the same shell components across Sports and News.

Tokenized theming

A theming layer that allows Sports to feel like Sports and News to feel like News while sharing one shell. Semantic tokens (surface, accent, text emphasis, type ramp, spacing, focus) live in Figma variables as the single source of truth and are exported through a custom transform that emits each platform's native theming primitives: a custom BrightScript theme layer on Roku, SwiftUI color and typography tokens on Apple TV, resource values on Fire TV and Android TV, and CSS variables on Smart TVs. The semantic contract is shared across all five renderers; the host language is what adapts. That distinction matters on a remote-driven device, because it lets a token like surface/primary or focus/halo carry the same intent on every platform without forcing Roku and tvOS to pretend they have the same primitives. Adding a new brand later means a new token set, not a new component library.

Same section grammar applied across CBS News and CBS Sports.

Cross-brand sections

The same section grammar codified once and adopted by both properties. News surfaces editorial-leaning sections, Sports surfaces game-leaning ones, but the underlying section types are shared so a new section rolls out to both apps in one pass rather than being rebuilt twice.

Before-and-after view of card components, consolidated from per-app variants into a shared set.

Card components, before and after

A before-and-after look at the card layer. The two apps had been maintaining their own card variants for the same content types; the new system consolidates those into one set of components that both apps render identically underneath.

1 / 7

Visual showcase

Cross-brand features on top of the platform

After the kit was live, I led the first cross-brand features built on top of it, which is where the rails, player shell, and focus model are validated against real roadmaps. Each of these shipped on Roku, Apple TV, Fire TV, and Android TV in the same release window, which is the point of sharing a codebase, library, and focus spec.

CBS Sports CTV home built on the shared shell, themed for live game energy.

CBS Sports home

The Sports landing built from the shared shell, themed for live game energy. The components are identical to those running on News; the rail order, the artwork rules, and the hero behavior are what make it feel like Sports.

CBS News CTV home using the same shell, themed for editorial reading.

CBS News home

Same shell, same focus model, tuned for editorial. The hero gives space to the lead story, the rails lean on segments and shows rather than games, and the chrome remains out of the reader's way.

Top 10 Ranking Row with rank numerals tuned for 10-foot legibility.

Top 10 Ranking Row

A ranking-aware row legible at a distance, with numerals tuned for 10-foot legibility and focus behavior inherited from the shared rail spec. Built once and available to both Sports and News with no per-app rebuild.

Branded Rows for UFC, Masters, and Champions League built on the shared rail family.

Branded Rows

Branded row variants for partners such as UFC, Masters, and Champions League. Each treatment lives inside the rail family, so partner branding can come through cleanly without breaking the focus model or requiring engineering to build a one-off layout.

Tournaments hub for Masters and Champions League built on the shared rail family.

Tournaments hub

Tournament-aware hub layouts for partners like Masters and Champions League, sharing the same rail family and focus rules as the rest of the home experience. The branded chrome is theming; the structure is system, so each tournament reads as distinct without forking the underlying components.

Live Stream enhancements with richer metadata and tighter player integration.

Live Stream enhancements

Upgrades to the live stream experience with richer metadata, clearer state, and tighter integration with the shared player frame. The same enhancements ship for live games on Sports and live coverage on News because both apps load the same player underneath.

Same feature deployed simultaneously across Roku, Apple TV, Fire TV, and Android TV.

Multi-platform parity

One feature, every device. Roku, Apple TV, Fire TV, and Android TV ship the same release at the same time because the shared codebase, component library, and focus model handle the underlying work. That parity is the platform's core value.

1 / 7

Reflection

What changed when the codebase did

Color and layout shifted, but the more meaningful change was what we discussed in critique. Previously, significant cycles went to reconciling two CTV dialects and maintaining two builds of the same card. Afterward, we were free to focus on the living room experience: how a live read should land from across a room, where focus rests on cold start, when a row feels resolved at ten feet. Owning that rollout stretched me across systems work, prototyping, QA, and engineering handoff in a single thread, and that's what I take away from this project.

Outcomes

What the shared platform made possible

/01

1 codebase

Both CBS Sports and CBS News CTV apps now run on a single scalable platform, ending the parallel rebuild cycle that was burdening every release.

/02

5 platforms

Roku, Apple TV, Fire TV, Android TV, and Smart TVs sharing one component library, one focus model, and one theming layer.

/03

Ship once

Cross-brand features (Video Discovery Row, Top 10 Ranking Row, Branded Rows, Player Discovery Row, and Live Stream upgrades) deployed across every device simultaneously instead of being rebuilt per-app.