Integrating Accessibility into Placer’s Design System and Product
In a fast-paced environment with concurrent product development, the Placer design system is a critical asset. It ensures that designers can quickly access and utilize the most current UI designs which, maintains visual consistency and a unified user experience across the front-end. By providing this foundation, the system not only speeds up development but also fosters a cohesive design process that empowers the team to concentrate on strategic innovation rather than repetitive implementation.
ROLE
Assistant Product Designer
TIMEFRAME
2025
COLLABORATORS
Lead Product Designer, Engineer, Director of Product Design, Brand Design, Marketing Team
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
Since many of our clients operate within the civic sector, compliance with WCAG standards - mandated by U.S. laws like Section 508 and the ADA (Americans with Disabilities Act) - is essential. 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.
Outdated UI, not accessible
Design System component, AG grid implementation
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.
We 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, we created a detailed mapping sheet linking every legacy SVG name to its new icon, allowing developers to automate the replacement process. In Figma, we preserved legacy icon names in descriptions so designers could easily locate the correct new assets.
Old vs new menu example
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.
The shift to standardized illustrative icons was a chance to refresh important parts of the UI, like the dialog box. After a full audit, we 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. We preserved a small number of content specific icons as necessary exceptions where customers were already very familiar with them. To finish the job, we 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
State-based iconography, with exceptions for frequently used icons
New confirmation dialog component build
Reusable modal presets with standardized language
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.
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.