01. Overview
         

What is Flexport?

Flexport is a freight forwarder (think travel agent for freight) who uses technology, physical infrastructure, and human expertise to facilitate global trade. Over 10,000 clients in over 116 countries utilize Flexport’s freight services and industry disrupting software to provide enhanced visibility and control over their supply chain.

Flexport's Visual Style

At the time of this project in 2018, Flexport was in its second brand iteration whose focus was communicating simply and directly. The visual presentation at the time was reductive and intended to create a sense of order and clarity. The aim was to create a visual presentation that feels timeless, international and appropriate for all market segments.

20 percent Project

This project was self started out of a hackathon to revise our icon library and guidelines. With a lean design systems team of only 1 designer, there was simply not the dedicated resources to fit this into their roadmap, so instead I made it my personal vendetta to bring visual harmony to our library as a side project that extended past the initial hackathon proposal.

02. Audit
         

Inconsistent & nonproprietary

As mentioned, Flexport’s iconography was a collection of stylistically mismatched icons pulled from disparate sources resulting in a less than cohesive visual experience, failing to inspire confidence as a mature business. As you can see here, there was a wide variety of line weights, corner radius, perspectives, and visual weights. Even between icons of similar subjects (take the airplane or user icons for example) there is a clear lack of consistency. Adding to the problem of mismatched icon styles, there was no overarching tie back to our brand or its attributes and no guiding principles to help individual designers contribute to the library in a cohesive way. 

03. Process
         

Inspiration

To ensure that the iconographic style would fit within the existing brand guidelines, I looked to the same sources of inspiration as our brand team. Looking to the likes of Lance Wyman and Otl Aicher for their international simplicity and wayfinding portfolios as well as more contemporary branding coming out of studios like Moniker, paved the way for bold and concise forms. Studying our word mark also served as a source of inspiration, looking to the gently rounded corners and chamfered corners as subtle references that could be introduced into iconography to pull the suite together. 

Exploration

Of our existing 120 icons, I chose to focus on the transportation mode icons that are most unique to our business, ensuring that all directions explored would put our most important, and challenging, forms first. Focusing the first phase of the project on rapid, divergent ideation to create as many forms as possible in a matter of days.

Critique

Employing fellow product designers across the organization, we regularly critiqued the initial stylistic directions at various sizes as well as within the context of our product to make sure that the icon library had collective ownership across the design team.

Distill

Curating the wide variety of explorations done and identifying a few promising directions, I then applied those 5 directions to another 20 of our most used icons to move towards narrowing to a single direction and guidelines that could then be applied to our entire library.

Refine

Continuing to collect feedback from design stakeholders and deciding on a singular direction, I continued to iterate on forms and refine the core icon set. Once set on initial guidelines, I then applied the principles I had developed across our entire icon library and wrote documentation so that any designer going forward could contribute their own icons without needing a librarian.

04. Outcome
         

Design Principles

While rules will always be broken, try to keep these principles in mind when making icons so that our icons remain consistent and familial.

A Simple

Keep icons reductive, only keeping details 
that matter for recognition

B Solid

Err toward solids and avoid line work for greater accessibility at small sizes

C Geometric

Use basic shapes such as circles, rectangles, and triangles to create forms

D Flat

Avoid perspective by using a top or side view

Grid

Build icons on a 64x64 pixel grid, checking for legibility at sizes down to at 12px. Never use partial pixels and strive to make all measurements divisible by two.

Corners

A Convex corners should have a 1px corner radius



B Concave corners should stay sharp



C Keep corners sharp where shapes should 
visually ‘snap’ together



D Interior corners should follow their 
exterior counterpart

Angles

Use angles to create tapering, avoid organic shapes, and to tie back to our logomark. There is no hard and fast rule about which angle is the right angle, but be sure it starts and ends at an intersection of pixels.


Line Weight

A Minimum line weights should be 6px

B This includes whitespace

C For linework icons like arrows, use 10px strokes

Exceptions • Amplify Meaning

While perspective should be avoided in favor of flat icons, in this case, the form of an inbox icon with perspective is so iconic that it takes away from the meaning of the icon to flatten it.

Exceptions • Optical Correctness

Sometimes icons are unavoidably complex and slight visual adjustments need to be made. If all other options fail and adjustments need to be made, make sure they are consistent.

05. Result
         

 Latitude Design System

As a major contribution to Flexport's design system Latitude, the 168 icon set has helped our design and engineering teams move faster and provided a more consistent visual experience for our users. 

The Rebrand

Since this project in 2018, Flexport has since gone through an additional rebrand. However, the icon set above continues to be in use today with the underlying design principles they were built upon still ringing true to our brand. Here you can see the icons in use on our client facing dashboard.