Designing for a host you don’t control: graphics inside the newsroom
The Viz Flowics plugin lets journalists add live graphics to a story without leaving their newsroom system. It runs inside nine different hosts, each with its own space, rules and quirks.
Context
In a TV newsroom, journalists write each story in a newsroom system (NRCS) such as Dina, iNews or ENPS. MOS is the protocol that lets graphics tools plug into it, so a graphic travels with its story into the rundown and plays out in order on air. Viz Flowics, a cloud HTML5 graphics platform, launched its MOS integration in August 2023.
Role
Senior Product Designer. Engineering shipped a first version adapted from our Rundown Control; design came in after that. I owned navigation and controls, the layout across hosts, empty and error states, and a second-phase concept. Reviewed with the Lead Designer and CTO, built with one developer.
The problem
A guest with no say over its space.
A plugin is a supporting actor: it gets whatever panel the newsroom system gives it. That meant a narrow vertical column in Dina, a roughly square panel in Blaze, a short wide strip in Ross Inception and AP ENPS, and close to half the screen in Octopus.
Each host also behaves differently. iNews lets you drag items into a story; others don’t. Some iNews installations failed to open items until the plugin was restarted, a bug outside our code that we still had to deal with.
On top of that, Flowics had no template layer. Graphics are organized as Project → Graphics package → Overlay. To offer variations, designers built each one in the graphics editor, which made packages heavier and turned every new variation into a request to design.
Decision 1
Map the model before touching screens.
I first mapped how Flowics graphics are structured and how a graphic travels from the plugin into a story: pick a package, pick an overlay, use it as a template, fill it in, add it to the story. Adding it creates a MOS item in the newsroom system that points to a hidden instance in Flowics. Every later decision built on this map.
Decision 2
One layout that adapts to every host.
Instead of a version per host, the plugin has two blocks, fields and preview, that sit side by side and stack vertically when the panel gets narrow. Type size, spacing and how much each row shows were set for the smallest case.
Decision 3
Empty states that say what to do next.
A journalist on deadline shouldn’t have to guess why a list is empty. I separated three cases, each with its own message: the package has no overlays, the search found nothing, or an admin limited the list to certain tags, in which case the message says who can change it.
Decision 4
Use what each host offers.
iNews supports dragging items into a story, so there the plugin turns a finished graphic into a drag item: fields lock, the item shows the graphic’s name, the cursor changes, and a Back button returns to editing.
Decision 5
Prevent the error instead of explaining it.
On some iNews installations, items wouldn’t open until the plugin was restarted. The first option was a warning at startup explaining the issue and the fix. It was simple, but it asked people to remember a failure and recognize it when it happened.
We went with the second option: make the restart part of signing in. After a successful login, one screen asks the user to close and reopen the plugin. It adds a step but avoids the error altogether. I wrote and compared several versions of the copy so it would read as the last step of login, not as a workaround.
Decision 6 · Phase 2
Turn overlays into templates without rebuilding the platform.
A real template layer would have meant reworking how graphics are created, which touches most of the product. Instead I proposed instances: saved, customized versions of an overlay that can be added to a story, kept for later, or used as the base for new ones. Customization moves from the graphics editor to the moment the journalist adds the graphic, so designers stop building variants and packages stay lighter.
Each instance carries an auto-generated name, last update, author, where it’s used and a star, so people can find their own work and their team’s.
The outcome
In newsrooms since 2023. Instances still on the shelf.
The plugin has been in production since August 2023, built because customers needed it, and it supports nine newsroom systems: AP ENPS, Arion, Avid iNews, Blaze, Dalet, Dina, Octopus, OpenMedia and Ross Inception.
Instances were approved in design but didn’t fit development capacity. If they ship, I’d measure success by fewer overlay variants per package, fewer variation requests to designers, and the share of graphics added from a saved instance.