Wise design

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

Ragged Edge

Design Lead

Ness Grixti — Me

Staff Designer

Felipe Gonzalez

Tooling & plugins

Henrique Gusso

Mobile Development

Ilya Puchka, Joao Cevada

Web Development

Jon Stieglitz, Anton Dozortsev

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