noc monitoring

Delivered as a fully interactive prototype in Figma Make. The value was in showing an end-to-end product process, product thinking, user personas, user flows, design system and high-fidelity prototyping, rather than a purely visual UI pass.

A redesign of an existing Network Operations Center (NOC) platform used to monitor live video transmission units. The objective was to improve how operators oversee multiple live streams, detect transmission issues, and respond quickly in high-pressure broadcast environments.

The existing experience exposed large amounts of operational data but lacked a clear information hierarchy, making it harder to identify critical issues at a glance. The challenge was balancing information density with fast decision making, while supporting monitoring of up to twelve units simultaneously.

I defined the primary administrator goal and broke it into three workflows, then mapped how an operator moves from spotting an issue to diagnosing it.

• Overview monitoring - is anything wrong right now?
• Alert response - something is wrong; what is it and how urgent?
• Unit investigation - why is this specific unit failing?

Sequencing them this way set the feature priority: the overview earns the most screen, alerts interrupt it, and investigation happens in a side panel without leaving the wall.

I analysed competing monitoring platforms alongside dashboard products such as Grafana to identify best practices for real-time operations.

• Glanceability before density - these tools are read at a distance and in peripheral vision, not studied up close.
• Semantic colour, used sparingly - colour is reserved for state so it keeps its meaning. If everything is coloured, nothing reads as urgent.
• A grid that scales without redesign - the layout has to hold from one unit to twelve.
• Reduced cognitive load for 24/7 use - operators work long shifts in mission-critical conditions, where fatigue is the real failure mode.

Operators watch up to twelve units at once, so the grid has to answer "is anything wrong?" before it answers anything else.

• State is readable from across the room - every unit carries a live thumbnail, a semantic status badge and a signal percentage. Failing units are outlined in red rather than only labelled, so a fault registers without being looked for.
• Grid and list views - the grid suits sweeping all twelve at a glance; the list suits sorting and comparing once something needs investigating.
• Filtering by state - narrowing to live, idle or error collapses the wall to only what needs attention, which matters most mid-incident.
• Search and device-type filters - for reaching a named unit directly instead of scanning for it.

An alert has to interrupt without taking over the screen, since the operator may already be handling a different fault.

• The toast carries the whole diagnosis - severity, unit, plain-language cause and the measured value, so the operator can triage without opening anything.
• Two actions, not one - view jumps to the failing unit, acknowledge clears the alert in place. Separating them lets a known issue stop competing for attention without being forgotten.
• Non-blocking placement - alerts sit clear of the grid, so monitoring continues while one is being triaged.

Foundations built for rapid iteration and consistency across a data-heavy enterprise interface.

• Colour tokens with semantic states for live, idle, warning and error.
• Typography and spacing tokens tuned for dense, tabular data. Using 4px basis in order to fit more content.
• Responsive breakpoints that keep the unit grid legible as it reflows.
• Reusable components with interactive state variants, so new screens inherit behaviour instead of re-specifying it.