Design System Contributions & Accessibility Leadership

Context

In large-scale, multi-stakeholder environments — especially across public and regulated industries — consistency, scalability, and accessibility are not just design preferences, they’re non-negotiable standards.

As part of multiple transformation programs, I played a key role in contributing to and maintaining centralized Design Systems that enforced UX/UI consistency and WCAG-compliant accessibility across product portfolios.

Challenges

Lack of consistent component usage across product teams

Accessibility violations and retroactive compliance efforts

Multiple teams using ad hoc styling, fragmenting the

UX Delays in dev handoff due to missing design specs and states

Goals

Create a unified, reusable component system to reduce design/development duplication

Embed accessibility into the design process—not treat it as a post-launch fix

Improve cross-team collaboration and governance on design decisions

Reduce friction between design, product, and engineering teams

My Process

Audit & Gap Analysis

Conducted an audit of existing UI components across different teams (State Farm + IESO)

Mapped inconsistent elements and documented accessibility violations (e.g., poor contrast, missing labels)

Reviewed screen reader compatibility for key flows

Component Creation & Governance

Designed accessible UI components in Figma, Sketch, and Adobe XD

Collaborated with front-end developers to translate designs into coded components

Proposed new component additions to the central design system and got buy-in from core design teams

Documentation & Handoff

Created spec-ready documentation: spacing, states, interactions, accessibility notes (ARIA labels, tab order, contrast ratios)

Provided annotated redlines and tokens to dev teams to reduce handoff ambiguity

Training & Advocacy

Led working sessions with product owners and devs to explain how to adopt and maintain accessibility best practices

Participated in accessibility audits and retroactive fixes on legacy systems

Promoted the use of inclusive language, accessible forms, and voice interaction patterns

Impact

Unified multiple product teams under a single design language

Reduced design inconsistencies by over 60% across platforms

Eliminated redundant design effort by standardizing 30+ core components

Increased WCAG compliance coverage from partial to near-full across multiple platforms

Reduced dev handoff issues and rework due to complete, standardized specs Shape

Tools & Standards Design Tools: Figma, Sketch, Adobe XD, Illustrator

Code & Handoff: Zeplin, Storybook, React libraries

Accessibility: WCAG 2.1, WAI-ARIA, Screen Reader Testing (NVDA/VoiceOver), Contrast Checkers

Collaboration: Jira, Confluence, Miro

Learnings & Reflections

Creating and maintaining a scalable, accessible design system isn’t just about UI — it’s about culture, governance, and education.

This initiative taught me how to:

Be a translator between visual design and semantic code

Integrate accessibility from day one rather than as a compliance patch

Build alignment across silos by proving the value of systems thinking with real efficiency gains

Design not only for aesthetics but for everyone, regardless of ability