Kelsey Mustra

Case Study: Creating a Unified Accessible Design System

Background

Project
Figma Design System

Role
Product Designer and Accessibility Advocate

Year
2023

Tools: Figma, Confluence, Jira

Team: Cross-functional collaboration with UX Designers, Front-End Development, Product Management, Marketing, QA, and Content

Goal: Create a scalable, WCAG accessible design system to bring visual and functional consistency across the suite of B2B and B2C products, including the core platform and various marketing sites.

Impact
  • Increased WCAG Compliance
  • Sped up time for handoff to engineering
  • Reduced time spent looking for reusable components
  • Improved ability to rapidly prototype
The Challenge

How might we create a unified design system that ensures visual consistency, accessibility compliance, and cross-team efficiency across all digital touchpoints?

The product ecosystem had evolved organically over time, resulting in:

  • Fragmented design language and inconsistent user experiences
  • Repetitive work due to a lack of reusable components
  • Accessibility issues (color contrast, font size, focus states)
  • Developer inefficiencies during handoff and implementation
  • No shared source of truth for UX/UI best practices
Discovery & Research
UI Audit

The design team conducted an interface audit across products and marketing sites, documenting visual inconsistencies, redundant components, and accessibility violations.

Screenshot of a B2B product project management interface displaying active and completed tasks.
Product suite, no cohesion and inaccessible color combinations
Stakeholder Interviews

Spoke with product managers, engineers, QA, customer support, and marketing to gather pain points and improvement opportunities across workflows.

Quantitative Metrics

Reviewed DevOps tickets and internal estimates on duplicated work, and identified significant time spent recreating patterns for both design and development.

Accessibility Assessment

I was the Accessibility Advocate on this project, so I spent time noting particular issues with CTA contrasts, font sizes, and interactive elements, and flagged non-compliant elements and gaps in WCAG AA adherence. This would ensure we address fixing these in the final system.

Comparison of color systems before and after improvements, showcasing semantic and brand colors, along with accessibility compliance notes.
Prior style guide vs colors as determined in design system, with variations to allow for accessible combinations.
Comparison of low contrast buttons and new high contrast buttons illustrating improved visual hierarchy and accessibility features.
Competitive Benchmarking

Studied how similar organizations approached governance, contribution, and cross-platform design systems.

Three panels titled 'Audit', 'Documentation', and 'Focus states'. The 'Audit' panel outlines UI component audits and recommendations. The 'Documentation' panel includes best practices for research and feedback. The 'Focus states' panel discusses accessibility guidelines for user interface components.
Sharing plans and status of work across teams to gain buy-in and alignemt, and beginning research on components and their variants and states.
Strategy & Planning
Core Design Principles
  • Accessible: Inclusive by design, aligned with WCAG AA standards
  • Scalable: Built for future growth and new product lines
  • Flexible: Modular enough to support unique team needs
Component Prioritization

Design team collaborated to prioritize components based on usage frequency and friction in current workflows, so the MVP focused on foundational UI: buttons, inputs, forms, nav, and alerts.

Naming & Tokenization
Layout showing Figma components with observations, recommendations, guidelines, and design library mockups.

We used our research on other design systems to lead how we defined consistent naming conventions in our system. We tested out a few different ways for basic elements such as dropdowns, text fields, and buttons to ensure our naming was flexible enough. We also introduced design tokens for colors, typography, spacing, and radius.

Governance Framework

Outlined our contribution process to divide up tasks, design review cadence, and documentation ownership of components across design and development.

Design & Implementation
Component Creation

Designed atomic components and complex patterns using Figma’s auto-layout, variants, and interactive states, building for responsiveness and accessibility from the start.

The interface showcases a global design library in Figma, detailing typography, color options, spacing, and layout guidelines.
Documentation

Created usage guidelines, do’s/don’ts, accessibility checklists, and examples for edge cases, and published design documentation in Confluence for cross-team visibility. Made the Figma library file itself also an interactive prototype that could be shared internally for review and reference.

Specifications for a design system component highlighting button types, best practices, and accessibility guidelines.
Specifications for each component showed types, best practices, accessibility checklists, as well as specifications for color, behavior, size, spacing, and placement. Actual Figma components were maintained in tandem.
Engineering Partnership

Supported developer questions during implementation via regular calls, Teams channels, and virtual office hours, working closely with front-end devs to ensure pixel-perfect parity and feasibility.

A status table displaying the progress of foundational (priority) and component elements in a design system. Categories include Typography, Layout, Color, and various UI components such as Buttons, Checkboxes, and Dropdowns, with their respective testing readiness statuses.

Here’s an example walkthrough with the front-end engineers.

Rollout & Adoption
Training & Onboarding

Led internal workshops to introduce system components and usage principles and ran Q&A sessions for developers, designers, and content creators.

Left side shows design system specifications for text inputs, including labels, descriptions, and accessibility checklist. Right side displays text inputs in use with example user interface for team details input.
Design system guidelines on text fields, and components in action on new product mockups
Communication Strategy

Maintained change logs, release notes, roadmap updates, and created Teams channels for ongoing feedback and component requests.

Pilot Projects

Rolled out with lower-risk projects, like new landing pages, to gather feedback before expanding to core product areas, while integrating the system into shared Figma libraries.

Comparison of a UI design before and after a redesign, showcasing improved layout and component organization.
My Focus on Color Usage in Data Visualization
meeting WCAG Accessibility standards

The current style guides had been the basis for illustrative content and data visualizations, and in many cases did not meet contrast requirements to be AA WCAG accessible.

An infographic outlining a workshop structure for MBTI personality assessments, divided into three sessions, each with specific objectives and time allocations.
Prior colors were difficult to read and did not have enough contrast to really be able to read presentations or site content.
Color research

Delicately balanced trying to remain cohesive with our brand colors, but remaining distinct enough to not be confused with CTAs and interactive elements. I used VIzPalette to analyze my color selections from different visual perspectives. View one of my color combinations in the tester.

A screenshot of the Viz Palette tool showcasing features for color selection and visualization options, including color editing, sample fonts, and color population statistics.
SUggested palettes

This research allowed me to define color palettes for a few types of data. I was able to also meet with our research and graphic design teams to share the concepts with them and get their sign off. This allowed us to work towards unifying our color palettes in not only our user interface, but in slide decks, promotional material, and report PDFs.

A visual representation of different color palettes, including categorical, sequential, and divergent options, designed for data visualization. Each palette includes color tests showing compliance with AA WCAG standards for text readability.
Results & Impact

✅ Improved Design Consistency unified experience across platforms, from B2B product UI, B2C product UI, to marketing assets.
✅ Reduced Time-to-Design meant faster prototyping using ready-made components reduced repetitive work, enabling design to iterate and pivot more quickly.
✅ Stronger Cross-Functional Alignment with Engineers and QA teams having a single source of truth, increasing speed and clarity of handoff.
✅ Enhanced Accessibility meaning the new system met or exceeded WCAG AA standards for color contrast, font size, and keyboard navigation.
✅ Less Design Debt and Redundancy reduced duplicate efforts and visual discrepancies across teams.

✅ Less Design Debt and Redundancy: Reduced duplicate efforts and visual discrepancies across teams.

Lessons Learned
Balancing Flexibility with Standardization

Needed to evolve components to support edge cases without bloating the system. Focused on the atomic components first and expanded.

Stakeholder Engagement

Visual artifacts weren’t available early in the process, making it harder to gain buy-in. Solution: Regular check-ins, early previews, and inviting feedback helped build trust.

Unexpected Advocates

Involving non-design stakeholders early led to better adoption later as they felt ownership and excitement when updated standards went live.