Sr. Product Designer
1 Design Director
Cross-functional engineering & product partners
Design Systems
Product Design
Cross-platform Strategy
Visual Design
Figma
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.
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.
Eliminate the two-codebase, two-library overhead. Design once, ship everywhere, and stop duplicating the same component work across two teams.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
Roku, Apple TV, Fire TV, Android TV, and Smart TVs sharing one component library, one focus model, and one theming layer.
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.