← Back
Tenable - Dataviz & dashboards
Background
As part of the transition from the legacy Tenable.io web app to a new design system we needed to refresh the data visualization widgets and dashboard templates they composed.
What problem were we trying to solve?
The combinations of color, text size, text weight and data in the legacy design didn't always enhance the interpretation of the data and in some cases distracted from it.
Outcomes
- Created detailed specs for existing visualization component types
- Applied these new visualization styles in the context of the composed dashboard templates
Visualization component specs
At the widget level, all visualizations were meant to have three main states: idle, rollover and active. Generally you'll see the states applied as changes in color saturation along with the reveal of additional detail via popovers. The goal was to give the user the high level picture in the idle state, bring the widget to life when the user starts to interact (on rollover) and then allow them to get more granular with a piece of the visualization before making a single click. I've added two examples below and the full set can be found here:
Dashboard templates
At the dashboard template level, I mostly focused on making sure the layouts felt balanced and scannable. Before and afters for the full set below:
