Data Visualization

Data visualization is the graphical representation of information and data. By using visual elements like charts, graphs, and maps, it provides an accessible way to see and understand trends, outliers, and patterns in data.

This page shows plot designs for GE Digital's Predix UI, ServiceNow & Palo Alto Networks' design systems. My role in these projects: Principal Designer, collaborating with up to five designers in the organization, multiple product managers, and stakeholders, keeping four developers busy.

Visual Clarity and Simplicity

The foundation of effective data visualization lies in maintaining clarity through:

Decluttering by removing unnecessary elements like excessive gridlines, borders, and decorative effects
Maximizing the data-ink ratio while keeping visualizations readable
Using clean layouts and avoiding overcrowded displays
Grouping of visual elements into as few groups as possible.

Emphasis and Hierarchy

Creating visual hierarchy helps guide viewers through the data:

Draw attention to key areas using size, color, contrast, and negative space
Use visual cues like size, contrast, and position to create clear hierarchies

Color Usage

Colors should be employed strategically:

Use colors that are not used elsewhere in other color palettes of the UI. (i.e. Red for Alerts)
Use colors thoughtfully to highlight key information
Maintain consistent color schemes throughout the visualization
Choose intuitive color associations (i.e., red for heat, blue for cold)

Context and Accuracy

Ensure visualizations are both meaningful and truthful:

Provide appropriate context through benchmarks and annotations
Maintain data integrity by avoiding distortions (zero point visible)
Use correct scales and proportions to represent data accurately
avoid scaling charts in different proportions across a UI

Audience Consideration

Always design with the end user in mind:

Make it accessible (offer alternative color sets, patterns, tables)
Consider the context and purpose of the plot
Provide appropriate levels of detail based on user requirements

Interactivity and Animation

The fundamental interactive features include:

Show/hide effects triggered by hovering
Tooltips providing additional context when hovering over elements. (Not a preferred option, they cover the cover the visual)
Drill-down features to explore deeper layers of data detail
Data manipulation filtering controls to focus on specific data subsets
Comparison
Real-time updates showing immediate impacts of user interactions
Dynamic data exploration through page level customizable parameters
Always consider drawing the plot in a meaningful way that highlights the information and the expressed trend.

Example Sheet

Examples that showcase what's possible with a consistent library.

Dark Theme

Both background and plot colors are modified to create an integrated experience.

Figma Library

This is where the practical application begins: Plots need to be available as an easy-to-use library to allow for seamless integration into the designer workflow.