The library we had

Duetto already had a component library built for Webpack, but over time it had become difficult to manage. Components were poorly organised, hard to find, and many had been created for a single use case, which meant they could not easily be reused.

The library was also difficult to maintain. Engineering didn’t have the capacity to continuously update it to reflect the components and patterns being designed in Figma, creating a gap between design and development.

We also still have pages running on our legacy Monolith system, with components that aren’t currently represented in Storybook. This means we effectively have multiple sources of truth and different approaches to building and maintaining UI.

Designers coding the components

We’re changing this by putting designers much closer to the component-building process.

The lead developer and I have established a workflow where designers build components directly in a prototypes area of Storybook. Components can be designed, tested and reviewed there before being approved and promoted to production-ready code.

This gives designers greater ownership over how components work and look, while also creating a closer connection between design and development.

Introducing BLAST

The longer-term goal is to bring everything together into a new system called BLAST (Build Like A Startup).

BLAST will provide a new component library and a new way of working. As we migrate away from both Monolith and Webpack, designers will build new and migrated components in the Storybook prototypes environment as part of the process.

Rather than recreating components separately in Figma and then handing them over to engineering, the component is built once, reviewed and then made production-ready.

Over time, this will give us a single, reusable component library that can support the migration of existing pages while also providing the foundation for new product development.

Less handover, more ownership

This shortens the path between design and development. There is less to hand over because the component already exists in Storybook, and designers have greater control over both the component itself and how the library is structured.

It also makes components easier to discover and reuse, reducing duplication and helping us build a more consistent product.

The aim is to move from maintaining multiple, disconnected libraries towards one shared, living component library in BLAST, built collaboratively by design and engineering and continuously evolving with the product.