Icon library overhaul and redesign
Ahead of the rebrand I had started the icon overhaul project knowing we had a deep rooted scalability issue within our existing icon system.
With a bold new direction on the way it was prime time to start fixing our processes and foundations to make this a smooth transition.
You can see the live documentation on icons at wise.design.
The Team
Visual direction
Design Lead
Ness Grixti — Me
Staff Designer
Tooling & plugins
Mobile Development
Web Development
The Process
01 Audit
As part of the icon audit, I reviewed the existing icon set. This included looking at in-product usage, naming and categorisation.
I interviewed designers and monitored their interaction with our icon designer to get a better understanding of the current processes and issues.
Key findings
Function specific naming & categorisation
Making it hard to reuse them for different functions.
Confusing metaphors
There were a number of icons that visually visually made no sense.
Size limitations
Different designs per size, limiting our ability to scale them, and doubling our work for new icons.
Time consuming
Every time we created a new icon, we would manually share it with 3 different platforms to update.
02 Discovery
Naming & search
From here I wanted to understand how our teams were currently perceiving our icons. I knew we needed to rename our icons, but we also needed to have search terms.
Research attempt 1
To do this I asked the design community to go into a (very) large Figma file of 150 icons and rattle off some icon search terms.
Only one designer did it.
Research attempt 2
I turned it into a game, which subsequently became the gateway to how I did research from then on.
The game was called name that icon, and it wasn’t limited to our designers, it was for everyone.
The rules were simple, every day I posted 5 icons with no context and asked everyone to name the icon exactly as they would call it.
The engagement went through the roof, with people looking forward to playing.
Key findings
Better naming
Call an icon by what it looks like for re-usability.
Fixed metaphors
We identified icons that visually made no sense.
Streamlined set
Different designs per size, limiting our ability to scale them, and doubling our work for new icons.
Search terms
A collection of words that accurately represented how our teams saw each icon.
Happy accidents
People had a lot of fun with the game and got quite creative, building further engagement
Categorisation
From here I wanted to understand how our teams were currently perceiving our icons. I knew we needed to rename our icons, but we also needed to have search terms.
Workshop
I ran a separate grouping session with our design team to get a better idea of how people categorised our icon library. In this session I added one instance of each icon with no name. I then asked designers to all move the icons around with others they fit best with.
This session highlighted key patterns across our library that our designers resonated with, so I took them and adapted our library to work for this mental modal (making adjustments where necessary).
03 Design
These new designs — created by Ragged Edge and evolved by Felipe Gonzalez were designed as part of the rebrand, and tackled a few of the issues we found with our icons.
Simplification
They use simple metaphors, allowing us to streamline our set and repeat icons across the library.
Scaleable
We start with one size then scale from there, meaning we are able to have our icons at any size we want.
Complimentary
Redesigned to compliment our new primary font, Inter.
04 Build
Our developers were spending on average 2-9 hours per week on updating our reusable assets. Given we knew we were going to override all of our icons, we needed a way to clean up our processes to be more automated and streamlined.
Creating a single source of truth
We decided to put all of our reusable assets in a GitHub repo I called Wise atoms. This ensured that all platforms were pulling from the same place. Atoms also included a metadata file which included naming, categorisation and search terms.
Each of our platforms (including Figma with a plugin) automated pulling from Atoms significantly reducing our work.
Why not use Figma?
As much as we love Figma, we know that design tools come and go, but our icons are forever, so Github made the most logical sense. And given that it’s where our code lives, it kept things simple too.
Icon remapping
Given the large number of changes that were made to our existing set, we needed to remap the old names to the new so that each platform were able to migrate cleanly to the new structure and setup.
05 Support
New icons and improvements
Our library continues to grow, to support requests we have a workflow in slack. In certain instances we will also play ad hoc games of name that icon to validate designs ideas.
The full set
