Mux provides powerful video analytics for content providers like IGN and Disney. I helped Mux generate design solutions for how they communicate customer insights with their data. Our goal was to increase the amount of actionable data presented within the same visual space. We did so by deconstructing the data relationships, identifying a more effective visualization framework, and defining a new language for presentation.

In this visual we see two scales, 'Player Time' and 'Relative Time,' communicated within one single-axis timeline. You can see why this approach was challenging their users in understanding the story behind the 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.

Here we can begin to attach visual iconography to events to understand the context of Session Time, something that was not possible in the current Timeline format.

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.

It was time to explore a dual-axis timeline solution to improve our clarity of Events in context of two scales:

Combining this strategy with Event Sequencing iconography allows us to tell a more descriptive 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.

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

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.

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.

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.

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.