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.
Timeline
Sep 2023 - Mar 2024
Team
Me + 1 design manager + 1 design system lead + 3 visual designers
My role
Systems designer,
Tools
Figma
Miro
Illustrator
Context
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.
Problem
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.
Outcome
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.
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
Timeline
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
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.
