Insights Design System
As a UX designer at Insights, I’ve been focused on modernising our design system — rebuilding it from the ground up and working closely with engineers to ensure consistency and scalability across products.
Part 1/4
Project overview
As Insights expanded its product offerings, it became clear that the lack of a cohesive design system was holding teams back. Inconsistent components, duplicated patterns, and unclear standards were creating unnecessary friction across design and engineering. This project set out to re-establish a shared foundation — one that would reduce design debt, improve delivery speed, and support a more unified product experience across both new and established platforms.
Tools used
Figma
Storybook
VS Code
Design system audit
We started with a cross-functional audit of components across products, working closely with engineering and product to map inconsistencies. It quickly became clear the design system lacked structure and consistency. Developers were often referencing outdated files, leading to misaligned builds and duplicated effort.
Design tokens and variables
Following atomic design principles, we began by defining the primitive layer — foundational values like colour, spacing, and typography variables. These base tokens formed the building blocks of the new design system and set the stage for consistent theming and component styling going forward.
Component design
We redesigned and repurposed components, aligning them with the dev backlog and Storybook library. With a solid primitive layer in place, we were able to scale updates efficiently — including support for dark mode and high contrast themes.
Design & dev alignment
Implementation is still ongoing as Insights continues to expand its product suite. A key part of the process has been supporting developers during integration — with design QA playing a crucial role in ensuring consistency, accessibility, and accuracy.
Part 2/4
Design process
This initiative is still ongoing and complex, extending well beyond the UX and design team. We made a conscious effort to align our design system work with broader business goals — not just improving UI, but enabling faster, more consistent delivery. Our mission was simple: reduce friction from idea to customer.
Advanced Figma
Variables, conditonal logic
Design system
Components, patterns, visual design
Engineering support
Design QA, Developer collaboration
Reducing friction from idea to delivery was a key focus for the business. Alongside a broader push to improve digital experiences, we identified a growing issue: technical and design debt caused by inconsistent standards across our design and component libraries. Without a unified system, developer time was often spent fixing avoidable issues — slowing down delivery and limiting our ability to iterate, test, and optimise at speed.
Assessed existing components across multiple products for inconsistency and gaps
Used Storybook and Figma analytics to identify most-used/duplicated patterns
Partnered with PMs to map design system updates to roadmap goals
Rolled out core primitives and components with documentation and then layer up to component and full-page templates
Monitored improvements in delivery speed and UI consistency
As a senior designer at Insights, I helped shape the design system used across both mature products and early-stage concepts. Rather than treating it as a static asset, we positioned the system as a strategic tool to reduce friction across teams and scale quality UI.
We implemented a flexible token structure that allowed us to scale changes consistently across colour, layout, and components.
Part 3/4
System enhancements
Improving the design system also played a key role in supporting new business initiatives — from enabling right-to-left layouts, to theming for dark and high contrast modes, and simplifying responsive builds across screen sizes.
Variable themes
We successfully scaled dark mode and high contrast components across the entire product UI — creating a flexible foundation that can support future products right out of the box.
Integrated responsiveness
By defining variables down to the atomic level, we were able to automate responsive behaviour — adjusting spacing and typography tokens dynamically across breakpoints without manual overrides.
Part 4/4
Next steps
Increase component coverage
We’ve reached a point where the core foundations are in place, and the bulk of the work is complete. Our focus has now shifted to increasing component coverage and closely supporting front-end engineers as they implement and extend the system.
Full-page templates
We’re also developing full-page templates to extend the design system’s utility beyond product, supporting teams like marketing and partnerships. By introducing flexible ‘slot’ components, we’re enabling other teams to create on-brand assets with ease and consistency — without reinventing the wheel.