A CODE FIRST DESIGN SYSTEM
BlueLayer needed to build fast and scale. Misalignment wasn’t just at design handoff, it also existed within engineering, where individuals lacked clarity on what components existed versus what needed to be built.
I formed and led a cross-functional design systems working group, bringing engineers into the process to establish a code-first system as the single source of truth.
The Challenge
We started the design system journey one year into building BlueLayer. During this time, the product has already accumulated a number of overlapping components and variants.
Within the team, different names were also used to describe similar UI patterns (e.g Dropdowns or select inputs? Pills or badges?). Time spent on alignment meetings was increasing, and design-engineering hand-offs become more confusing.
The Solutions
I brought together a small, core design system group of engineers to align the design system in Figma and in Storybook, ensuring component properties, variables and tokens were mapped as closely as possible to code.
We tackled this design system initiative component by component, taking a detailed approach to stocktake all the existing components across the product, and align on a shared vernacular and properties.
Components were also pressure-tested them against known and anticipated future scenarios. Thereafter, we set clear guidelines around each component’s usage to keep it well-defined yet flexible.
To drive adoption, we linked production-ready components in Figma directly to their corresponding Storybook entries and shared frequent updates with the wider team on newly released or updated components.
Impact
- Reduced design-engineering handover time
- Removed need to design annotations and labelling inside Figma files
- Improved speed of UI updates and bug fixes by making changes at the component level rather than across multiple screens
- Faster onboarding—new designers can contribute meaningful work within their first week
My role
- Chair of Working group
- Overall in charge of DS governance and design
About this company
Bluelayer.io
Founding product designer
Oct 2022 - Jan 2026
BlueLayer is an inventory, revenue, and data management platform for carbon project developers.
The main user of BlueLayer is the operations manager who oversees this lifecycle end to end—coordinating with finance and sales to calculate availability, revenue forecasts, manage delivery, and report to leadership.
I partnered closely with the founders to shape product direction while staying close to the design craft, establishing strong design foundations and UX quality to scale quickly.
I contributed to 30+ features and iterations, helping secure 30+ enterprise paying customers in a short period of time of 2 years.
About carbon projects
Projects vastly vary in size, footprint and complexity, with budgets ranging from $10m for some of the smaller, agroforestry projects, to over $30bn for flagship Bio-energy projects.
Managing the credit lifecycle of a carbon project is complex and variable. Projects often have very long horizons, sometimes spanning over 40 years, with multiple phases of development starting with project design, moving through phases of validation, registration and implementation and then ending with lengthy periods where credits are issued.