Product study · Interactive

rstew.art / What / NHL Streaming Companion

What × NHL companion

NHL Streaming Companion

A second screen next to the NHL broadcast on NBC Sports. Whiteboard to wireframe to polished UI to live companion, so a fan can work game data while the feed stays on.

Concept

NBC Sports logo

The NHL Streaming Companion is a second-surface product that sits beside the live game. Video owns the left. Live stats, rink maps, player deep-dives, timeline events, highlights, and sponsor units own the right and below. The fan does not leave the broadcast to find the data. The data is laid out as a product they can work.

These plates come from the live examples gallery: whiteboard, wireframe, polished UI, and layout behavior for NBC Sports NHL streaming. The gallery shows that path as slides. This study turns it into a process page you can scrub through.

In one line

Wire the companion like a control room for the fan. Live feed stays primary. Every module around it is a handhold into the game.

Process

The craft is the lifecycle. Each stage has a plate in the gallery. The product only feels inevitable once those plates stack in order.

Grayscale NHL companion wireframe showing video pane, stats sidebar, player card, and highlight row
1 · Wireframe. Zones locked: video, scoreboard, rink map, player card, highlights, ad slots.
High-fidelity NHL companion design modules including rink heat map, gauges, player card, and penalty log
2 · Design modules. Dark UI, team color, gauges, heat map, penalty and play-by-play tabs.
Live Extra NHL companion UI with video, stats sidepanel, timeline, player card, and sponsor units
3 · Live Extra UI. Assembled surface: feed + sidepanel + timeline + player + sponsor chrome.

  1. Whiteboard and wireframe

    Map the companion as zones before polish. Video pane, live scoreboard, rink visualization, player deep-dive, highlight rail, and advert slots are drawn as structure. Density is intentional. The wireframe proves the fan can hold video and data at once.

  2. High-fidelity modules

    Design the pieces as shippable units: stat rings, puck-location rink, period scoreboard, interactive penalty timeline, player card with game vs season tables. Modules can be composed or dismissed without breaking the grid.

  3. Interactive layout strategy

    Walkthrough plates annotate the handholds: jump games from the score ticker, relive moments on the timeline bar, go fullscreen and hide stats, open or close the sidepanel. Interaction is designed as layout behavior, not afterthought chrome.

  4. Live companion surface

    Assemble against real broadcast chrome (NBC Sports / Live Extra / Xfinity). Sponsor units sit in reserved slots (leaderboard, square, highlights presented-by). Playoff bracket and adjacent product surfaces (All Access, search, upsell) extend the same system beyond a single game night.

Client context

NBC Sports · NHL digital streaming

Lifecycle

Whiteboard → wireframe → hi-fi → interactive layout → live UI

Assets

Live from rstew.art examples/nbcs (process + walkthrough + UI)

Gallery source

#example-streaming-companion on the examples page

System diagrams

How the system fits together: design lifecycle, companion layout zones, and how a fan controls the surface.

Pipeline · product lifecycle Whiteboard to live companion pipeline Boxes left to right: Whiteboard, Wireframe, Hi-fi modules, Interactive layout, Live companion, connected by arrows. Whiteboard zone map Wireframe structure lock Hi-fi modules gauges · rink Interactive layout behavior Live Extra companion UI 1 THINK 2 STRUCTURE 3 CRAFT 4 BEHAVIOR 5 SHIP
Whiteboard sets the zones. Wireframe locks them. Hi-fi modules earn the density. Interactive layout teaches the hand. Live Extra is the ship surface.
UX · companion surface architecture Companion surface zones around the live video feed Schematic of header, ad, ticker, video plus sidepanel, timeline, player card, highlights, and sponsor slot. HEADER · NBC Sports / Live Extra / account LEADERBOARD AD SLOT SCORE TICKER · jump to other live games LIVE VIDEO primary surface SIDEPANEL score · rink map stats / PBP / penalty tabs · dismissible EVENT TIMELINE · relive key moments · GO LIVE PLAYER CARD HIGHLIGHTS RAIL AD
Video stays primary. Sidepanel, timeline, player card, and highlights are handholds. Ad slots are reserved structure, not afterthought paste.
Control flow · fan interaction loop Game events feed companion modules and fan controls Live game and data feed into companion modules. Fan actions on ticker, tabs, timeline, and highlights loop back into the surface. Sponsor units sit alongside. Live game broadcast + events Data feed stats · PBP · shots Companion modules assemble Sponsor reserved Ticker jump other live games Panel tabs stats / PBP / box Timeline relive · go live Highlights clip rail FAN ACTIONS UPDATE THE SURFACE · BROADCAST STAYS LIVE Fullscreen can hide stats and cards; GO LIVE returns to the feed.
Game and data assemble the companion. Fan actions (ticker, tabs, timeline, highlights) reshape what sits beside the feed without killing the broadcast.

Working demo

Scrub the process gallery. Same NHL plates as the live examples page, with prev/next, keyboard arrows, drag, and a thumbnail strip.

[interactive · process gallery]

Assets resolve from rstew.art. Interaction mirrors the examples gallery (prev/next + drag), tightened for a study page. Arrow keys work when the gallery is focused.

Prev / Next Drag · horizontal Keys · ← → 12 plates

UX and production

What the fan feels is command of the game without leaving the broadcast. The score ticker jumps to other live NBC games. The timeline relives a goal or a penalty and offers GO LIVE to snap back. Fullscreen hides the companion chrome so the play can own the glass. The sidepanel tabs (stats, play-by-play, penalty box) swap density without relocating the video.

Production has to respect that contract. Zones stay consistent from wireframe to live UI so modules can be designed in parallel. Rink maps, gauges, and player cards share a grid language. Ad slots are drawn into the wireframe as structure, so sponsor units land in reserved real estate (leaderboard, square, highlights presented-by) instead of colliding with the feed.

Tied to production: the interaction only works as well as the layout system. Whiteboard density, module craft, and reserved sponsor slots are the UX. The gallery script is the thin last mile that lets a stakeholder scrub the lifecycle.

Product story

Context: interactive product lifecycle for the NHL digital streaming experience on NBC Sports. The companion sits beside the game so the fan can hold video and data at once. Walkthrough plates teach the handholds. Live Extra screens show the assembled product under real broadcast chrome.

Sponsor presence is grounded in the same plates. Leaderboard and square units sit in reserved slots. Highlights carry a presented-by treatment. Adjacent gallery frames show ad-integration sequences for related sports streaming work. The point is not a banner next to a feed. It is a companion surface where brand real estate is part of the product structure from wireframe forward.

What the product ships
  • A process path from whiteboard to live companion that stakeholders can scrub.
  • Modular data around a primary video surface (score, rink, player, timeline, highlights).
  • Interactive layout behaviors designed as product, not chrome (ticker jump, timeline, fullscreen).
  • Reserved sponsor slots drawn into the wireframe so experiential ad units sit inside the system.

The examples gallery on rstew.art is the source of truth for the plates. This study is the process-forward reading of that gallery: concept, pipeline, diagrams, working scrub, UX, and the product story that ties the lifecycle together.

Story in short: live game on the primary surface, companion modules as handholds, process plates that prove the path from wireframe to ship. Density is the craft. Interaction is the layout. Sponsors sit in reserved structure.

← FrameChanger study