The case study of merging Fabuwood's multiple design systems into a single source of truth.

History

Fabuwood tech designs, develops, and maintains internal and external web apps, mobile apps, and sites. Over the past few years, designers and FE engineers in Fabuwood have slowly built up style guides and component libraries for each application and site alongside real projects. Today, designers and FE engineers are maintaining and building multiple sets of style guides and component libraries.

Problem

The design and development teams were recently restructured into small, cross functional product teams and are experiencing several challenges:

• Teams reinvent the wheel and spend time on problems that were already solved by other product teams

• Knowledge is scattered so best practices are difficult to discover

• Design and code are not usable across teams

• There is no central resource or team with the responsibility to help join UX, UI, and technical underpinnings across projectshere...

Solution

It has become more critical than ever to merge the Fabuwood suite of style guides and component libraries into a single source of truth for all product teams to benefit from. The teams will work faster, design better, and focus on new problems instead of rehashing the old.

Design system merge

Embracing the challenge, the design systems team decided to test the concept of merging multiple existing design systems into a single design system. Additionally, they wished to test building theming options into each component since the components would be used in multiple apps and sites with different themes.

They chose to test with a common use case—the listing page—that repeats itself in multiple applications and followed the audit process in order to extract common components.

There were 5 extracted duplicate components:

1. Search

2. Header

3. Tabs

4. Filters

5. Icon button

The team placed the duplicate components side by side to examine and compare similarities and differences.

Through collaboration between the designers and FE engineers, decisions were made and duplicate components were merged into single components.

From the development side, an angular library with the coded components was created and published as an npm package.

Theming

Theming options were also added to enable designers and FE engineers to select the theme for a component based on the app or site that the component is being used in.

Implementation

The original components on the pilot listing pages were replaced with the new single components from the design system library both in design and code, and the proper themes were selected for each. This proved the effectiveness of the design system, as the components integrated seamlessly into each pilot page.

Component change test

To further test the new design system, the team decided to create a change in one of the components and observe how the change gets applied across multiple apps and sites. They chose to add an icon button into the header component to serve as a back button. The change caused the header component to update seamlessly in all locations it was being used in, including the listing page.

The value of a single design system is immeasurable for the designers and FE engineers in Fabuwood.

Reference site

Listing page case study

Impact

Since the team had hands on experience with the day to day challenges of working with multiple design systems, the value of condensing them all into a single design system was an obvious solution that would bring instant benefits to the teams and Fabuwood as a company.

Next steps

The design systems team is looking forward to building on the success of the design system merge test to conduct full audits of each app and site and continue merging the rest of the styles and components into a single source of truth for all product teams to benefit from across Fabuwood.