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.

The State of our Design System

For the first 4 years of design at Flexport, the design system was a mismatched collection of components and loose guidelines that were piecemeal collected, even as branding changed and needs evolved. There was never an underlying framework to guide our UI or a team to steward them forward.

A Growing Team and Ecosystem

Even since introducing the following design language system, the design team has grown 50% across 4 locations. No longer can we keep our design language tribal knowledge at HQ. In order to drive design efficiency and cohesive decision making across this group and the multiple products we serve, a more robust foundation was imperative.

02. Rebrand
         

Unafraid • Empathic • Humble

We always knew a design system was something we should do, but when Flexport rebranded in March 2019, it became something we had to do. This was the forcing function of why we took on this project when we did. Not to mention because our Design Systems team finally had bandwidth and engineering manpower through our accelerated growth from scrapy startup to bonafide tech company. 

Building off of where our marketing team in partnership with design agency, Firstborn, landed, we took the foundational color, and type and began to explore how we could apply these to our product, guided by our new brand attributes of unafraid, empathetic, and humble.

Learn more about Flexport's rebrand here

03. Process
         

Sprint 

We began our journey with a two day design sprint with 6 product designers, representing our major product areas in order to explore many possible directions we could take our visual language. At the end of the sprint, we had 3 strong directions which were presented back to brand and product stakeholders.

Refine

With the mentality of ‘we need one author to write the first draft,’ I was tapped to take where we landed after the sprint, incorporate feedback, and refine our concept into one, unified direction. With weekly check-ins with stakeholders to continue to fitness the design direction, 3 weeks later we had an mvp design language framework.

Stress Test

To ensure that our design language proposal would meet the needs of all of our complex product areas and ensure decisions weren't made in a vacuum, the entire design team stepped up to test initial design components in their own areas of expertise. With their feedback, I continued to refine our final design direction for sign off from our branding counterparts.

Implementation

As a temporary design systems team member for the duration of this project, I began to roll off the project back to my product team and regularly scheduled programming. As I transferred ownership to the rest of the design systems team, I continued to advise and provide feedback as design symbols transitioned into code.

04. Select Iterations
         

3 initial directions

I’ve been known to crash Figma with the number of explorations I explore- it’s just a part of my process. Here is a sampling of some of the most pivotal design iterations, starting with the 3 divergent directions our 6 person task force landed on during our initial design sprint. These concepts served as a jumping off point for me to converge our various ideas into one direction.

Navigation

A lot of time was spent on exploring navigation as the anchor point all other layout decisions. The age old question of vertical versus horizontal navigation was hotly debated. Ultimately, with stakeholder input we moved forward with a horizontal top navigation as an incremental change from our current architecture, in order to maintain as much horizontal space as possible to display large data sets, with plans to revisit the possibility of the side nav down the line.

Color & Physics

Another primary set of decisions revolved around color, type, and the ‘physics’ of the digital world I was creating. How much of the deep brand navy would we infuse into our previously light interface? Should elements push or overlay? What level of color and depth would bring clarity rather than distraction? Thankfully newly defined brand attributes and user research helped make design decisions based on logic rather than opinion.

05. Outcome
         

Translating Brand Principles to Design Principles

Humble

Users are our partners and take their jobs seriously. Designing for their productive use and high data density means restraining the ambiguous use of color and iconography in order to focus on legibility.

Unafraid

Darker colors, higher contrast, and bolder corners match branded typography, to anchor the page and instill authority.

Empathetic

While paring back flourishing elements to support productive workflows, how might we instill a sense of personality and warmth to create a workspace that is an extension of the humans we serve?

Material

Planes are flat and push one another. Dark areas are reserved for navigation as it recedes into the background, grey panels are to house secondary referential information, and white is to the ‘sheet of paper’ the primary workpace is on.

Typography

Swapping system fonts for GT america to seamlessly infuse brand personality, reserving extended type classes to stress hierarchy at large scale. Navy text softens an otherwise austere theme

Buttons

• Move away from all caps to sentence case to keep copy approachable
• Drive value through built fluency with one to two word actions if additional
  information are necessary, use button subtext or a tool tip
• Limit 1 primary CTA in view at once to maintain priority

Iconography

• Icons should be informative or actionable, not decorative
• If an icon is actionable, it is primary navy.
   If it is informative, it is secondary grey.
• Icons in line are 12 px, alone are 18 px

Dividers

• By eliminating fully enclosed cards
• Can be used vertically when necessary to
   break information or make columns clear
• Should be used sparingly to emphasize hierarchy and grouping

Shapes

• For use as background to highlight icons, numbers,
or other small but important pieces of information

Pattern

Use brand patterns in solid colors at 5% opacity in empty states and footers to add texture and infuse branding only when there is no data to distract from

06. Before & After
         

Client Facing Dashboard

With the dashboard as a cornerstone of our client experience, and one of the most visually complex interfaces in our software, ensuring the new design language made a strong statement on landing was mission critical.

Internal Operations Workspace

The other side of the Flexport coin is our internal tooling. Before, inward facing operations workspaces lagged even further behind our client software in terms of cohesive components and visual language. Now, with a new unified Flexport design language, all users experience are first class citizens.

Forms

Much of logistics is documentation and data collection. Due to this reality, forms became one of the primary use cases of stress testing the new design language. 

Tables

If much of logistics is data collection, the other half is data display. Table views and data dense views are a staple across all of our user experiences making it the other critical test of the new design language.

07. Outcome
         

After the acceptance of the above design language proposal, I rolled off the project back to my regularly scheduled programming, but not before handing off the project to our design systems team to build into a component and figma library. The work from this project has since enabled over 20 designers across 4 products to design more quickly and cohesively than ever. Some of the major accomplishments this project enabled include:

Latitude Redesign

Our design systems team redesigned our publically available design system site, Latitude to help our design and engineering teams move faster by documenting and expanding the design language rules and component library.

The Forward Conference

The new design language debuted on the big stage at Flexport's 2019 Forward conference as part of a client dashboard redesign by fellow designer Zoe Padgett who took the proposed design language framework and pushed it even further.
The project contributed to an uptick of customer quality scores by 50%.

Multiproduct Ecosystem

The project has continued to drive our product suite toward a more streamlined and consistent experience for all our users, including our trucking partners under our subsidiary brand, Transmission.