Integrating Accessibility into Placer’s Design System and Product

SUMMARY

In a high-velocity environment, the Placer Design System is a critical asset for maintaining visual consistency and speed. I co-led the initiative to integrate accessibility as a foundational layer of the system, transforming a compliance requirement into a catalyst for platform-wide UI modernization.

THE OUTCOME

Preserved high-value customer contracts through a core accessibility overhaul. Beyond compliance, the project delivered a more cohesive UI and a reusable component library, accelerating release cycles and ensuring UX consistency across the platform.

BUSINESS MODAL

B2B SaaS / PLG

DEVICE

Desktop

COLLABORATORS

Senior Product Designer (me), Lead Product Designer, 1 Engineer, Director of Product Design, Brand Design

Core Principles of Accessibility

Perceivable

Text size, scaling, good contrast, text alternatives for non-text content, don’t convey info with color only.

Understandable

Labels and instructions are provided to users whenever content requires input, e.g. sign up or login forms.

Robust

Can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Operable

Make all functionality available from a keyboard or a keyboard interface.

Beyond Compliance:
Building a Platform for Everyone

Approximately 40% of Placer customers operate within the civic sector. As of 2026, WCAG 2.1AA compliance is required for all state and local government entities across the United States. Our Design System is the critical engine for maintaining this compliance; it allows us to efficiently audit the entire product and implement universal fixes for accessibility failures in the UI.

The need to achieve WCAG 2.1AA compliance presented a perfect opportunity to drive significant platform-wide improvement. Since a large proportion of the Placer platform lacked up-to-date UI, this initiative enabled us to accelerate the adoption of Design System components across the board, ensuring a cohesive and visually unified experience. As a key part of this effort, we standardized all tables using AG Grid, which provides built-in accessibility features among many other features which enhance the user-experience. Successfully executing this project required significant, close collaboration among our designers, developers, and QA teams.

A table UI that does not pass WCAG standards

Outdated UI, not accessible

The same table with new UI that does pass WCAG standards

Design System component, AG grid implementation

A UI component that does not pass WCAG standards

The same component with new UI that does pass WCAG standards

Note: Data in the table UI is hidden for confidentiality purposes

A Unified Source of Truth for Designers and Developers

We built our design system in Storybook to foster collaboration and transparency between design and development. Storybook functions as a living, interactive documentation hub, enabling teams to share, test, and maintain consistent design components with ease. To ensure accessibility and quality, each component underwent visual QA, code review, and WCAG compliance testing through an integrated accessibility checker within Storybook.

From Complexity to Clarity:
Redefining Placer’s Visual Voice

As part of our WCAG compliance initiative, we overhauled Placer’s iconography system. The previous icon set was fully custom and overly detailed, making it incredibly time-consuming to maintain and visually confusing. We adopted the Phosphor Icons library to give designers access to a wide range of clean and clutter-free icons. This significantly reduced turnaround time and eliminated the need for ad-hoc icon design and approvals.

I conducted a full audit of all existing icons, mapped each one to its closest Phosphor equivalent, and designed custom replacements where necessary. To further enhance accessibility, we increased the default icon size from 18px to 24px and rigorously tested all design system components containing iconography to ensure visual consistency and prevent breaking changes.

To ensure a seamless front-end transition, I created a detailed mapping sheet linking every legacy SVG name to its new icon, allowing developers to automate the replacement process. In Figma, I preserved legacy icon names in descriptions so designers could easily locate the correct new assets.

The previous Placer iconography and the new iconography

Old vs new menu example

Mapping out for developement the previous Placer iconography names and the new iconography names

Mapping old vs new icons and names

Consolidating for Clarity

In addition to the platform’s standard UI icons, there were two additional icon styles compromising a cohesive visual identity: illustrative icons and ‘metric icons’. Essentially, they both originated from the same design need - allowing designers to scale icons to larger sizes for illustrative purposes. To bring consistency and order, we standardized these icons to also stem from the Phosphor gallery. We created the ‘icon container’ component which allowed designers to pull any icon from the gallery into a container with pre-defined sizes and styles. By successfully replacing these assets across the entire platform, we delivered a more cohesive, scalable, and modern visual voice.

Various Placer icons that do not follow a consistent visual style

The icon container component in the design system with the controls that designers can use

The shift to standardized illustrative icons was a chance to refresh important parts of the UI, like the dialog box. After a full audit, I made a key strategic decision: the new icons would focus on what state the dialog represented (eg: "Success," "Error," or "Warning") rather than trying to illustrate the content itself. I preserved a small number of content specific icons as necessary exceptions where customers were already very familiar with them. To finish the job, I also created dialog box templates for common situations, which came with the right standardized icon and pre-approved, consistent copy.

The shift to standardized illustrative icons was a chance to refresh important parts of the UI, like the dialog box. After a full audit, I made a key strategic decision: the new icons would focus on what state the dialog represented (eg: "Success," "Error," or "Warning") rather than trying to illustrate the content itself. I preserved a small number of content specific icons as necessary exceptions where customers were already very familiar with them. To finish the job, I also created dialog box templates for common situations, which came with the right standardized icon and pre-approved, consistent copy.

Snippet of the dialog box audit

Simplifying dialog box visual iconography

State-based iconography, with exceptions for frequently used icons

The new dialog box component build in the design system

New confirmation dialog component build

Presets included in the design system component

Reusable modal presets with standardized copy

Documentation and Design Consistency

An additional part of my role on the Design System team was to define clear, comprehensive documentation for both designers and developers. In Figma, I maintained design guidelines and component documentation to ensure consistent implementation. While in Jira, I provided detailed specifications and use cases for development. I also conducted platform-wide UX and UI audits to identify inconsistencies, mapping out all use cases and interaction scenarios. This process ensured that new design patterns were flexible, scalable, and covered every real-world situation our users might encounter.

AI-Augmented QA:
Scaling Accessibility Audits

Recognizing that manual screen reader QA would delay our release by weeks, I leveraged Gemini to architect an automated auditing system. We developed a high-fidelity prompt that mapped data categories to accessibility standards, outputting precise expected behaviors and 'pass/fail' statuses against WCAG criteria. Sharing this logic with the broader design team not only accelerated our timeline but ensured a level of testing consistency that would have been impossible through manual efforts alone.

The Results

Transforming our design system into a fully WCAG-compliant framework elevated both the accessibility and consistency of Placer’s products. Each component was audited, refined, and tested to meet rigorous standards for color contrast, icon legibility, keyboard navigation, and screen-reader compatibility. The result was a more inclusive, user-friendly experience and a cleaner, more maintainable system for designers and developers.

This shift embedded accessibility as a core design principle, enabled Placer to maintain key civic contracts, and accelerated UI updates through standardized components - improving efficiency and significantly reducing turnaround time for both design and development teams.

About

Resume