Developing a colour system
Developing a colour system
Mozilla • 2021 - 2024
Mozilla • 2021 - 2024
Prior to joining the mobile design team at Firefox, the team did not have a robust design system to rely on. At the time, there were scattered files containing styles or components, but they weren't up to date as there wasn't a dedicated designer to maintain the system. Overtime, this caused misalignment in the team which eventually trickled into visual inconsistencies in the product.
I was first hired to join the team to address issues like these. Since colours was the root to our visual issues, this is what I began to tackle first.
Prior to joining the mobile design team at Firefox, the team did not have a robust design system to rely on. At the time, there were scattered files containing styles or components, but they weren't up to date as there wasn't a dedicated designer to maintain the system. Overtime, this caused misalignment in the team which eventually trickled into visual inconsistencies in the product.
I was first hired to join the team to address issues like these. Since colours was the root to our visual issues, this is what I began to tackle first.
I lead the refactoring of our colour palette with a few objectives and requirements in mind:
I lead the refactoring of our colour palette with a few objectives and requirements in mind:
Streamline the product colour palette
Streamline the product colour palette
Bring more parity between our mobile platforms
Bring more parity between our mobile platforms
Colours should derive from the brand palette
Colours should derive from the brand palette
Collaborate with engineering teams to define a token structure
Collaborate with engineering teams to define a token structure
Approach
Approach
Defining the system
Defining the system
My approach began with a comprehensive audit of our platform's existing colour usage. The audit identified shared colours used on both platforms as well as platform-specific colours and nuances.
My approach began with a comprehensive audit of our platform's existing colour usage. The audit identified shared colours used on both platforms as well as platform-specific colours and nuances.
Once I had a holistic understanding of all our product's colour usage, I started leading the definition of the token structure in collaboration with our iOS and Android engineering teams.
Once I had a holistic understanding of all our product's colour usage, I started leading the definition of the token structure in collaboration with our iOS and Android engineering teams.
There was one other major consideration and it was to incorporate theming as the app supports light, dark, and private mode.
There was one other major consideration and it was to incorporate theming as the app supports light, dark, and private mode.
Implementation
Implementation
A foundational library was created to house the new colour system. This library was later on used and referenced to build out component libraries in Figma.
A foundational library was created to house the new colour system. This library was later on used and referenced to build out component libraries in Figma.
I collaborated with our iOS and Android engineering teams to implement tokens into the product. This was a gradual process taken over the course of a few months and involved a strong partnership with engineering to conduct thorough audits and QA to ensure the implementation was smooth and that there weren't any oversights.
I collaborated with our iOS and Android engineering teams to implement tokens into the product. This was a gradual process taken over the course of a few months and involved a strong partnership with engineering to conduct thorough audits and QA to ensure the implementation was smooth and that there weren't any oversights.
Adoption
Adoption
I guided the mobile design team by educating them on design tokens and how to utilize the new system to collaborate with engineering.
I guided the mobile design team by educating them on design tokens and how to utilize the new system to collaborate with engineering.
Impact
Impact
A simplified and streamlined mobile product colour palette that brought visual parity between our iOS and Android platforms.
A simplified and streamlined mobile product colour palette that brought visual parity between our iOS and Android platforms.
Implementation of colour tokens on iOS and Android that has improved the visual consistency across platforms as well as improved maintainability.
Implementation of colour tokens on iOS and Android that has improved the visual consistency across platforms as well as improved maintainability.
Adoption of a shared visual language used between design and engineering and as a result reduced misalignments across teams.
Adoption of a shared visual language used between design and engineering and as a result reduced misalignments across teams.
Reduced visual inconsistencies in the product which provide users with a more cohesive experience.
Reduced visual inconsistencies in the product which provide users with a more cohesive experience.