In preparation for the launch of our redesigned application (rebuilt from the ground up), I worked on redrawing more than 60 of our existing icons in a consistent style and footprint, as well as creating new ones for new flows and actions. I worked directly with developers to ensure icons rendered correctly in-browser, updating icons as needed.
I specifically worked with UX designers to make sure that:
(1) icons followed a consistent visual footprint of 20px by 20px (with few exceptions)
(2) icons communicated well & looked visually consistent in-context and
(3) icon creation & export process was captured in documentation and fit into the design system.
Generally, the original icons felt old - they had an inconsistent footprint and visual style, which made the experience look disjointed and scattered. Also, many of the old icons were created as one-off .pngs in Photoshop, which meant they weren’t vectorized, or editable.
Click to expand & view details
During the research phase, we looked at many different styles of icons for inspiration. Through auditing existing icons and exploring new styles of icons in context, it became clear that a lot of the existing icons conceptually resonated with customers, and visually complemented our logo and brand typeface, Lato (sans-serif with humanist qualities). What was needed were some rules and guidelines to define and refine the set as a whole.
Original icons (light grey) had inconsistent line weight, footprint, mixed rounded and sharp corners, and no defined rules on how to create them.
Redesigned icons (dark grey) had a consistent line weight of 2px with rounded corners, general footprint of 20px by 20px, with very few exceptions.
Click to expand or view detail