From three component libraries to one design system

When I joined Fadata, the InsureKit application already had a design, but it was full of inconsistencies. Every screen looked different, developers built screens from scratch with mixed components, and new features were slow to design and implement.

What started as an initiative to build a component library grew into a scalable design system aligned with the business needs. It standardised our design practices, improved the collaboration between design, development and QA, and made the whole product consistent.

After the introduction of the design system, the speed of producing new screens increased by up to 60%.

• Up to 60% faster creation of new screens
• From 12 to 4 clicks to generate a report
• Positive feedback from developers and product owners

01 · Research – 2 weeks Interviews with product owners, developers, QA and end users.

02 · Design & test – 4 weeks Component library, reusable templates and patterns, moderated usability testing.

03 · Implement – 1 week Figma Dev Mode connected to Visual Studio Code, component sections linked to code snippets.

04 · Adopt Workshops with developers, presentations to stakeholders and regular Design & QA sessions.

Before the design system, Fadata had three inconsistent component libraries: two in Axure RP and one in Adobe XD. They were originally built for Angular, but the front-end framework changed to React.

The result was a product where each screen looked different. Developers built every screen from scratch using mixed components and a lot of custom CSS, and there were browser support issues.

The challenges came from two sides:

Internal

• Product owners were frustrated with the slow design process
• Developers struggled to implement new designs efficiently, which often resulted in visual bugs
• QA found testing difficult because of the inconsistency

External

• End users reported complex flows, an inconsistent and sometimes broken UI and confusing patterns
• The biggest pain was the data grid: no column customisation, overly complex search and filtering, and unclear export options for reports and files

Our product owners also didn't know much about what a design system is and how it can help the whole organisation.

I started with user research with both internal stakeholders (product owners, developers and QA) and external stakeholders (end users). This helped me identify the most critical pain points and inefficiencies in the existing system.

My goal was not only to build a design system, but to create design standards: one visual language adopted across the whole organisation.

I created a consistent component library aligned with the React MUI framework and presented it to our product owners, developers and QA team.

Foundations

Components

Building on this foundation, I created interactive prototypes with reusable templates and design patterns for the key elements of the product.

Insurance dashboard

Claims management table

First notice of loss

Task management board

Insurance product advisor

Claim payments

Basic search

Advanced search

Validating with users

I validated the prototypes in moderated usability testing sessions, where participants completed simple scenarios using the new components and templates.

Fixing the data grid

For the data grids, I introduced column customisation, improved filters and search and optimised report exports. Generating a single report now takes 4 clicks instead of 12.

Data tables

Connecting design and code

The component library was integrated through Figma Dev Mode with Visual Studio Code. I linked component sections to MUI X code snippets and extracted the styles, so developers no longer had to guess styles, colours and fonts. This made implementation faster and significantly reduced visual bugs.

Presenting the new design system across the organisation was a key factor for its success. It also gave me valuable feedback from colleagues and stakeholders.

• 3 workshops (1.5 hours each) with developers on design implementation, reusable templates and the use of variables
• 2 presentations (1.5 hours each) to stakeholders
• Publishing the design system on the UX team page in the company portal

Our product owners appreciated the faster design process, and developers welcomed the integration with Visual Studio Code.

• The speed of producing new screens increased by up to 60%
• Generating a report takes 4 clicks instead of 12
• Developers shared very positive feedback about the integration with code and styles
• Product owners enjoy the faster design process and better consistency

Together with the QA team we started weekly Design & QA workshops, focusing on usability, accessibility, consistency, logic, compatibility and performance in the testing process. Once we solved the major UI and UX problems, we moved the workshops to every two weeks, at the end of each sprint.

One of my biggest learnings from this project was that improving the user experience is not a single design task, but a step-by-step, collaborative process. Fadata had three inconsistent component libraries, and product owners, developers and QA each felt the problem in a different way. I involved all of them from the start: interviews during the research, 3 workshops with developers, 2 presentations to stakeholders and regular Design & QA sessions.

This reinforced that the biggest improvements go beyond the product itself, to the workflows and processes of the teams who build it. By approaching their challenges with empathy, connecting the components to code in Visual Studio Code and bringing design reviews into every sprint, the design system became part of how the teams work.

As a result, the speed of producing new screens increased by up to 60%, and generating a report now takes 4 clicks instead of 12.