MUX provides powerful video analytics for content providers like IGN and Disney.  I worked with MUX to improve the way they communicate data to their customers and provide value in a competitive marketplace.

Problem

MUX's powerful insights weren't effectively communicated by their data visualizations, leaving value on the table

Solution

Design a new Visual Language to increase the amount of actionable data presented in the same visual space

Execution

Deconstruct the data relationships, identify a more effective data viz format, define new Language and presentation 

 

Pre-Existing Product

You can see why this approach challenges End Users to understand the story of the Viewer's experience. We have two scales, 'Player Time' and 'Relative Time' communicated within one single-axis timeline.

 

Understanding the Raw Data

By exploring the raw data powering existing visualizations, we can understand the current visualization logic and identify better solutions. Taking the example data set below, I set out to understand User Events and Player Time in context of Session Time.   

I immediately sought to attach visual iconography to events and understand the context of Session Time, something that was not possible in the current Timeline format.

 

Combining Raw Events into Sequences

An opportunity simplify our communicative logic presented itself when we explored combining raw events into sequences that would help reduce the amount of ink required to communicate the data.

From the 11 original Unique Events, we can refine to 6 Event Sequences:

 
  1. viewstart
  2. adstart
  3. adend
  4. play
  5. playing
  6. pause
  7. seeking
  8. seeked
  9. play
  10. playing
  11. viewend
 
  1. Startup
  2. Playback
  3. Paused
  4. Rebuffering
  5. Seeked
  6. Error
 
 

Visualizing in 2 Dimensions

I began exploring a dual-axis timeline solution to improve our clarity of Events in context of two scales: 

  • Video Time (y axis)
  • Session time (x axis)

Combining this strategy with Event Sequencing iconography allows us to tell a complete and precise story with very little text or numbers.

We end up with a (hopefully) up-and-to-right visualization that allows our end users to grasp the full story of a Viewer's experience, a massive improvement over the visually-ambiguous single-axis timeline.

 

Defining a Visual Language

Creating a stark visual identity for each Event Sequence allows us to visually represent data more efficiently without the need for labels.

 
 
 

Solving Edge-Case Problems

Recognizing edge cases that threaten our display model, we incorporated visual abbreviations for instances of exaggerated graph distances like long Seeking and Pausing, allowing us to display more actionable data in one view.

 
 
 

Defining a Presentation Format

Each Session Events contains context for Video and Session Time. In a sense, each Event has its very own graph.

By orienting our UI on individual Events rather than a universal time graph, we are able to incorporate conditional Event formatting without the constraint of a universal time scale.

Hover and Fade

Hovering individual Session Events exposes exact Video and Session Time context for that single Event, allowing the user journey to be explored one event at a time.

In addition to employing hover interactions, we can also fade all unselected Events to improve legibility, as shown in the next example.

Gross Time

In addition to the Video and Session time Duration of each Event, we can also communicate the overall Video and Session time using references along the X and Y axis.

Exposing overall Session and Video time along the X and Y axis as our user hovers along any given Event allows us to respect the time leaps elapsed in conditionally formatted Events.