CASE STUDY

Data Visualization Standards

Overview

Due to growth through acquisitions, many Catapult dashboards lacked consistency. This work established a unified set of data visualization guidelines aligned to the brand and design system, defining graph anatomy, accessibility standards, styling, interaction rules, and when to use which chart types.

Project Details

Role: Lead Product Designer
Team: UX
Timeline: 1 month (per 2 phases)

Design System documentation featuring standardized color tokens and accessible color combinations with required data visualization anatomy.

Challenge

Align charts across brands while respecting semantic colors (status states) and meeting WCAG 2.1 contrast in light/dark modes.

Success Metrics

Portfolio-wide adoption of guidelines
WCAG-compliant palettes and charts for all data visualization
Faster comprehension for sports scientists
Higher clarity ratings post-launch

Process

Color Studies: Explored tetradic schemes, luminosity, and contrast ratios, testing against WCAG 2.1 AA.
Introduce New Colors: Added five colors with specific roles (1 for onboarding, 4 for data).
Identify Threshold Use‑Cases: Created tints/shades for values surpassing typical thresholds.
Redesign Phase: Two years later, helped define tokenization and simplified system/reference palettes; updated data colors using the HCT model for consistent steps and stronger contrast.
Accessibility Testing: Verified color pairs for light/dark modes.
Documentation: Codified graph anatomy, styling, interactions, recommended chart types, and produced guidelines for color usage.

Color Studies

Color studies based on Catapult brand colors, their tetradic schemes, luminosity variations, and contrast ratios.

Initial Proposal

Original proposal for 5 new colors in light and dark mode.

HCT Color Contrast Testing

Accessibility Testing of updated HCT color model.

Guideline Documentation

Guidelines for graph usage included rules for graph anatomy, accessibility, styling, interaction, as well as which types of graphs to use and when.

Solution (Artifacts)

Tokenized Color System: Reference and system palettes with data visualization‑specific sets.
Threshold Colors: Accent variants for outlier/high‑importance values.
Documentation: Foundation library shared across web, mobile, and desktop.

Outcomes

Clear, approved, and accessible color tokens + guidelines reduced ambiguity and rework
Faster insight extraction for sports scientists thanks to improved clarity and scannability
Easier handoff and implementation for developers with consistent tokens and examples

Google Sites

Report abuse