The Athletic: From Second Screen to First Screen
A Platform Concept for The Athletic's Living-Room Moment
Project Details
Role: Staff Product Designer (Concept Project)
Platforms: iOS mobile, Amazon Fire TV / Prime Video
Industry: Sports Media
Scope: Product Strategy · Feature Design · Cross-Platform Systems · Editorial UX · AI-Assisted Prototyping
Status: Concept, not affiliated with The Athletic, The New York Times, or Amazon
The Problem
Sports fans don't watch games on one screen anymore. They watch on two.
The TV has the game. The phone has the reactions. Twitter for the hot takes. Reddit for the deep cuts. The group chat for the people they actually know.
And somewhere in a tab they haven't opened yet, The Athletic — the smartest writing in the room, buried under the noise.
| Surface | Where Fans Are | Where The Athletic Is |
|---|---|---|
| TV broadcast | Watching the game | Not present |
| Live second-screen | Twitter, Reddit, group chat | One tab they haven't opened |
| Post-game | Group chat, highlights apps | Morning column, hours later |
| Between games | Podcasts, YouTube | App launched during commutes |
The Athletic's subscribers already pay for the best sports writing in the business. The product just isn't where they are during a game.
The subscription is built for reading about the game. The fan's attention is on watching the game. That gap is the product opportunity.
The Opportunity
Two things are true right now, at the same time, that weren't true eighteen months ago.
First, Amazon paid eleven billion dollars for NBA rights. The Athletic sits adjacent to Prime Video inside the same content ecosystem. A native Athletic app on Fire TV isn't a speculative product pitch, it's the obvious next move no one has drawn up yet.
Second, the editorial product is more watchable than ever. The Athletic's podcast network is the largest in sports media. Beat writers have become on-camera personalities. The raw materials for a video-forward product already exist.
The question isn't "how do we put The Athletic on TV." The question is what The Athletic becomes when it's the thing you're watching instead of or alongside the broadcast.
Design Decisions
I built two prototypes that, together, stake out the full platform.
Prototype 1 — The Athletic Live (Mobile)
A second-screen experience for the phone, used while the game is on the TV. Four screens.
Live Game Hub — beat writer takes interleaved with play-by-play, each one timestamped to the game clock
Editorial Card Detail — writer analysis anchored to "Q3, 7:42 remaining" so journalism carries the same time signature as the broadcast
Key Moment Timeline — scrub back to the turning point with the writer's context already attached
Post-Game Transition — seamless handoff from live mode to the morning-after column as it's being written
Prototype 2 — The Athletic TV (Prime Video)
A native app inside Prime Video's sports ecosystem. Four screens.
Home — the platform entry point, co-branded with Prime Video, editorially led
The Athletic Broadcast — the writers as the commentary track over the live game
Post-Game Film Session — an 18-minute show that exists the moment the final buzzer sounds
The Athletic Channel — an always-on linear feed of podcasts-as-video, longform reads, and league-specific programming
The mobile build is a feature. The TV build is a platform. Together, they reposition the subscription from something you read to something you watch, listen to, and live inside during game nights.
Writers Over Logos
Every screen across both prototypes prioritizes the writer over the team. Portraits are large. Bylines are readable from across a room. Beat labels carry more visual weight than score graphics.
I considered treating this as a personalization toggle. I cut it.
| Pattern | Why I Considered It | Why I Cut It |
|---|---|---|
| Team-first UI (logos, colors dominant) | Matches broadcast conventions | Makes The Athletic look like every other scores app |
| Personalized by favorite team | Feels "smart," drives engagement | Hides the editorial product behind the commodity product |
| Writer-first across the board | Surfaces the actual subscription value | Picked. |
The Athletic's defensible moat is the journalist, not the matchup. The design has to reflect that everywhere.
One Canonical Game State
Every screen across both prototypes references the same matchup: Lakers vs. Celtics, third quarter, 7:42 remaining, Celtics up 92–87. The Post-Game Film Session shows the same game as the final, Celtics 118, Lakers 109. The writers who appear, Shams Charania, Zach Harper, Jared Weiss, Sam Amick, carry the same beats and byline treatments across every surface.
This isn't craft-for-craft's-sake. It's a demonstration that the eight screens are one product, not eight portfolio slides.
The System
Three patterns carry most of the weight across both prototypes.
Cross-Platform Editorial Voice
Same typography scale, same color system, same writer portrait treatment on both mobile and TV.
Mobile
- Serif headlines Tiempos Headline
- Accent color Burnt orange #D4541E
- Writer portrait 64pt circular
- Timestamp treatment "Q3 · 7:42"
TV
- Serif headlines Tiempos Headline
- Accent color Burnt orange #D4541E
- Writer portrait 96pt circular
- Timestamp treatment "Q3 · 7:42"
A fan who uses both surfaces should recognize the product instantly on either one.
Focus States for the Medium
Mobile is touch. TV is D-pad. I designed the same interactive affordances for both, tuned to their physics.
On mobile, tap targets respect 44pt minimums and haptic feedback signals engagement. On TV, every focusable element scales up 110%, picks up a 2pt accent glow, and adds a subtle elevation shadow — a remote's focus ring made visible from ten feet away.
Same interaction model, two different rendering layers. That's what cross-platform systems design actually looks like.
Editorial Chrome as Product
Loading transitions between major TV sections aren't utility screens, they're branded editorial moments. A near-black backdrop. The Athletic wordmark in serif. A small-caps section label
"THE ATHLETIC BROADCAST"
"FILM SESSION"
"NOW TUNING IN"
A subtle animated element, a drawing line, a spotlight pulse, an audio waveform, that signals what kind of content is about to play.
In premium streaming, the transition is the product. It's where the service announces itself. Each Athletic Original on Prime Video earns its title treatment.
Interaction Design
Two interactions do the heaviest lifting across the TV prototype.
The Athletic Broadcast — Commentary Rail
The live game plays on the left side of the screen. The writers sit on the right, in a vertically scrolling rail of real-time takes, each timestamped to the game clock. Some takes have inline "Film Room" chips that open an annotated breakdown of the play being discussed.
It's Manningcast, but executed with editorial depth instead of celebrity cameos. The writer's voice replaces the network's, and the journalism has the same time signature as the broadcast.
The Post-Game Film Session — Auto-Assembled Show
The final buzzer sounds. Eighteen minutes later, a watchable show exists, headline, byline, annotated chapters, and a "Freshly Assembled · 11 min ago" badge that reinforces what just happened.
This is what a newsroom looks like when its publishing window collapses to zero. The morning column still gets written. But the product already met the fan at the moment the emotion was highest.
The Freshly Assembled indicator is a small visual commitment with large implications. It signals that The Athletic's editorial product isn't catching up to the game — it's assembled and ready the moment the final buzzer sounds.
The Prototype
Eight screens across two platforms. Four on mobile, four on TV. Fully interactive, with scroll behavior, focus states, loading transitions, and a consistent writer identity system running through the whole thing.
Working With Generative Tools
Both prototypes were built in Figma Make across two evenings.
Generative design tools have a consistent failure mode. You prompt a fix, the model's attention narrows, and something unrelated silently regresses. A nav cluster disappears. A label lands on top of a pull quote. A scroll container looks complete but isn't wired.
Across eight screens, I caught and drove through roughly a dozen of these regressions. Some I saw in the moment. Some I only caught by diffing the new screenshot against the previous one.
| Failure Mode | How It Shows Up | How I Handled It |
|---|---|---|
| Silent regression | Fixed element disappears after unrelated prompt | Diff every output against previous version |
| Static-looking scroll | Rail "looks done" but doesn't actually scroll | Test every scroll container before moving on |
| Overflow drift | Nav bar extends past viewport after a fix | Constrain explicitly, re-check after each pass |
| Style drift | Focus states or colors shift between screens | Establish the system on the first screen, reference back |
Generative tools produce screens. Designers produce shipped products. The distinction is everything.
In Closing
Most Staff candidates submit three polished screens of an existing product.
I built a proposal document disguised as a design system, for a moment that's sitting in front of The Athletic right now, whether or not I'm the one who draws it up.
Platform thinking, rendered in the medium the product actually lives in.
The specifics change. The thinking does not.
Project Notes
This is a concept project. The Athletic Live and The Athletic TV are not real products and aren't affiliated with The Athletic, The New York Times, or Amazon. Writer names are used for illustrative realism and don't imply endorsement. Game data is synthetic.
AI tools used:
Claude (Anthropic) for product strategy, case study structuring, and prompt sequencing
Figma Make for UI generation and live prototype publication
Full transparency statement available on request