Scalable Design system
Creating a shared design language to bring consistency, efficiency and scalability across Screening Eagle’s digital products
Role: Product Designer
Focus: Design Systems · UX/UI · Design Research · Design & Engineering Collaboration
Context
Screening Eagle develops technology for intelligent inspection of the built environment, combining software, sensors and data to help professionals inspect and assess infrastructure and other assets.
Its ecosystem includes complex digital workflows and specialised tools, making consistency and scalability particularly important across its products.
The challenge
As Screening Eagle's digital products evolved, different patterns and components were being created across products.
I was responsible for creating a scalable design system that could provide a shared visual and interaction language for designers and engineers, while making it easier to create and evolve new product experiences.
The project involved researching existing patterns and established design systems, collaborating closely with designers and engineers, and creating the system from its foundations through to documentation and implementation.
From research to system
Before designing individual components, I researched existing patterns and studied established design systems to understand how they approached foundations, component structure, states, behaviours and documentation.
Working with designers and engineers, I translated those learnings into a system tailored to Screening Eagle's products and technical requirements.
Foundations
The system started with a set of shared foundations that defined how the interface should look and behave.
These included typography, colour, spacing and other visual principles that could be consistently applied across products.
Building the component library
With the foundations established, I created the core component library, defining not only how each component looked, but also its variants, states, behaviours and usage.
The library covered:
Buttons · Spinners · Checkboxes · Radio buttons · Switches · Inputs · Search · Number fields · Text areas · Tooltips · Toasts · Banners · Modals · Sliders · Selects · Dropdowns · Sidebars · Tables · Pagination · Tags · Dividers
A repeatable process for new components
As the system evolved, I created a repeatable process for introducing new components.
New patterns were evaluated against existing components before being added, helping prevent unnecessary duplication and keeping the system coherent as it grew.
Research → Define → Design → Review → Document → Release
The process ensured that new components were driven by a clear need, validated with the team and fully documented before becoming part of the system.
One source of truth
A design system only creates value when teams can easily understand and use it.
To make the system accessible beyond individual Figma files, I designed a centralised documentation experience based on Storybook, bringing the complete component library, specifications and usage guidelines together in one place.
I created a high-fidelity Figma prototype that mirrors how the Storybook environment could work, allowing designers and engineers to browse components, explore their states and variants, and access the documentation they need.
The result was a single, structured source of truth for the design system — designed to support both current use and future implementation.
From system to product
The design system was applied to real product experiences, bringing consistency to interfaces while allowing individual products to respond to their specific needs.
The result
The outcome was more than a component library.
It became a shared foundation for design and development, combining reusable components, consistent interaction patterns, documentation and a structured process for continued evolution.
This project reinforced that a design system is a product in itself — one that needs structure, collaboration and continuous iteration to scale effectively.