Adding Search to Hierarchical Filters

Company: ClimatePartner

Role: Design Systems Engineer

Date: January 2025

Challenge

There was little communication between engineering and design, resulting in inconsistency across products. Designers frequently detached components in Figma, leading to designs that drifted away from the design system. Engineers would then interpret these designs and apply custom styling until things “looked right,” which led to a patchwork of one-off solutions and hard-to-maintain code.

Solution

We formed a dedicated design system team and created a new, unified design system. Our goal was to make it simple, scalable, and easy for both designers and engineers to adopt. We also set up education and processes to ensure the system would be followed moving forward.

Process

  1. Build New Design System

  2. Migrate Codebase

  3. Educate & Maintain

Step 1: Build the New Design System

I collaborated closely with our design systems engineer to create a new Figma library with all the MUI components we needed, keeping it intentionally simple with only a few highly customized components. We documented detailed use cases and tagged specific products where custom components applied.

Designers then rebuilt their product files using these components without detaching them, which allowed us to maintain consistency across designs.

Outcome

All Figma files now use components from the new design system, creating a single source of truth for design.

Step 2: Migrate the Codebase

As the lead engineer for this project, I coordinated with each team by assigning engineers to remove all custom styles from their products to establish a clean baseline. We then applied the new theme to see the true state of the UI.

We chose the Analytics Dashboard as the first product to migrate since it included a good mix of icons, charts, and customized components. This step was challenging — we had to work through new breakpoints, layout shifts, and components that didn’t yet exist in the design system. This required close communication between design and engineering to iterate on solutions that worked for everyone.

Outcome

The Analytics Dashboard successfully migrated to the new design system while maintaining its desired look and feel.

Step 3: Educate & Maintain

To prevent regression, I led workshops for engineers on the benefits of using a design system and how to read Figma files effectively. We emphasized collaboration with designers and encouraged engineers to raise concerns early, before adding custom styling.

We also established a shared component repository where highly customized components live. Engineers can now pull directly from this repository, ensuring they are only written once and remain consistent across products.

Outcome

All products have now migrated to the new design system, with processes in place to maintain alignment going forward.

Results

This project created a single source of truth for both designers and engineers, improving collaboration and eliminating inconsistencies across products. By leading both the design and engineering efforts, I helped deliver a system that is scalable, easy to maintain, and future-proof.

Today, every product at the company uses the new design system, engineers have a clear process for implementing changes, and designers can confidently build new features knowing they will look and function consistently across the platform.