OTT · operations

G4TV Video Command Center

A command center for OTT content and advertising operations—dashboards, catalogues, video assets, metadata, and ingest / distribution monitoring. I contributed UX, interface design, and frontend work in Figma, HTML/CSS/JavaScript, collaborating with engineering.

Conceptual G4TV Video Command Center illustration with operations dashboard, recent content, ingest progress, and needs-attention alerts. View full size
Command-center cover—conceptual interface illustration, not a shipped product screenshot.

Challenge

OTT operations rarely live on one surface. Teams need content catalogues, video assets, metadata, and ingest / distribution status in view together—so advertising and content work can move without losing operational context.

When those pieces sit in disconnected views, it is harder to see what is ready, what is blocked, and what needs the next action.

My contribution

I contributed UX and interface design for operational dashboards, catalogues, assets, metadata configuration, and monitoring—working in Figma and HTML/CSS/JavaScript with engineering.

UX & workflows

Structured how catalogue, assets, metadata, and monitoring relate as one operations path.

Interface design

Designed dashboard and configuration views that keep hierarchy, status, and next actions readable.

Frontend collaboration

Implemented and handed off interface structure in Figma and HTML/CSS/JavaScript with engineering.

Approach

The product material frames operations around catalogues, assets, metadata, and ingest / distribution monitoring. The illustrative sequence below follows that path: bring assets in, configure metadata, then monitor status—matching the command-center navigation pattern already used on the site (Catalogue · Assets · Ingest · Monitor).

Illustrative workflow

From asset intake to monitoring

HTML/CSS process graphic—shows how content moves through the key operations stages.

  1. Asset intake Bring video assets into the catalogue and ingest path
  2. Metadata configuration Attach titles, ads, and operational fields the system needs
  3. Monitoring Watch ingest and distribution status for the next action

Design decisions

Dashboard visibility and metadata configuration were treated as linked parts of one operational workflow—scan status in the catalogue, then open configuration when detail is needed.

Dashboard visibility

See content and status together

Conceptual G4TV operations dashboard showing content readiness, ingest progress, and needs-attention alerts together. View full size
Dashboard visibility—conceptual interface illustration, not a shipped product screenshot.

Metadata configuration

Configure fields without losing the catalogue context

Conceptual G4TV metadata configuration illustration with asset browser, episode preview, and metadata editor fields. View full size
Metadata configuration—conceptual interface illustration, not a shipped product screenshot.

Information hierarchy

Catalogue and overview sit above detail, so operators scan the set before opening a single asset.

Status visibility

Ready, ingest, and review states stay visible beside content so operational health is not buried in detail screens.

Find the next action

Configuration and monitoring actions sit next to the content they affect, so the next step is obvious from the current view.

Outcome

The work produced interface designs and frontend structure for Video Command Center operations—dashboards, catalogues, assets, metadata configuration, and monitoring—ready for engineering collaboration through Figma and HTML/CSS/JavaScript.

  • Operational dashboard and content catalogue interfaces
  • Video asset and metadata configuration views
  • Ingest and distribution monitoring layouts
  • Figma and HTML/CSS/JavaScript artifacts for engineering collaboration

Explore other studies or discuss a similar engagement.

All case studies Discuss your project