A fully responsive chart visualization library built from the ground up, with security and scalability baked in.
For those who aren't aware, Tanium is one of the world's leading Cyber Security & Endpoint Management platforms. Tanium protects over 50% of the Fortune 500s, every major branch of the US Military, and a huge portion of the world's more critical infrastructure, including banks, hospitals, and utilities.
Tanium is unique in that it gives enterprises command and control over their entire digital estate. Unlike its competitors, which require a huge amount of compute and storage to detect and process vulnerabilities, Tanium can detect and remediate threats, on practically every device, in near real-time on the edge.
The Tanium Charting Library product came about because of the need for Tanium to internally expand our charting capabilities without the worry of using potentially insecure 3rd party libraries.
The library needed the ability to be placed in any module, anywhere in the platform. We needed it to have the ability to inject a single chart into panels, components, pages, dashboards, or reports.
UX Team - Sr. Product Designer
Internal UX Team, Development Teams, Product Managers, et. al.
Library Definition, Spec & Documentation Website, Design Library Creation, Organize Common Components, Codify Browsable & Searchable Naming Conventions, Responsify & Symbolize Components, Documentation Website Prototype.
I led the entire design process throughout the development of this library. This work included defining the chart behavior and interactions to defining a scalable color palette and spacing the responsive behavior of each chart. In addition, I produced a complete documentation site for the developers and PMs to reference for specs, behavior, states, and types. This spec site also served as an internal design library that designers could use to pull up any chart they needed while designing.
The library consisted of pages dedicated to the various types of charts in multiple sizes and permutations. I produced a several high-level overview pages to establish context of the general types and size. I created detail pages for each chart types and the various permutations of that chart with different data scenarios - for example, historical data vs. real-time.
The library needed the ability to expand and contract depending on the layout a user wanted. Certain components, such as Buttons and Tooltips, included adaptive properties that automatically changed the component's size based on the content entered into the object.
To help designers and non-designers have a quick reference guide to all of the library's facets and capabilities, I put together a click-through prototype / pseudo website to serve as a centralized documentation resource for the library.
Here is a quick video of the documentation library site put together. Like the UX Design Library, it served as a centrally published reference for designers, developers, PM, QA, and the like. It also served as a way to ask open questions and centralize the final decisions in the documentation.
.png)