Lauren Nielsen's profile

Egencia Icons Redesign

Redesigning icons for business travelers

Company // Product
Egencia // UI Toolkit

Date
Nov 2017–July 2018

Role
Lead designer

Responsibilities
Visual design
Visual audit
Font creation & mapping

Platform
Web
iOS
Android

Team
1 designer
3 engineers 

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. 
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. Below are my quick notes about some of the inspiration I found (from Q1 2018).
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.

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.
Icon "feet"
Consistent handles
Icon layering examples
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. 
Previous icons LEFT; new icons RIGHT
New icons on the search form
Complete new set
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, first the first time ever, all 3 platforms (web, iOS, and Android) will be using the same exact icon set – which is a big win for the brand.

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.
Egencia Icons Redesign
Published:

Egencia Icons Redesign

Egencia icons redesign

Published: