The Challenge

The challenge I faced in the marketing design team was a disconnect between designers and developers. UI components, such as buttons, cards, and accordions, were frequently changed without proper alignment, forcing developers to re-code components from scratch. There was no shared system or visual source of truth.

I then interviewed my design group (1 art director, 5 visual designers, 2 developers and 4 UX designers from the product team), some of the intersting findings:

Challenges That Sparked Change

The research and internal voice interview led to recurring challenges:


• Tight dev deadlines made it hard to keep up with shifting designs

• Inconsistent visual language across pages and platforms, including PowerPoint Decks and the product UI pages

• No reusable library, so designers often duplicated work

• Lack of naming standards caused confusion and bloated Figma files

• Reduce the QA tickets by 80%

• Ensure consistency across 90% of the product UI
  

In parallel with addressing these challenges, our team was also developing new feature pages. As we explored fresh layouts and structures, it became a natural opportunity to revisit our brand color system and establish a centralized component library to support future scalability and visual consistency.

Research & Foundation

I began by auditing our existing design patterns, breaking down live pages into individual UI components for a high-level overview. To gain technical alignment, I collaborated with a front-end developer to extract all UI variables currently in use. This wasn’t a one-time effort—we approached it iteratively, reviewing and documenting components one by one.

Primitives

Establishing the design system foundation was critical to ensure consistency, scalability, and alignment across teams. Here’s how I approached it, step by step:

Establish Token Primitives
I created a token structure in Figma to standardize core values like color, typography, spacing, elevation, and border radius. These tokens were mapped to development variables to maintain alignment with code.

Key Features

To support brand scalability and theming flexibility, I established a centralized design token system in Figma and synced it with code via a naming convention shared with developers. Tokens were organized into categories like color, typography, spacing, and radius—making it easy to switch between light and dark themes, or adapt branding for partner pages. This system ensured visual consistency and reduced redundant styling work across the design and engineering teams.

Built a centralized component library to support product, marketing, and development teams
I designed and structured a new Figma library from the ground up to unify UI components across product and marketing initiatives. The system included standardized components, auto layout rules, and documentation for usage and behavior—making it easier for designers to stay consistent, marketers to adapt quickly, and developers to implement with fewer back-and-forths. This shared library became a single source of truth, reducing duplicated effort and accelerating our design-to-dev handoff.

Aftermath

The launch of the design system significantly improved cross-functional collaboration and product quality. With a shared component library and clearly defined tokens, designers were able to move faster and stay aligned, while developers gained a more predictable and reusable set of building blocks. Key outcomes included:

• 80% faster design-to-dev handoff due to reusable components and consistent documentation

• Increased visual consistency across marketing pages and product flows

• Reduced redundant design work, freeing up time for new feature exploration

• Improved accessibility compliance, with WCAG AA standards built into components

• Stronger team alignment, as product, marketing, and engineering began working from a unified source of truth