UKG is an all-in-one human resources and workforce management solution.
We collaborated with them to create a bespoke icon language based on their newly developed brand identity that would be used to guide and navigate a user around the app interface. Their entire icon library was refreshed with a unified design system.
We helped create a guide with grid-specific guidelines to craft a coherent design language which also enabled further in-house production as needed. Numerous iterations of shapes, colours and space were tested to arrive at the result below, and counting.
Inspired by the UKG logo mark, brand icons should be constructed primarily using rounded 'friendly' line work, with filled shapes as a secondary option where needed. Below is a construction guide showing the grid system, modifier 'buffer' and how to use specific line widths, line breaks, colours and shapes.
Modifiers are used to add a layer of meaning or context to icons. They can help indicate a different icon state (for example when an item is completed) or divide icons into specific subcategories (for example when an icon involves a team).
Linework
Line gaps are used to reinforce brand identity and create breathing space as well as visual interest within the icons. Wherever possible, icons should include a minimum of one line break.
Filled Shapes
Primary
Primary color fills are to be used sparingly to reinforce the concept and to add visual contrast and character. Primary color fills can also be used when linework alone cannot convey the concept or when using linework will result in visual clutter.
Secondary
The secondary color adds character and branding to the icons while subtly reinforcing the concept. There is no exact restriction on the amount of secondary color to be used, but will rather depend on the concept of the icon and the designer's artistic interpretation