TY Brew Design System

Migration of entire Design System from Sketch to Figma and definition of new color palette to comply with accessibility

Role

Senior Product Designer

Deliverables

Design system

Documentation

Technologies

Web

Mobile

TrustYou's login page

Problem statement

Product:

I joined TrustYou when they were undergoing several changes on product and brand side. One of the main projects was the migration of the entire design system from Sketch to Figma.

The challenge was that we were still missing main components that needed to be created within the system while migrating everything to the new tool. With the team, we structured a plan tracking in Confluence and Jira all the work that needed to be done.

 

Brand:

With the number of products increasing within TrustYou and the need for new graph visualizations throughout the entire tool and being a data heavy tool, we started to be concerned about the lack of flexibility of our color palette and the lack of compliance with accessibility. I took the opportunity to use the rebranding to tackle the topic and develop an accessible-safe palette that covered the needs for both product and marketing teams.

Execution

We had a lot of design debt when I started working on the Design System. Documentation needed to be added in general. I worked closely with the development team to structure and plan the development of new components and I worked on fixing and migrating the existing ones.

Documentation:

Documentation was kept separate using Notion with links to TY Brew in Figma. Figma worked as a UI kit including the foundations, the Component libraries and Examples of use.

Color Palette:

Because of my background in color theory and accessibility, I have analyzed the components of the design systems I have worked on, and helped iterate and adjust to the WCAG standards. TrustYou is data-heavy platform where the correct use of color is crucial for tools functionality. I did a huge exercise to generate a color palette that was accessibility-proof to help them generate compliant color combinations for visualizations and that was flexible enough to serve both Product and Marketing needs.

Color wheel analysis for color blindness
Color palette

Modular Illustrations:

Another challenge we faced at TrustYou was the fact that we were a small team. People in marketing sometimes needed help from product designers due to a lack of resources.

To make the process more agile and free product designers from that task I made a proposition of a modular illustration library to help the different teams generate compelling visuals with little effort assuring everyone was consistent throughout the company. That modular system was intended to be software agnostic, generating a library of elements that could be easily assembled by people in the different teams using any type of tools like Adobe Suite, Sketch/Figma, and even Microsoft Office. The illustration library would also be accessible using the defined color palette.

The idea was to speed up creative processes and enable all teams ⎯regardless of creative knowledge level⎯ with the right tools to generate compelling images that were aligned across the company with a low cost in time and effort.

Image composition example

This project inspired some articles you can find below:

Accessible palette