Icons sourced from a variety of free libraries were inconsistently implemented across products, resulting in visual clutter, lack of consistency, and too much complexity. There were no guidelines in place on how to introduce a new icon into the product.
As a leader of the design system team, I developed and implemented an icon system to support ongoing improvements in design quality.
A consistent, holistic, branded, own-able icon set would bring visual clarity thereby increasing the quality of the user experience. Prioritizing this foundational element of the design system would reduce overhead for teams creating new features.
As the design system team manager, I led the project strategy, conducted audits, formed a designer team, and involved our illustrator, Grace Chen. Our close collaboration with brand and product designers, as well as stakeholders, ensured consistent development. I personally approved the initial designs and supervised documentation and processes to enable smooth set expansion.
We started with updating icons in the global left and top menus. To ensure consistency and aimed to match them with existing branded illustrations.
Aligning system icons with the brand will result in a high quality user experience.
Develop a system that enables any designer to introduce new icons into the product. Designs should be simple, easy to understand, recognizable, and useful.
The result was a beautiful custom library of icons that was indeed own-able. A cohesive design language improved the overall user experience by decreasing visual noise on the homepage and elsewhere.
We aimed to create a unique language that could be replicated across all icons. We achieved cohesion by grouping icons into concepts like pages and people.
We kept going with our growing list of icon needs. The design system allowed us to grow the icon set with visual consistency.
Grace, the illustrator, worked directly with the design system designers and engineers to create a system of key-lines, sizing, and color specs.
I developed a process that enabled designers to efficiently request new icons and add them to their flows.
A process was developed that would make it easy to scale the library in both Figma and code libraries.
Product teams need guidance on how to design and add a new icon to the systems.
Icon design is not just about the visuals. Getting the semantics right is essential.
A cohesive design system for icons supports the brand and promotes design excellence.
CASE STUDIES
