Build a scalable Design System

Swydo is a powerful and user-friendly platform that helps marketers streamline reporting and monitoring. By automating client reporting, it eliminates time-consuming manual tasks, delivering insights through PDF reports and live dashboards.

However, Swydo’s Design System lacked alignment, with components scattered across multiple sources, leading to inefficiencies and delays. To solve this, our team restructured the Design System into a single source of truth, enhancing workflow, collaboration, and scalability. We introduced a modular approach based on Atomic Design principles, implemented a clear branching process, and ensured seamless alignment between design and development, accelerating feature delivery.

Company

Industry

Team

Role

2 Designers, 2 Devs

Product Designer

Marketing Analytics Software

Main Challenge

Fragmented design setup led to misalignment between design and development

When I joined Swydo’s App Experience team, I quickly noticed a recurring bottleneck in our workflow. Our design process revolved around three disconnected touch-points:

  1. Tulip Design System: a Figma file containing foundational elements (colours, typography, components).

  2. Spec File: a repository of product screens, which often lacked updates.

  3. Storybook Website: a library of coded components, frequently misaligned with the design files.


With the Design Team growth, this fragmented setup led to misalignment between design and development:

  • The Spec file was outdated and did not reflect the actual product.

  • The Tulip Design System and Storybook components were out of sync, leading to constant iterations and delays in feature delivery.

  • The lack of a single source of truth caused friction between designers, developers, and product managers.

Strategy

To address these challenges, the design team initiated collaborative workshops with developers from each team and the Head of Product. Our goal was clear:

  1. Reduce Fragmentation

  2. Create a single source of truth for design and development.

  3. Establish a structured workflow that streamlined updates.

The Execution

Our first step was a comprehensive audit of product variables and components to identify inconsistencies and inefficiencies. Drawing inspiration from Atomic Design principles, we restructured the Design System into three interconnected Figma files, integrating variable tokens for greater consistency and scalability.

Why this worked:

  • It enabled a modular approach to component changes.

  • Designers could branch the master file, get feedback, and merge updates seamlessly.

  • A clear cross-functional process ensured alignment between design and development.

Variables tokens

Reusable values (e.g., colours, spacing, typography) that ensure consistency and scalability across a design system.

Foundations

Core UI elements (colors, typography, buttons, inputs, etc).

Essentials

Small reusable components (text fields, drop-down, toggles, etc).

Compositions

Larger interface sections (headers, navigation bars, etc).

Result & Impact

Product Evolution

This transformation dramatically improved our workflow:

  • Faster feature delivery – fewer design-development inconsistencies.

  • Clear ownership – every change followed an organised branching process.

  • Increased collaboration – developers and designers worked in sync.

By streamlining our workflow, we turned a fragmented system into a well-structured, scalable design process, improving efficiency across teams.

Testimonials

  • Myrto Stoop

    Working with Domenico was a pleasure. He’s an empathetic designer who genuinely cares for the team and product. As a good listener, he asks the right questions to solve problems and offer thoughtful feedback. Our co-creating sessions were productive, and he helped me sharpen my UX projects. He’s an ideal colleague and mentor.

    Myrto Stoop
    Senior UX designer, Swydo

Next

Real Time Video Experience