Designing Around the Stream

Mimic is a platform for running virtual and hybrid events: registration, streams, breakout rooms and live analytics in one place. We designed its web app, its mobile app and the design system behind both. The most interesting problem was that the most important thing on the screen, the stream, is the part the interface has the least control over.

Four sources, one switcher

Mimic's stream switcher handles 4 sources, from Vimeo and YouTube to HLS and MPEG-DASH. Each behaves differently, but the person running the event shouldn't have to care. The controls have to be the same, and the states have to be honest, whichever source is underneath.

It helps to know a bit about what's going on. HLS delivers live and on-demand media over ordinary web servers, with alternate streams at different bit rates, and switches as bandwidth changes. Apple's authoring specification calls for key frames every two seconds and target durations of 6 seconds. MPEG-DASH is the international standard for the same idea.

So video arrives in chunks, and quality moves around. That means a viewer isn't watching at the same moment as the person on stage, and two viewers may not be in step with each other.

Design for the delay

Once you accept that delay exists, some decisions follow. A live poll shouldn't close the moment the host says so, or people behind will miss it. Chat can run ahead of the picture, so it shouldn't spoil a reveal. And a "live" badge should mean live, with a clear state for when the stream drops.

Real states, not just the happy path

An event has more states than a typical app: before doors, waiting room, live, technical break, breakout, replay. The organiser and the attendee see them differently. Each one needs design, and most of all the ones nobody wants to think about, such as when the stream fails with ten thousand people watching.

We designed 13 platform features this way, from registration to breakout rooms.

One system, two apps

A web app for the organiser and a phone app for the attendee have very different jobs. A shared design system stops them feeling like two products. It also lets a small team move quickly, since a new feature starts with parts that already exist.

These days there's a stable way of exchanging that foundation between tools: the Design Tokens Format Module, published as a final Community Group report in October 2025. It treats any object with a $value property as a token. If you're starting a system now, it's worth building on.

Hybrid means two rooms

For hybrid events, there are people in the hall and people at home, and they're at different events. Much of this overlaps with what we've written on real-time shows and on making a keynote everyone can follow, including captions.

The case study has the screens, and our UI/UX design page has more on how we work.