Internal research at Warner Bros. Discovery showed a clear pattern: subscribers who spend more time watching content are significantly less likely to churn. The Max video player redesign was built around the strategic belief that, if users can discover and browse content without leaving the player, they'll keep watching. I was brought in to prototype the in-player discovery system that would make that possible.
Challenge
The existing Max player did one thing well: it played video. But once a piece of content ended, or a viewer's attention drifted, the player offered no reason to stay. Users had to exit to the browse experience to find something new.
Internal research framed this as a retention problem. Subscribers who stay in the viewing experience longer are meaningfully less likely to cancel their subscriptions. The redesign was a direct response to that finding: keep viewers in the player, surface discovery within it, and reduce the friction that causes people to disengage.
This is an early figma mockup of the new player UI showing all the UI elements & controls
The challenge was building a discovery layer that worked across four fundamentally different content types, without making the player feel cluttered or overbuilt.
My Role
I prototyped the full player system in React JS, building every feature documented in this case study and more. Working directly with Sergio, the lead UX designer. I translated his visual and interaction designs into working prototypes, and that process of building often surfaced details that needed to be defined more precisely together. I also collaborated closely with the UX research team, who provided the use case outlines and task frameworks that informed what we built and what we ultimately put in front of users.
Designing for Scale: Content Type Lenses
One of the core challenges was designing a single player system that could adapt gracefully across four distinct content types. The solution was a set of content-specific lenses: UI configurations that share a common interaction model but surface the right metadata and controls for each context.
Movies
Clean and minimal. Movie title with standard player controls. The simplest version of the player, designed to get out of the way.
Series
Episode browsing built directly into the player. Metadata includes show title, episode number, season number, and episode title, giving viewers the context they need without leaving the stream.
Live Sports
The most complex lens. A live indicator, event title, and broadcaster details sit alongside controls for jumping back to live, exploring key moments, switching camera angles, and browsing other live sports events.
Channels
Live indicator, current content title, and controls for browsing other channels and returning to the live point.
Feature Deep Dive: Key Moments
Key Moments was one of the most technically involved features I prototyped. For live sports, it gives viewers the ability to jump directly to specific plays within a stream, without scrubbing through footage.
The feature required building new tile types within the existing L2 content tray. I designed the tile layout and generated mock game data sourced from CBS Sports to give the prototype realistic, testable content. Getting the interaction details right required careful attention to a few things that aren't immediately obvious:
Initial focus lands on the last tile, keeping the viewer oriented at the most recent moment in the timeline
The focused tile centers within the tray for visual balance
The tray transitions back to its standard position gracefully when scrolled away from the last tile, preserving the peeking behavior that signals more content exists
What user testing surfaced:
Two issues came out of testing that changed the design direction.
💡
Iconography - The icons used in Key Moments tiles were sometimes unclear, though acceptable for a prototype. Research suggested using an image of the key moment instead of an icon.
💡
Times - The numbers on Key Moments reflected broadcast timing, which initially confused users. Participants suggested using the sport's period and time for clarity, e.g. 2nd 5:51.
Research Findings
Two interaction questions shaped final design recommendations through testing.
Up & Down Navigation
Early designs used a dedicated DOWN key press to trigger in-player content discovery. In testing, this led to mis-clicks and frustration: users conflicted the discovery interaction with normal player navigation. Updating the model to use UP/DOWN for player controls and a secondary DOWN press for discovery resolved the issue entirely. Discovery became a natural extension of the player rather than a separate mode.
❌
A dedicated DOWN-only key press for discovery led to mis-clicks and frustration.
❌
When updated to UP & DOWN for player controls, and a secondary DOWN for in-player discovery, these issues were eliminated, and in-player discovery was not felt as an extra click.
Fade Timing
Getting the fade-out duration for player controls right turned out to be more nuanced than expected. Three durations were evaluated:
4 seconds: Not enough time for users to understand the new content categories being introduced.
8 seconds: Felt just right for an unfamiliar experience.
✅
Recommend launching with 6 seconds, with the option to test and tune post-launch.
Learnings
Working at WBD's scale reinforced a few things I'll bring into every project.
Interaction conventions are invisible until you break them. The navigation model felt intuitive in design reviews, but testing revealed that small deviations from expected patterns (even in a TV remote context most users already understand) created real friction. Validating interaction conventions early, not just visual design, matters as much as the design itself.
Designing for multiple content types means designing a system, not screens. The four content lenses pushed me to think about shared component logic, adaptable metadata layers, and interaction patterns that could flex without fragmenting. The React architecture had to match the design system thinking, and aligning those two things was an ongoing design challenge.
Realistic mock data changes how people respond to a prototype. Creating Key Moments tiles with real CBS Sports game data produced much more useful testing feedback than placeholder text would have. The data you use in a prototype isn't filler; it shapes the quality of feedback you can collect.