Design System for B2B SaaS Platform

Built a scalable atomic design system from the ground up, replacing a fragmented workflow and dramatically reducing the back-and-forth between design and development.

Headquarters

Switzerland

Founded

2006

Industry

Private Aviation

Challenge

Before implementing a design system, I rebuilt components from scratch and manually updated every screen whenever something changed.

After each release, I also had to check the software against the Figma screens and log any discrepancies as “bugs” in our Azure DevOps board. This time-consuming, error-prone process slowed down design cycles and created mismatches across the product.

Process

I began with a full audit of the software, uncovering numerous inconsistencies across components and styles. After researching design system methodologies, I chose the atomic design approach, as it provided the flexibility to scale with the client’s growth.

To align stakeholders, I ran meetings with the product team to share audit findings, agree on priorities, and outline my next steps. I then built the system in Figma, leveraging component libraries, variants, and styles to create a centralized, living system. To ensure clarity and collaboration, I also documented guidelines and tasks in Azure DevOps.

To address these issues, I began with a full audit of the software, identifying numerous inconsistencies across components and styles. After the audit, I conducted research into best practices for building design systems, exploring different methodologies. Considering the client’s industry-specific needs and future growth plans, I chose the atomic design approach. This allowed me to break the system down into reusable elements (atoms, molecules, organisms) that could easily scale as the software evolved.

I built the design system in Figma, leveraging component libraries, variants, and styles to create a centralized, living system. Throughout the process, I documented usage guidelines and tasks using Azure DevOps to ensure clarity for product owners and developers.

Results

The design system eliminated redundant work and standardized styles, allowing me to create new screens much faster and with greater consistency. Developers benefited from clearer guidelines and smoother handoffs, which reduced rework and improved collaboration.

Once implemented, the need for clarification from developers dropped by 75%, the DevOps task burn-down showed a 52% decrease at the end of our two week sprint, and the development team reported a 30% increase in productivity, with fewer iterations required after releases.

What I'd carry forward

A few things I took away from building this system.

The audit was the unlock. It revealed not just how many inconsistencies existed, but where they were costing the most, which made it easy to align stakeholders on priorities before I'd designed a single component. Without that step, the work would've been a much harder sell.

Atomic design was the right call for this product's growth stage. It gave the team a system that could scale with the platform rather than being rebuilt every six months, and it created a shared vocabulary between design and engineering that paid off immediately in faster handoffs.

The thing I'd carry into the next system: a short consolidation workshop with the product team at the start. Many of the existing components were built too narrowly over the years, and a leaner set of flexible primitives would've made the whole system faster to adopt and cheaper to maintain. Design systems are as much a governance problem as a design one, and I'd lean further into that next time.