Streamlining Firefox's icon system
Streamlining Firefox's icon system
Mozilla • 2021 - Ongoing
Mozilla • 2021 - Ongoing
When our design systems team formed in 2021, our team was quite small that led to each of us wearing many different hats. One of the areas I adopted was leading and maintaining Firefox's icon system.
My responsibilities include: overseeing our icon system that support our desktop and mobile products and teams, project managing and facilitating our icon request process, and developing frameworks and workflows that improve cross-collaboration efficiencies.
When our design systems team formed in 2021, our team was quite small that led to each of us wearing many different hats. One of the areas I adopted was leading and maintaining Firefox's icon system.
My responsibilities include: overseeing our icon system that support our desktop and mobile products and teams, project managing and facilitating our icon request process, and developing frameworks and workflows that improve cross-collaboration efficiencies.
Key contributions
Key contributions
Designed an intake system and developed a formalized process to facilitate better cross-collaboration
Designed an intake system and developed a formalized process to facilitate better cross-collaboration
Upon recognizing the inefficiencies in our icon request process, I took the initiative to redefine this disjointed process. This involved implementing an intake system utilizing Airtable and Slack, which automated notifications for new requests and an ability to easily track and manage them.
Along with the new system, I also developed a formalized process for when and how a designer should request a new icon from design systems. The process was designed to clarify the icon workflow and to establish clear expectations for those we support.
I currently continue to oversee this entire process and it involves managing daily requests, facilitating and collaborating with different teams, working with an external contractor to design new icons and ensuring our icon system is being adhered to.
Upon recognizing the inefficiencies in our icon request process, I took the initiative to redefine this disjointed process. This involved implementing an intake system utilizing Airtable and Slack, which automated notifications for new requests and an ability to easily track and manage them.
Along with the new system, I also developed a formalized process for when and how a designer should request a new icon from design systems. The process was designed to clarify the icon workflow and to establish clear expectations for those we support.
I currently continue to oversee this entire process and it involves managing daily requests, facilitating and collaborating with different teams, working with an external contractor to design new icons and ensuring our icon system is being adhered to.
Impact
Impact
The intake system improved cross-collaboration for the teams we support as well as the maintainence for our systems team.
The intake system improved cross-collaboration for the teams we support as well as the maintainence for our systems team.
The icon system has improved due to higher quality creations, asset deliverables, and adherence to the icon system.
The icon system has improved due to higher quality creations, asset deliverables, and adherence to the icon system.
The intake framework and process was later adopted by other intake support needs.
The intake framework and process was later adopted by other intake support needs.
Introduced an icon repository that streamlined the design and engineering workflow by having a single source of truth
Introduced an icon repository that streamlined the design and engineering workflow by having a single source of truth
I, alongside my systems team mates, introduced a centralized repository to address inconsistencies discovered in the engineering handoff process. My role in this was first uncovering and identifying this as an issue through my observation of the existing handoff process. Engineers were often obtaining icon assets from a variety of sources, such as Figma, Slack, or Google Drive. As a result, our implemented icons in the codebase eventually became inconsistent with naming, formatting, optimization, and whether we had the proper licenses in there.
Once the issues were identified and my hypothesis for the need of a repository was validated, I reached out to my team mates with experiences setting up repos in Git to collaborate with them on how we can create one for our team. Through collaboration, we developed docs that standardized our icon specs, including: sizing, naming, organization and contribution guidelines. The repository currently houses all of Firefox mobile's product icons, with plans for a future expansion to include desktop icons.
I, alongside my systems team mates, introduced a centralized repository to address inconsistencies discovered in the engineering handoff process. My role in this was first uncovering and identifying this as an issue through my observation of the existing handoff process. Engineers were often obtaining icon assets from a variety of sources, such as Figma, Slack, or Google Drive. As a result, our implemented icons in the codebase eventually became inconsistent with naming, formatting, optimization, and whether we had the proper licenses in there.
Once the issues were identified and my hypothesis for the need of a repository was validated, I reached out to my team mates with experiences setting up repos in Git to collaborate with them on how we can create one for our team. Through collaboration, we developed docs that standardized our icon specs, including: sizing, naming, organization and contribution guidelines. The repository currently houses all of Firefox mobile's product icons, with plans for a future expansion to include desktop icons.
Impact
Impact
Improved clarity and efficiency within the design and engineering handoff process. A single source of truth reduces the unknown of where to obtain an icon.
Improved clarity and efficiency within the design and engineering handoff process. A single source of truth reduces the unknown of where to obtain an icon.
The repo provides high quality ready-to-implement icon assets that remove the guesswork for engineering to determine if an asset follows standards.
The repo provides high quality ready-to-implement icon assets that remove the guesswork for engineering to determine if an asset follows standards.
By providing ready-to-implement assets, engineers save time in their implementation workflow.
By providing ready-to-implement assets, engineers save time in their implementation workflow.
Improved coherence of the icon system with the standardization of naming conventions, sizing, optimization, licensing, and formatting for all platforms.
Improved coherence of the icon system with the standardization of naming conventions, sizing, optimization, licensing, and formatting for all platforms.