Icon Library
In 2020, digital products at Hy-Vee were using a mix of custom and open-source icons from libraries like Feather, Font Awesome and Material Design. This lead to visual inconsistency and inefficiency for developers. We decided to build a universal set of icons, unique to Hy-Vee, that we could grow as needed.
Goals:
Increase consistency and recognition across digital products
Reduce effort for changes to icons in the future
Create one icon source
Streamline the process for getting icons into UI Components
Define a governance process for future changes or additions to the icon library
Educate designers on new guidelines for icon design and usage
Work with Product Owners to update icons across products
Roles and Responsibilities
I organized a small working group on the UX team, including Kate Roth, Brian Goeres and me.
Kate Roth did the bulk of the icon design, with Brian assisting.
Brian Goeres took the lead on working with developers to implement the new icons.
We all contributed to auditing current usage of icons, ideating options and engaging in regular critiques.
I wrote the project brief, made final decisions on what to keep or cut, drafted icon usage guidelines, socialized our recommendation, and implemented a request process for new icons
Design Principles
-
People must be able to recognize what an icon represents and predict what might happen when they interact with it in an interface. Clarity inspires confidence and leads to further use.
-
Icons should be simple, easy-to-understand, and used in a way that puts customer needs first. Hy-Vee icons should express the brand personality characteristics of approachable, sincere and courteous. While a level of realism can add interest to an icon design, it should not supersede its ability to function simply and effectively. Overly illustrating and dressing up icons results in lower recognition, especially at small sizes.
-
Unity is created by using similarity and repetition. This helps elements relate to each other and create a unified whole, rather than an ill-fitting assortment of elements.
-
Icons can be appreciated individually, but they don't function alone. Evaluate icon designs relative to the system. Make sure that each icon differs from surrounding icons, while still working together as a whole. Think though icon variation needs as a set before illustrating. Planning how the whole set of icons will work together from the beginning will reduce rework.
-
Icons should be mindful of cultural differences. Take into account your products are being used by various type of users with different visual languages. Use widely understood imagery and labels to reinforce icons that aren't universally recognized. Evaluate icon design for implicit bias. Do not reinforce stereotypes or make assumptions about our customers's gender, age, skin color, income, religion, sexuality or dietary preferences.
The Icons
The Hy-Vee icon library in 2022.
Usage Guidelines
This is the initial draft. Guidelines have since been incorporated into the design system. Through usability testing, we confirmed the need for text labels on all icons, with exceptions for cart, search and account.
Implementation
Once we had created the icons, there was still a lot of work to do.
Obtained stakeholder approval on the icon designs
Shared icons and usage guidelines with the UX team for feedback
Updated icons and guidelines in the UX Style Guide
Added icons to our Figma asset library
Presented the new library to Product Owners and explained why we needed a change
Implemented an icon request process, using a Slack workflow
Audited the Hy-Vee mobile app, identified where a simple icon change wasn’t enough, and worked with developers to update all icons in the app
Worked with developers to update the icons in the web component library
Tasked each UX Designer to work with their POs to create and prioritize Jira tickets to clean up old icons.