Travel Icons Redesign

Egencia

Layout of icons that form the shape of the Egencia logo

How might we redesign icons for business travel?

Context

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.

Goals

1. Unify the current set of icons
  • Create a new and consistent system to use across our product ecosystem as a recognizable family.
  • Design new icons that had been needed for a long time.
2. Build an icon library
  • Ensure the new icon set was accessible as a component library for all designers to access.
Previous icon set, 2015

Previous icon set, 2015

Responsibilities

Contributing designer to Design Systems

Designing new icons and leading feedback sessions

The icons work had been a slow, ongoing project that just never made it to completion. When I took over the project, I proactively designed and lead feedback sessions with the whole team, taking ownership and accountability for the work to finally get finished.

Overseeing implementation and testing

Since Egencia did not use SVG icons at the time, all new icon glyphs had to be added to an icon font and re-exported. This work included remapping Unicode values, all new values, creating multiple new fonts for testing, and working extremely closely with the front-end developers to test the output.

Once the font component was ready, I worked with each product team to update and adopt the latest version of the component library.

Documenting process and principles

I did not want to be the gate keeper for this work - I wanted it to be as open-source as possible. So, I wrote extensive documentation describing the design principles and guidelines of the icons and how to update the font pack so anyone else on the team could contribute to the icon family.

Solution

Creating a new family

After months of design review, hundreds of iterations, and countless examples of icons in context, we landed on a finalized set. There were many steps following our excitement, including mapping, implementation, and bringing all of our platforms up to date.

No items found.
Impact

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 this work 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 Brand Design teams come into alignment with regard to the brand visibility outside of the product organization.

** Full case study available

More projects