Icons Redesign

Egencia

Layout of icons that form the shape of the Egencia logo

Redesigning icons for business travelers

Company
Egencia
Date
2018
Role
Design lead

Since 2015, a handful of designers had approached our icon library with the goal of an overhaul, but the project was never fully completed. So, over time, the icon library grew and morphed into a disjointed and sometimes redundant set of icons with little unification or systems-thinking behind it.

The aim of renewing this project was to bring the entire icon set onto the same level, creating a new and consistent system to use across our product ecosystem as a recognizable family. Much like typeface design, icon design often gets overlooked. It’s easy to forget that humans design icons and that we can control their look and feel, making them into a unique brand asset. An icon family can have a similar impact as a font and can make a bold statement toward the brand personality.

Previous icon set, 2015
Previous icon set, 2015


Research

Gathering inspiration from well-known brands

Identifying brands that do this part of design well can be difficult. There are many impactful brands out there, but ensuring their detail-oriented branding makes it all the way to the icons isn't common. Some companies I took a look at were in the travel space, some are considered design leaders, some were both.

No items found.
Design

Defining the details

We didn't retain many of the old details in the new set. In essence, we threw out everything and started over. This presented us with a great opportunity as well as a great challenge. To tackle a set of over 220 icons, we came together to discuss what kind of character we wanted them to have. There are various ways to approach a challenge like this, and simply saying “Professional” or “Friendly” wasn’t quite enough.

I used a strict 16-pixel grid to layout all of the icon shapes


Icon design is a great example of thinking systematically. For a set of 200 icons to feel like a cohesive family, they need to have consistent characteristics and similarities carried throughout each one. With the new icon set, we have 3-4 consistent design treatments that became visual rules to shape their actual design. As we got further into designing the set, it was natural for exceptions to these rules to pop up, and in those cases, we considered each exception within the context of the whole family. We carefully considered attributes such as line weight, border radius, and negative space in each glyph, as well as a few unique design treatments that carried across a handful of icons to make them ours.

No items found.
Solution

Creating a new family

After months of design review, hundreds of iterations, and countless examples of icon groups displayed in context, we landed on a finalized set that we were excited to use. There were many steps following our excitement, including mapping, implementation, and bringing all of our platforms onto the same page.

I also wrote extensive documentation describing the design principles and guidelines and how to update the font pack so anyone else on the team could contribute to the icon family.

No items found.
No items found.
No items found.
No items found.
No items found.
Results

A huge win for the design team and the brand

It is our top priority to give users the very best experience, and with our new set of icons, Egencia’s design library just got a step closer. As of summer 2018, for the first time ever, all 3 platforms (web, iOS, and Android) will be using the same exact icon set.

In July 2018 I had the opportunity to present the project in front of the product organization as well as the senior leadership team, putting a high amount of visibility onto these new icons. They've since gained quite a bit of traction, and are helping the Product and Studio Design teams come into alignment with regard to the brand visibility outside of the product organization.

More ArchiveD Projects