Design System
Built and led adoption of a scalable design system from the ground up — from token architecture to cross-team implementation across multiple products.
The Challenge
Upon joining Teamworks, there was no design system in place — leading to fragmented design patterns, lack of consistency, low brand recognition, and time-consuming design and development processes.
Every team was making independent decisions. The product had grown in multiple directions without a shared foundation. The main challenge was creating a system usable across multiple products while maintaining consistency and significantly speeding up design and development.
A design system isn't a Figma library. It's a shared language — and building one means getting everyone to speak it.
Understanding the Problem
I looked into existing designs, uncovering pain points and identifying common patterns used by each product team. I mapped user journeys to understand how users interacted with different products, highlighting areas where inconsistency created real friction.
Based on my findings, I established overarching design principles and guidelines to ensure consistency and alignment across all products before a single component was designed.
Existing dropdown patterns — inconsistent across products
Unified color system
The Solution
I created a library of reusable components and design patterns — a pre-built toolbox for faster, more efficient design. The system used a modular approach, empowering product teams to customize components to their specific needs while maintaining overall consistency.
A unified system for color palettes, typography, and iconography ensured visual harmony and brand recognition across all products. Comprehensive documentation explained the system, its components, and usage guidelines — fostering understanding and adoption across every team.
Component library overview
Notemeal implementation
Testing & Validation
The system was implemented across various products simultaneously, with feedback loops built into each stage. Multi-product testing revealed edge cases that needed addressing. Workshops with product teams ensured adoption and surfaced real-world usage patterns that refined the system further.
Dashboard — open navigation
Active workflow view
Iteration & Polish
Adoption was the hardest part. The system only worked if teams used it. I ran workshops, created documentation, and worked directly with engineers to smooth the implementation process. Over time the modular approach proved its value — teams could move faster while the product remained coherent.
Templates view — system in production
The Outcome
Quality improved across all products while design and development time decreased significantly. Reusable components and a streamlined process led to major efficiency gains. Users experienced a seamless and familiar journey across all products, enhancing brand perception.
The design system became the cornerstone of our design process — transforming fragmented experiences into a cohesive, efficient ecosystem. Freed from repetitive component work, the design team could focus on higher-level strategic efforts.