Crafting and maintaining Firefox's mobile design system
Crafting and maintaining Firefox's mobile design system
Mozilla • 2021 - Ongoing
Mozilla • 2021 - Ongoing
I have a unique role at Mozilla where I am currently the lead designer for Firefox's mobile design system, Acorn. Since I joined the team in July 2021, I have: built out component libraries from the ground up to support our design and engineering teams, improved visual cohesion in our products, enhanced designer and engineering collaboration, introduced design tokens, and much more.
I have a unique role at Mozilla where I am currently the lead designer for Firefox's mobile design system, Acorn. Since I joined the team in July 2021, I have: built out component libraries from the ground up to support our design and engineering teams, improved visual cohesion in our products, enhanced designer and engineering collaboration, introduced design tokens, and much more.
Key contributions
Key contributions
Streamlined the mobile product colour palette and introduced colour tokens for Firefox iOS and Android
Streamlined the mobile product colour palette and introduced colour tokens for Firefox iOS and Android
I refactored the mobile colour system by streamlining the palette, brought more visual parity between iOS and Android, and collaborated with engineering to introduce colour tokens into the product. I have a separate case study dedicated to this project, check it out here:
I refactored the mobile colour system by streamlining the palette, brought more visual parity between iOS and Android, and collaborated with engineering to introduce colour tokens into the product. I have a separate case study dedicated to this project, check it out here:
Built out iOS and Android component libraries that currently support 6+ designers and 20+ engineers
Built out iOS and Android component libraries that currently support 6+ designers and 20+ engineers
I built out 6+ style and component libraries in Figma that support Firefox's mobile platforms on iOS and Android. These libraries include foundational styles, core component libraries, and "UI" libraries that provide designers with premade components and core screens.
I built out 6+ style and component libraries in Figma that support Firefox's mobile platforms on iOS and Android. These libraries include foundational styles, core component libraries, and "UI" libraries that provide designers with premade components and core screens.
Impact
Impact
Enhanced designer process and workflow, reducing repetitive and redundant tasks, allowing them to focus on their projects.
Enhanced designer process and workflow, reducing repetitive and redundant tasks, allowing them to focus on their projects.
A single source of truth of reusable components provides a reliable foundation for designers to create cohesive designs across various platforms and projects.
A single source of truth of reusable components provides a reliable foundation for designers to create cohesive designs across various platforms and projects.
Improved collaboration with engineering with the adoption of colour tokens and consistent component usage that has resulted in smoother implementations.
Improved collaboration with engineering with the adoption of colour tokens and consistent component usage that has resulted in smoother implementations.
Implemented Figma variables across our component libraries
Implemented Figma variables across our component libraries
I implemented variables into the mobile design system that currently support 3 modes: light, dark and private. This involved a strategic overhaul to deprecate color styles and updating all component libraries and elements with variables.
I implemented variables into the mobile design system that currently support 3 modes: light, dark and private. This involved a strategic overhaul to deprecate color styles and updating all component libraries and elements with variables.
Impact
Impact
Improved designer workflows that enable designers to easily design and toggle between different themes.
Improved designer workflows that enable designers to easily design and toggle between different themes.
Simplified design system maintenance.
Simplified design system maintenance.