Cloud-based Product Design

Radix®: real-time monitoring

Project

Design

Jesse Wolfe
Principal Designer

Production Rights

© iStream Planet
(a Turner® company)
www.istreamplanet.com

Radix® is a cloud-based real-time dashboard user interface for purpose of aiding management of hundreds of live online broadcast streams (channels). The objective is to provide a simpler visual tool for the platform tools are complex in nature as to support multi-tenancy, live monitoring of 100s of 'channels', trouble shooting, notifications and live/historical reporting.

A cloud-based real-time dashboard tool suite for managing hundreds of live online broadcast streams.

Process

Mapping the UX design process to accomodate a Kanban + Continuous Delivery development process. My role was to act as liason between our users and our product development teams. Our internal Operations team served as a apropos usecase model to define core UX features prioritized for both short term and long term. Uncover the current 'pain-points' of the existing user. After conducting inperson interviews with our ops engineering team I'd assessed and translated the needs for the development team to  

plan and prepare the back-end support followed by sketches and mockups for laying out features for the front-end. My choice design approach heavily incorporates the atomic design methodology and rapid delivery in micro-interactions.

Choice design approach heavily incorporates the atomic design methodology and rapid delivery in micro-interactions.

Single channel stream: visual state representation

Placeholder Picture

Left: Channel taxonomy; Right: Channel health status visual representation.

Placeholder Picture

The Channel health status severities

Multi-channel stream monitoring: (wire-frame) grid layout

Placeholder Picture

Channel stream monitoring. Arranged in a grid layout and sorted by most important (red color; top-left).

Multi-channel stream monitoring: (heat-map render) grid layout

Placeholder Picture

Channel stream "health severity" monitoring. Arranged in a grid layout and sorted by most important (color: red, gold, green; heirarchical: top-left in rank… ).

Multi-channel visual stream health status representation

Placeholder Picture

Channel stream "health severity" monitoring. Further nuanced by shadow depth--only applied to red (error) and gold (warning) health status. 

Placeholder Picture

The Channel health status severities

Multi-channel stream monitoring: (fully rendered) grid layout

Placeholder Picture

Slide-out: Display and filter control panel for customizing the monitoring view.

Multi-channel visual stream monitoring: control panel

Placeholder Picture

Slide-out: Display and filter control panel for customizing the monitoring view.

flex-item-1
Control panel: display & filtering options

In its current "closed" state the panel tab shows the following information:

  • Active Tag filter count (e.g. 4).
  • Active health status filters (e.g. all statuses are in display).
  • Active view display (e.g. "individual channels" vs. "channel folders")
flex-item-2
CONTROL PANEL: DISPLAY & FILTERING OPTIONS

Panel slides out to show options for customizing the monitoring view. These options are 'sticky' per (suthenticated) user preferences/session.

Break down of the control panel "Display" and "Filtering" controls, below: 

Placeholder Picture
control panel

Toggle to control custom display options for monitoring. 

Placeholder Picture
control PANEL: SLIDE-OUT

Quick access to control monitoring view options.

Placeholder Picture
display LAYOUT CONTROLS

Controls multiple custom displays of existing channels for monitoring.

Placeholder Picture
view by health filters

Displays a custom view per specified channel health for monitoring.

Placeholder Picture
view by Tag: drop-down

Discoverable list of available metadata tags to filter channel monitoring view.

Placeholder Picture
view by Tag: search field

Specified meta-data tag search to filter channel monitoring view.

Multi-channel visual stream monitoring: list layout

Placeholder Picture Placeholder Picture

Control panel: display change to 'list' view. Target audience: Business (PM), broadcast customer.

Multi-channel visual stream monitoring: grid layout (dark theme)

Placeholder Picture Placeholder Picture

Dark/Light theme control per preferences of the User.

Multi-channel visual stream monitoring: list layout (dark theme)

Placeholder Picture Placeholder Picture

Dark/Light theme control per preferences of the User.

Multi-channel stream monitoring: filtered view by stream health status

Placeholder Picture Placeholder Picture

Control panel: toggle-clicking on individual health buttons to change the monitoring view. Above: Both 'red' and 'green' health buttons are toggled 'off' thus filtering the monitoring view to show only the available 'gold' and 'gray' (inactive channel streams).

Placeholder Picture

Tags filtering the current viewable monitoring session.

Placeholder Picture

Persistent: alert notifications, user auth and application settings access.

Accessible from all application modalities (Monitoring -or- Troubleshooting). Displays total count of all open system errors / warnings that still may need to be addressed.

Global access bar.

Up next: "Trouble-shooting" modal UI.
( continual updates in progress… ) 
Placeholder Picture
Placeholder Picture
Placeholder Picture