Redesigning NerdWallet’s UI icon set
The problem
One of the best demonstrations of how silo-ed NerdWallet teams were in early 2017 was the breadth of icon styles used across NerdWallet pages.
The goal
Create a new set of UI icons that matched the recently refreshed brand style
Establish best practices for icon usage
The process
Audit
I started an audit where I found utter chaos. There were an assortment of visual styles, sizes, and interpretations of the same icons. We were desperately in need of a single, updated icon set.
Design sprint
We were undertaking a larger brand refresh and wanted to align our UI icons with new illustration and component work that was being done. During a week-long design sprint I worked on the design of the new set.
Sketching
I began by identifying the v1 set of icons needed to replace legacy icons. Except for a few problematic icons I kept the existing metaphors and worked on aligning visual styling and size.
The outcome
48 SVG icons
Sketch library for designer use
Icon creation guidelines