Jessi Contreras

The Challenge

Keen’s rapid expansion resulted in significant "design debt." With three independent product teams building in silos, the platform suffered from fragmented UI, redundant engineering efforts, and accessibility gaps.

I was tasked with architecting Clarity, a centralized design system designed to:

• Synchronize Workflows: Align Design and Engineering via a shared source of truth.
• Guarantee Responsiveness: Ensure that the Design System components would work well for designers for both desktop an mobile flows.
• Guarantee Accessibility: Ensure 100% compliance with WCAG AA standards.
• Optimize Velocity: Eliminate "reinventing the wheel" for every new feature.

My Leadership Impact

As the Design Systems Lead, I didn’t just build components, I defined the governance model for how design and engineering collaborate.

• Audit & Strategy: Analyzed 80+ screens to identify core patterns and consolidate visual debt.
• Architecture: Defined the token strategy (Color, Spacing, Typography) to support a platform-wide rebrand.
• Engineering Bridge: Co-authored the component specs for Storybook implementation, ensuring 1:1 parity between design and code.
• Change Management: Facilitated team-wide workshops to ensure high adoption rates and long-term system health.

Inventory & The Fragmentation Gap

Before building, I conducted a comprehensive audit of the Keen ecosystem to quantify our design debt.

Findings:

• Inconsistent use of typography, colors, and spacing
• Redundant components across teams
• Lack of responsive or accessible design considerations

This visual debt made clear the need for a centralized system that could scale alongside the product roadmap.

System Architecture: Tokens & Logic

I built Clarity using Atomic Design principles to ensure the system was more than just a UI kit, but a flexible, living language designed to support future branding shifts and dark-mode implementation.

• Established the "source of truth" for the system by defining tokens for color, spacing, and typography. This ensures that any global change (like a rebrand) can be pushed across the entire ecosystem instantly.

• Anchored the system in Material Design 2 guidelines and strictly enforced WCAG AA accessibility standards from the foundation up.

• Built a library of responsive components in Figma. Every atom and molecule was designed with defined patterns for interactions, hover states, and responsiveness to ensure a seamless handoff to engineering.

Rebrand Evolution & Validation

When Keen underwent a rebrand, I leveraged the existing system architecture to pivot the visual identity efficiently. I acted as the bridge between the new brand vision and functional UX, using testing to ensure the transition was seamless for our users.

• Updated the global design tokens to reflect the new brand identity, allowing for a rapid visual refresh across all components while maintaining the underlying logic and spacing.

• Led targeted user sessions to validate the new direction, focusing specifically on visual clarity, accessibility, and cross-device readability.

• Identified inconsistencies in font sizing across devices. I recalibrated the typographic scale to guarantee legibility and a consistent hierarchy from mobile to desktop.
• While users favored the modern aesthetic, testing revealed confusion with specific action colors. I adjusted the palette to ensure semantic clarity.

Collaboration with Engineering

From the start, I partnered with frontend engineers to ensure design–dev alignment:

• We used shared naming conventions across Figma and Storybook
• Held weekly syncs to review components and catch inconsistencies early
• Aligned on handoff standards to reduce implementation ambiguity

All documentation, including usage guidance, edge case notes, and developer specs, was embedded in Figma, making the system accessible and intuitive for both designers and engineers.

Outcomes

Clarity became the source of truth for all product teams, with measurable improvements:

✅ 90% reduction in duplicate Figma components

✅ 40% faster design-to-dev handoff time

✅ Consistent, reusable components adopted across 3 products

✅ A maintainable, evolving system that continues to scale with the product

What I learned

This project reinforced how critical early collaboration is to building scalable systems. By involving engineers from the start and investing in thorough documentation, we were able to streamline workflows and reduce friction.

If I were to approach this again, I’d involve stakeholders even earlier to accelerate alignment and adoption across departments.