Icon Redesign

Icon Redesign

Icon Redesign

Icon Redesign

Icon Redesign

Egencia

Egencia

Egencia

Egencia

Egencia

Egencia icons

Redesigning icons for business travelers

Redesigning icons for business travelers

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. 

LOB icons
Old icon set

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

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).

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).

Airbnb Icons

• Round and very friendly
• Thin line icons
• Well designed and respresentative pictograms

 

Airbnb icon examples
Kayak Icons

• Primarily filled icons
• LOB icons (hotel, car) use same angles, differentiating them in the market
• Still fairly round and friendly
• Amenity icons in hotel tiles are not very cohesive when looking at angles, border radius, and attention to detail 
• Don't really go with the LOB icons

 

Kayak icon examples
Google Flights Icons

• Cohesive, detail-oriented set
• Less bold in personality than airbnb and kayak, but still consistent
• Still feels like google
• Amazing attention to detail in the Leg Room icons, with 3 total for different seat pitches

 

Google flights icon examples
Facebook Icons

• Really interesting attention to detail
• Multiple colors(SVGimplementation)
• Strongly cohesive and stylistic set
• Round, friendly, almost childish, lots of personality
• Boldly represents Facebook's brand
• Navigation icons are lined, but have some sort of filled selection state
• Primary icons under the More menu are brightly colored, with multiple colors, whereas secondary are grayscale, yet still multiple shades

Facebook icon examples
Lonely Planet

• Unique, illustrative style of iconography for Destinations (10 top XX)
• Not many UI icons - but a great family of these line icons
• Obviously a family

Lonely planet icon examples

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. 

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. 

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. 

Icons with handles

Consistent treatment of objects with handles

Icons with feet

Distictive treatment of "feet"

Icon layering examples

Examples of icon layering

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. 

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. 

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. 

New and old icon comparison

Previous icon set on the left; New icon set on the right

Previous icon set on the left; New icon set on the right

Icons on flight search form

New icons on the homepage flights search form

Icons in iOS trip list
Icons in iOS search form
Icons in iOS trip details

New icons in the iOS app; Trips page, Booking page, and Trip Details page

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.

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 this summer, first the first time ever, all 3 platforms (web, iOS, and Android) will be using the same exact icon set – which is a huge 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 huge amount of visibility onto these 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.

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 this summer, first the first time ever, all 3 platforms (web, iOS, and Android) will be using the same exact icon set – which is a huge 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 huge amount of visibility onto these 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.

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 this summer, first the first time ever, all 3 platforms (web, iOS, and Android) will be using the same exact icon set – which is a huge 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 huge amount of visibility onto these 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.

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 this summer, first the first time ever, all 3 platforms (web, iOS, and Android) will be using the same exact icon set – which is a huge 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 huge amount of visibility onto these 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 projects

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

© 2018 Lauren Nielsen