As a Senior Product Designer, I was tasked with evolving a consumer-facing design system that had been initially handed off by a branding agency. While the system included a foundational visual identity and a handful of UI patterns, it lacked accessibility, consistency, and functional depth. My role was to lead a comprehensive audit and redesign, refining patterns, aligning with WCAG standards, and ensuring the system was usable, scalable, and focused on real product needs.
The handed-over design system was built with a branding-first mindset, visually striking, but lacking the utility, consistency, and inclusivity required for real-world product use. Key components were either under-defined, overly complex, or missing entirely. Accessibility compliance was minimal. My challenge was to transform this visual system into a living, breathing product design system that would empower teams to ship consistent, accessible interfaces efficiently.
I conducted the full audit of the inherited system, comparing it to live product usage and accessibility standards to identify gaps and redundancies.
I began by auditing the agency-delivered color palettes, type scales, and components, cross-referencing them with existing product UIs to uncover gaps, redundancies, and accessibility issues. To clarify what was truly valuable, I created a component inventory and usability map across consumer products, collaborating with product teams to identify which components supported real use cases versus those that created unnecessary complexity. This process laid the groundwork for rationalizing the system and aligning it with actual product needs.
Key takeaways
I defined new accessibility specs (WCAG 2.1 AA), rebuilt foundational components, and partnered with engineering to validate them through screen reader and keyboard testing.
I rebuilt the core components, starting with button states, focus styles, and form inputs, applying WCAG 2.1 AA standards to ensure accessibility. Each update was documented with clear rationale and implementation guidance for developers. I standardized form field anatomy and defined consistent specs for focus, hover, and active states, collaborating closely with QA and engineering to validate the changes through screen reader and keyboard testing.
Key takeaways
The original system bundled success messages, warnings, banners, and error states into a single vague component with no clear structure or usage guidelines. Designers often improvised one-off solutions, leading to inconsistent visuals, accessibility issues, and dev handoff confusion.
My role
I began by reviewing alert usage across existing products to identify common pain points and edge cases. From there, I created a taxonomy of message types (e.g., inline alerts, toast notifications, banners) based on user context and urgency.
I built scalable Figma components using variants and properties, ensuring ease of use for designers and parity with frontend implementation.
I designed the new alert system as a modular, flexible component with a consistent foundation and clear usage rules. Each alert included built-in support for:
I used Figma variants and component properties to make this system intuitive for designers to use and developers to implement. Properties included:
The result was a scalable, accessible alert system that met WCAG 2.1 AA standards, integrated smoothly into the existing design system, and was adopted quickly across product teams. Developers appreciated the clean logic and flexibility, while designers now had a reliable, pre-built solution for communicating key system messages without reinventing the wheel.
This project was a powerful reminder that a design system isn’t just a toolkit, it’s a shared language between design, engineering, and product. Turning a branding-first system into a functional, accessible foundation required refinement, cross-functional trust, and ongoing collaboration. I gained a deeper appreciation for the role of governance, documentation, and education in driving adoption at scale.
If I could go back, I’d invest even earlier in cross-team rituals to align on priorities and accelerate rollout. Still, the result was a system that empowered product teams to work faster, design more consistently, and create more inclusive experiences, proving that thoughtful systems work is a multiplier for product quality and team velocity.