Jessi Contreras

Keen.com – Clarity Design System

A scalable, accessible system that unified three product teams, improved consistency, and reduced design–developer handoff time by 40%.

Role: UX Lead & Design Systems Lead

Team: 1 PM, 2 Designers, 3 Engineers

Timeline: 12 months

Tools: Figma, Storybook, Jira, Adobe CS

Project Overview

As Keen expanded its platform, fragmented design approaches across teams led to inconsistent UI, duplicated efforts, and time-consuming handoffs. There was no unified design language or shared component library — every team had been building independently.


We needed to:

  • • Align design and engineering across 3 products
  • • Raise the bar on accessibility
  • • Eliminate duplication and inefficiencies
  • • Build a foundation for scalable, maintainable design


  • I led the creation of Clarity, Keen’s first responsive design system — from audit through implementation and adoption.

My Role


As UX and Design Systems Lead, I:


  • • Conducted a full design audit across 80+ screens
  • • Defined design tokens, spacing, typography, and accessibility standards
  • • Built and maintained the Figma component library
  • • Partnered with engineering to implement components in Storybook
  • • Led education and documentation efforts to support long-term team adoption

Audit & Discovery

I began by reviewing all existing UI screens across the platform. The audit revealed:


  • • 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


Using Atomic Design principles, I created a system grounded in:

  • • Material Design 2 guidelines
  • • WCAG AA accessibility standards
  • • Modular, reusable components with responsive behavior


This included foundational work like:

  • • Establishing design tokens for color, spacing, and typography
  • • Building accessible components in Figma
  • • Defining clear patterns for states, interactions, and responsiveness


Rebrand + User Testing


As Keen rebranded, I worked on adapting foundational elements for the new look and feel.


To validate the direction, I conducted user testing focused on:

  • • Visual clarity and accessibility of the new color palette
  • • Readability and consistency of new font choices across devices


Key findings:

  • • Users liked the modern direction, but initially found some color choices confusing
  • • Font sizing lacked consistency; we adjusted type scales for better readability


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.