Awin Design System
Scalable, accessible design language for a global B2B SaaS platform.
Data Visualization Guide
Creating a unified Data Visualization Guide to ensure clarity, consistency, and accessibility across cross-functional teams.
Role
Product Designer
The Challenge
Teams struggled to create accessible and consistent visualizations. WCAG guidelines—while essential—were often too technical and hard to apply, leading to uneven accessibility practices. Misunderstandings around color usage created tension between brand, clarity, and accessibility.
Teams also lacked a shared approach to chart selection, resulting in inconsistent patterns and duplicated effort.
Objectives
Design a Data Visualization Guide that unifies how the organization communicates data while keeping accessibility at the forefront. The guide needed to:
- Ensure all visualizations meet WCAG 2.1 accessibility standards
- Establish visual and conceptual consistency across teams
- Make chart selection and color usage clear and approachable
- Strengthen collaboration through reusable principles
Approach
To make the process clear and actionable, the work was organized into three steps.
1. User Research
We started by understanding the people behind the visualizations. Stakeholder mapping revealed four groups: Brand/Marketing, Product Design, Front-End Development, and Data Analysis. Using an influence x relevance matrix, we focused on the three most critical: Product Designer, Front-End Developer, and Data Analyst.
A cross-functional survey surfaced common frustrations: inconsistent chart standards, unclear accessibility requirements, and duplicated work during handoff. We also learned that each role defined “readability” differently — designers through aesthetics, developers through structure, and analysts through comprehension.
From these insights, we created three personas:
- Maja Wallner, a Product Designer balancing brand and accessibility
- Stephan Ackner, a Front-End Developer focused on technical scalability
- Lukas Schneider, a Data Analyst translating complex insights for non-technical audiences.
These personas helped shape the guide's tone and ensured all disciplines were equally represented.
2. Information Architecture
A closed card-sorting exercise across roles clarified how content should be grouped and navigated. Insights from the similarity matrix led to a four-pillar structure — Basics & Glossary, Color Palettes, Data Visualizations, and Accessibility — aligning content with distinct user priorities. Designers gravitated toward foundations and color systems, developers toward implementation patterns, while analysts moved between core concepts and applied visualizations. To ensure cross-team consistency, the system was supported by documented design tokens, reusable chart components, and scalable implementation patterns.
3. Accessibility — Beyond Colour Contrast
Screen reader testing using Silktide Simulator revealed keyboard navigation breakdowns. A skip link, placed as the first focusable element, allows users to bypass the main navigation. The accordion component was refactored so each trigger announces its label and state via aria-expanded, while an Escape handler prevents keyboard traps within nested panels.
Semantic structure using landmark roles and properly nested headings reinforce contextual navigation. Interactive elements were adjusted so state changes are consistently announced, reducing ambiguity and cognitive load.
Color contrast and text readability was validated through a systematic audit to ensure WCAG AA compliance across text and UI elements. An optional high-contrast toggle elevates key components to AAA standards and enhances legibility by increasing spacing to recommended values — letter-spacing: 0.12em, word-spacing: 0.16em and line-height: 1.7 — improving readability without altering the core visual system.
4. Validation & Refinement
Before publication, the guide went through multiple internal review rounds. Cross-functional teams tested the content in their actual workflows, helping identify areas where instructions or examples needed simplification — ensuring the guide was as usable for a data analyst as it was for a front-end developer.
The Solution
Accessibility was embedded from the start.
The guide outlined concrete principles for accessible data visualization:
- Fully WCAG 2.1 AA compliant site
- Use Semantic HTML and ARIA roles to describe user interactions
- Include skip-navigation and landmarks for screen-reader navigation
- Light and Dark themes
Each discipline benefited in tangible ways:
Designers gained color recipes and usage guidelines; developers received ready-to-use code snippets; analysts learned clearer labeling and annotation techniques. Together, they established a workflow that naturally produced accessible, consistent visualizations.
See homepage prototype in action.
Impact
The Data Visualization Guide became a single source of truth for how the organization approaches data visuals. It improved cross-team communication, reduced redundant work, and set clear accessibility expectations from the start of every project.
Early feedback was highly positive. Designers reported faster alignment on color and typography, while developers appreciated having codified accessibility examples instead of scattered references.
Reflection
This project reaffirmed that accessibility and consistency are inseparable. When teams share a common design language, collaboration becomes smoother — and users benefit from clearer, more inclusive visual communication.
By bringing designers, developers, and analysts together under one accessible framework, we built a foundation for data visualizations that are both unified in appearance and equitable in experience.
Screens
