design system
Data Viz Guidelines
Every enterprise design system needs data viz best practices
My Role
creating a data color palette (light + dark mode)
defining naming tokens in the design system for data viz color palettes (dark + light)
writing json files for powerBI
instituting data viz guidelines across enterprise
pressure testing on powerbi, storybook and ppt
Time
Six weeks, two designers
Deliverables
Colors documentation and guidelines
Data Viz toolkit wireframes
Measuring success
New hires can easily follow the color palette
Optimize the workflow of power users
Can be scaled across different orgs and products
Primary insight
Data storytelling is an essential part of the enterprise org at NBCU. We need dashboards, presentations and products to be consistent across products and teams.
~ VP of Enterprise Product at NBCU
*dashboard data is not visible due to confidentiality
how might we
… create a simple and scalable data color palette for non-designers?
and guidelines on how to use those colors correctly
First, I created a saturation tool to look at the spectrum of existing colors on dashboards
I ran all possible colors through the saturation tool to identify a common tone
Using fundamental principles of color theory I used the color wheel to find varied combinations of colors
Which resulted in a different iterations of a categorical palette
Accessibility checks to make sure these colors don't mix when used to together
And added some context
Stakeholder constraints added – "Don't use the NBCU purple"
Also, we want dark mode
So here's the final iteration of the colors
We narrowed down the scope to just PowerBI first (mainly for testing purposed)
Some research I did into these guidelines
I found an easy way to import colors directly to PowerBI without copy pasting hex codes
PowerBI is primarily available on windows
I created a quick dashboard with dummy data to pressure test colors
The NBCU purple should be reserved for the header
Here's how it looked on a dark background
This was requested by many data folk
I created variations of the color palettes with existing templates for different platforms
This was an easy, non-hassle way to customize the colors
How this project helped me grow as a designer?
Thanks for skimming all the way to the end — here are some outcomes and learnings!
Learnings
I learned that making things simple is very complex and requires talking to stakeholders at all levels
Outcomes
The color palette and guidelines are currently used by folks in the powerBI org
The color palette import increased productivity