Keeping the big games on the air

Verizon Media ran the video infrastructure behind a lot of live TV on the internet — the part that takes a broadcaster’s feed from a stadium, slices it into streamable chunks, stitches in ads, enforces blackout rules, and pushes it through a CDN to millions of devices.

The people running those streams (broadcast operators, NOC engineers, customers’ own teams) lived in our tools. And those tools had grown the way platform tools usually do: one urgent feature at a time, across several products and acquisitions, with a legacy version of almost everything still running next to the new one.

During a big game, that’s not a cosmetic problem. If an operator can’t tell in a glance which slicer is failing, whether viewers are actually seeing a slate, or what will happen when they click “activate backup,” the cost is measured in minutes of dead air.

I worked across multiple streaming product teams at once, inside a large design organization (roughly 140 designers across Verizon Media), and routinely traveled across the US to work in person with teams in different offices. My role flexed with the job: on some projects I was the designer, on others the developer, often both — how much I coded and how big the team was depended on the task and the deadline. That meant I was in the same conversations as the engineers who owned the slicer, manifest and CMS services, not handing files over a wall.

Every screen in this story is a view onto some part of the pipeline below. Getting this model straight — with the engineers, not just for them — is what made the UI decisions easier. When someone asked for “a red dot when something’s wrong,” we could ask: wrong where? At the slicer, in the manifest, at the CDN, or for the viewer?

For slicer monitoring, I worked with engineering to map every state a slicer and its management tasks could be in, and how those states rolled up to what a human needed to see. That map became the contract between the backend events and the UI.

Because I was also writing front-end code, “handoff” was more of a conversation than an event. A few things that made it work:

• Shared components, not redlines. I contributed to Bindable, our Aurelia design system — table styles, pill variants, loading states — so designs and code used the same building blocks. (More on Bindable.)
• Specs where the work lives. Tickets carried the reasoning and a clickable prototype, so engineers could see the intent, not just the pixels.
• Designing the unhappy paths. Unavailable thumbnails, failed connections, “you’re not authorized to operate this event,” read-only states for rulesets you don’t own. In ops tools, the edge cases are the product.
• Meeting operators where they already were. Alerts went to Slack as well as the UI, with allowed-watcher permissions so customers could let partners watch their slicers.

Watch Together, in two weeks

In 2020 Yahoo was launching Watch Together for the NFL season. COVID lockdowns meant commentators and hosts might be stuck at home at a moment’s notice, so the platform needed an operator tool to create watch-party groups, connect them to scheduled or live events, and add or remove hosts and commentators on the fly. I designed the Watch Together Operations Manager in a two-week design window with engineers and PMs from our manifest, slicer and CMS teams, Yahoo Sports, technical account managers for the NFL and Fox Sports, and Phenix, the real-time streaming partner.

Watch Together launched in the Yahoo Sports app in September 2020: one person could invite up to three friends into a split-screen video call while everyone streamed the same live NFL feed. The Operations Manager was the tool behind it that let operators run those groups, hosts and events live.

These tools ran underneath live events for partners like Disney, ESPN and Discovery — including the Super Bowl and the NBA Finals — for audiences in the millions. The platform itself was built for that scale: Verizon Media publicly reported serving a single client more than a million simultaneous viewers at streaming peaks, and a test milestone of 10 million concurrent viewers in 4K HDR. The work replaced a patchwork of legacy screens with a more consistent set of tools: health defined by configurable rules instead of guesswork, alarms that read at a glance, safer failover and deletion, and one component library shared by design and engineering.

The way we worked got noticed, too — working across teams quickly and well, shifting between design and development as each deadline needed.