Enterprise Design System : Data Visualization
Description
Create an enterprise-wide (UnitedHealth Group) data visualization standard library across all experiences for our brand family, with an ever-evolving collection of components and patterns.It is designed to maximize accessibility and harmony within a page.
One data viz color palette across the enterprise
Work well across ALL combinations of brand colors
Easier to manage
All themes share the same color pallet (No color switching between themes)
Above all, data needs to be understood and conveyed clearly with intention. To ensure that data visualization does not compete or conflict with brand ethos, the proposed colors have been chosen carefully to provide contrast from brand moments while providing proper visual contrast and emphasis for clear understanding of specific data.
Creating an accessible (WCAG 3.0) color palette for data visualization is a complex process all the more reason to create a palette that can be used across the enterprise. The process of creating this specific color palette began by first selecting the colors, then ensuring that they met contrast on white & black backgrounds, then ensuring that each color grouping had similar levels of intensity and shades. This was done to ensure that not one single color drew more attention over others.
Design Methodology
The idea behind this new palette is to provide colors that hit the following criteria:
Colors that stand out from one another (can stand alone)
Colors that are of the same intensity (none that draw more attention over others or fade to the back)
Colors that allow for a primary, dark, light and background shade
Primary (parent) colors with corresponding secondary (child) shades to show a drilled-in/deeper dive of related metrics
Industry Types
• Health Insurance
• Design Systems
• Data & Analytics
Software/Tools
• Figma
• Frontify (documentation site)
Collaboration
• Designers
• Accessibility
• Engineers
• Data Analysts
• Branding
End Users
• Designers
• Engineers/Developers
• Data Analysts
• Brand/Marketing/Sales
Templates
• Figma Components
• PowerPoint
• Excel
• PowerBI
• Angular & React
Company
UnitedHealth Group Enterprise
• Optum
• United Healthcare
Largest health insurance company in the US with over $268 billion in revenue.
Research
I began my design process by researching existing data visualization design systems. Mainly focusing on some of today’s top companies like Apple, IBM and Salesforce. I quickly found that most companies that had data visualization systems that were not accessible (WCAG 3.0) and those that did, featured accessible colors that were dark and had low contrast. My goal was to create a single color palette featuring bright/vivid colors that met the needs of those with and without accessibility accommodations.
IBM (Carbon)
Salesforce
Articles/Resources
Initial brainstorm - Many attempts
Below I have outlined my design process. It is rare that a designer finds their final solution on the first try and I am no exception. I truly believe that in order to make true progress, you must not be afraid to take a step backwards.