Design Systems · Overview · Shipped

Design Systems · Overview · Shipped

Revamping a multi-brand
visual system

Revamping a multi-brand visual system

During my internship with Intact’s Design System, I audited the visual system and analyzed the component usage. I then stayed on the team and took the lead in shipping a library revamp.

The Clue add-on on desktop and mobile.


Sep 2023 - Mar 2024


Me + 1 design manager + 1 design system lead + 3 visual designers

My role

Systems designer,




Starting from Fall of 2023, I had a blast working as a Design system intern at Intact. I then stayed on and supported the design system by taking the lead on the revamp of the visual library as an effort of a white label initiative to integrate new brands. I wanted to share my learnings as well as the results of this project.


The visual library had a hard time scaling at the same rate as the UI components following a white label initiative and visual designers became overwhelmed with maintaining the library.


I increased the adoption of Figma components by 26% while reducing time spent on QA and bug fixes. The new visual library structure also allowed designers to easily make changes at scale.

The Clue add-on on desktop and mobile.

Illustrations for insurance

Insurance products make a special case for illustrations because legal terms can be long and hard to understand. Illustrations play a crucial role by clarifying coverage terms so that users can understand them at a glance.

From research to release


For a better understanding of the constraints, here is a rough timeline of the project. My favourite part was interviewing different teams and seeing their perspectives and unique usage of the visual system.

Researching with purpose

As a new member of the team, I decided to use triangulation of three research methods to make sure I was making the right decisions. I performed 1-1 interviews with designers to study their usage of the library, audited the existing system for flaws, and benchmarked other systems to find solutions.

Revamped visual system

Here is a brief overview of some features of the new library.

1. Atomic system for illustrations

While auditing the visual system, I realized that many similar visual elements were being reused, sometimes hundreds of times. So I created an atomic system using smaller visual elements to create bigger scenes. This allows designers to change at scale in one click.

2. Component structure for better searchability

Product designers using the library found that the current components were too bulky and made them hard to search and prone to usage errors. We resolved to using smaller components with brands as the only variants.

3. Finding visuals

Designers referred to visuals not by their name, but what the image meant semantically. We added relevant keywords and synonyms to component descriptions so they could be found more easily.

4. Converting color styles to semantic tokens

There were hundreds of colour styles used in the wrong way, so we decided to switch to semantic colour and use colour variables to minimize inconsistent usage of brand specific colours.

5. Grid system

Since product illustrations vary in all types of sizes, we adopted a grid system to have more consistency throughout different platforms. We followed the 8pt grid system used by UI components.

6. Documenting best practices

Past issues and bugs were caused by missing or dated documentation. To lessen time resolving these issues we documented best practices from creation to hand off.

Looking back — what I learned

Cross-team communication

I learned that half of the work of a design system is communication. Whether its regular workshops with designers or syncs with impacted teams, it is important to keep everyone aligned.

There is no perfect system

From benchmarking different design systems, I learned that every system has its own ways of working. In this case, being mindful of the skill sets, team structures and company culture is a big success factor.

Dig for the why

In an environment with 20+ teams, I learned that it was important to dig for the source of the information. No matter how many people you have to jump through to find it.

In an environment with 20+ teams, I learned that it was important to dig for the source behind every decision. No matter how many people you have to jump through to find it.

Context, context, context

Every visual element eventually ends up in a UI component or product flow. It is important to keep that context in mind when designing.

Next Project

Next Project

Translating branding into web design and UI