600+ redesigned icons
at Informatica
Objective and purpose
The primary goal was to bring visual consistency across a diverse set of icons, as previous designs were inconsistent in style (e.g., colour icons vs. monochrome, rounded vs. square). This inconsistency created confusion and undermined the user experience.
Enhancing icon design for usability and consistency
To improve recognition and usability, I standardized the icon style using a single main color. Some icons were newly designed, while others were updated to match the previous design language, ensuring easy recognition and familiarity for users.
The icons were designed with a clear structure: a 20x20px canvas with 1px padding, resulting in most icons being 18x18px. Design exceptions included 2px rounded corners for a few icons, enhancing the visual appeal without sacrificing consistency.
Given the complexity of some icons, I suggested adding tooltips on hover to provide clear descriptions. This approach ensured users could easily understand each icon's function, improving usability and accessibility.
Streamlining icon management for cross-team collaboration
With multiple teams managing different products, there was a need for a streamlined process to update the icon library quickly. I created a component page to manage core icons, allowing teams to duplicate instances across different product pages. A dedicated nomenclature system enabled easy export of icons with just a few clicks, reducing complexity.
I added tags and descriptions to icons, allowing them to be sorted and filtered based on product relevance or synonyms. This made it easier to find and implement the right icon in the right context, ensuring the icons were used consistently and correctly across various pages and products.
You could accompany this with visual examples, such as before-and-after comparisons, showing how the icons evolved, along with some examples of the tooltip implementation and the component page.
A scalable system for 600+ icons
I designed a centralized, scalable icon system to efficiently manage 600+ icons. With a clear nomenclature and filtering system, teams could easily update and export icons across products, streamlining the process and ensuring consistency.
