Or how we design user centered tools for logistics and supply chain management

Flexport provides freight forwarding services. Freight forwarding is like being a travel agent for commercial freight, in that we buy space in vehicles and infrastructure and sell that space to our clients. When we buy space at high volumes, we are able to offer lower prices compared to the price our clients would receive if they were to buy directly from these owners. On top of the economic benefits, Flexport also provides world class customer service and tracking software which enables our integrations and operations team to provide clients with real time data on their shipment status.

This is important, as shipping can be incredibly stressful. You know the anxious feeling you get when you order a moderately expensive thing online and you’re waiting for it to arrive, trying desperately to check the status and current location of it? Well, imagine that you have 1,000 shipments moving at one time valued at several million dollars. Wouldn’t you want the highest amount of visibility possible into the status of those shipments?

This experience inspired the design of the first version of our platform. We enabled our clients to see every status and location across all of their shipments. This worked for a long time, but just like Flexport, our clients and their needs began to evolve.

Divergent thinking as a way to uncover unknown user needs

The original dashboard was inspired by what we heard from dozens of clients — that there was no tool that allowed them to have a comprehensive view of their supply chain. When we set out to design the original dashboard, we designed it to be the watchtower for your supply chain, allowing users to see the location and progress of every shipment they had moving around the globe — all in one page.

This first version of the dashboard had been in place for a few years so this year we set out to examine usage metrics and conduct client interviews, to discover how our dashboard was being utilized by our users.

Our design and research team conducted more than 85 client interviews and from those, we found that many of our clients had outgrown the dashboard. We could tell from instrumentation that most people landed on the dashboard only to immediately click to the shipment list page, where they could see more details about the status of the shipment and set relevant filters for their workflow.

In partnership with our research director, Silvia Vergani, we did a series of generative research activities that helped us understand why users were not using this tool and uncovered opportunities to increase adoption and usage of this feature. One of the most revealing exercises was showing clients sacrificial concepts. Sacrificial concepts are a research methodology which uses low fidelity and far future concepts as a way to enable users to co-design with our team. Prior to our research sessions, we created a set of these concepts which were lightweight first guesses that articulated a variety of ideas. One of the most revealing concepts was a “Flexport Lite” feature that showed the user significantly less data about each shipment. A particularly revealing quote came from a logistics associate at a large clothing manufacturer, who stated, “I only want to see a shipment if it’s bleeding.”

As we got to know our clients better, we realized the heart of the issue was the changing nature of our clients. When the original dashboard was built, our typical client only had a handful of shipments moving at one time. Our features — a map and list view of all of their shipments — could give clients an at-a-glance view of all of their inventory in transit. Now, many of our clients have grown to the point where they have hundreds, if not thousands, of shipments moving around the globe.

Increased volume means larger organizations and more specialized roles. Smaller clients may have a one or two-person logistics team, but many of the companies we interviewed had dozens of team members. Our “all in one” dashboard was not only overwhelming, but also irrelevant for many of these specialized users.

So what does a holistic portrait of a supply chain look like that has hundreds of times the amount of data we initially designed for and can be flexible enough to account for the growing and changing organizational make-up of our clients’ businesses?

During our client research exercises we asked them to co-create an idealized version of the dashboard. Almost all of these clients drew a table, or something very closely resembling the shipment list, their preferred landing page after quickly passing through the dashboard.

“Just give me a table!” they’d say.

Understanding that a feature request is not a solution, but an articulation of an underlying problem

As the designer leading the dashboard redesign, I started to question if we needed a dashboard if our users were telling us they don’t use it. In collaboration and partnership with Frank te Pas, our Product Manager, we came to the understanding that a dashboard is valuable in its ability to show a “zoomed out” perspective of many moving parts. Our clients’ supply chains are infinitely complex — we alleviate anxiety by providing a comprehensive, bird’s-eye view of them.

So, I went back to basics on dashboards — what exactly do they do? A dashboard, by definition, is opinionated. In a car, it does not show you the status of every cog and operation running the car, just a few key functions that must be monitored to ensure safety and performance. In a way, it acts as a notification center for the car operations, letting the driver know if a particular issue needs addressing.

I applied this framework to our dashboard. What are the key aspects of the supply chain that need monitoring and how can I design the page in such a way that could meet the wide variety of needs within different operations teams?

A dashboard provides control.

Our dashboard is to be used by the logistics operators who are responsible for keeping a business running — ensuring efficient movement of goods across the globe. Logistics work is exacting and time sensitive — a clerical error or transport delay could cost millions of dollars. And that anxiety I mentioned earlier? That is compounded by the fact that much of the work is simply making sure that other people are adequately performing work on behalf of their company — that could be the carrier who owns and operates the ship, the freight forwarder that generates their documentation, or the customs broker who ensures that they compliantly pass into their destination country.

A well-designed dashboard allows you to watch many operations at once — and allows the user to understand the urgency and responsibility of each.

A table is an attractive tool for our clients because the user can alter the filters to view different operational states. We learned that customers’ supply chain are so complex that they can only review subsets of shipments at a time. This could be product specific, in which everyone is scrambling to get inventory in for a new product launch or more commonly, workflow specific. The ability to filter by closest to delivery is relevant for a warehouse supervisor who must adequately staff up to unload the containers and to the logistics staff who are trying to monitor inventory. Shipments which have an open task that must be completed to facilitate timely transport are important to logistics associates and their managers. Hot or critical shipments, which must be treated with the utmost care, are of interest to roles across both our client and Flexport internal teams.

While a table may seem attractive, a dashboard can provide all of these operational states simultaneously.

The new dashboard

With the diversity of roles across logistics teams, it was obvious that our design had to be flexible. The module framework we used allowed for both customization and visibility into different views of work being done. A range of modules show the user where they should direct their attention. It gives them a window into the work progress of their own work and that of their external and internal collaborators. Modules treat the data like prism, showing the user various angles of their shipment data, plotted across geographical location, time until arrival, and work status. Based on these facets, the user can see outstanding work and monitor the progress of other’s work. The modules are a key function of collaboration — allowing users to clearly see when they are, and when they’re not, responsible for an operation.

Now that the dashboard has been shipped, we have already started getting requests for new modules from both clients and our internal teams who service them. For the second iteration of the dashboard, we plan to provide module personalization. These requests have opened our eyes to the opportunities for the dashboard, and we believe it can be used for our internal teams, as we face the same operational and collaborative challenges.

Like our clients, Flexport is constantly growing. Modules enable us to make workspaces more dynamic. The fixed nature of our previous dashboard was designed for one type of client. Now, it can be leveraged for both our client experience and our employee experience, making global trade easier for everyone

The Flexport Dashboard 2.0: was originally published in Flexport UX on Medium, where people are continuing the conversation by highlighting and responding to this story.

I’m a Product Designer on Flexport’s Air Freight team. It’s my job to design the tools that make it possible to ship our clients’ air freight reliably and affordably. Flexport is a freight shipping company for businesses. Brands use Flexport to ship their products from the factories where they’re made, to the places where they’re sold. We’re building software to make global trade easy for everyone.

Efficiently packing square cargo into a circular vehicle is tricky. If you don’t do it right, you end up with a lot of wasted space. And wasted space is wasted money, as air capacity is both limited and expensive.

So, how do you get as much cargo as possible onto a single flight?

Consolidation

Consolidation is the blending of different shippers’ cargo into a single, irregularly-shaped airline “container” to maximize its utilization.

It’s kind of like Tetris, but as if you were trying to fit all of the tiles into a circle. And if the tiles had to balance when tipped 15 degrees and bounced around.

Combining various shippers’ cargo tends to provide a wider variety of box sizes and shapes, to better fill the available space.

It’s complicated

Consolidation happens at the origin port (Hong Kong, for us), in a warehouse. Truckers travel to shippers’ factories, rounding up shipments from various locations to deliver to our warehouse. Once a shipment passes into our hands, we measure and weigh it.

Next, our software automatically assigns each shipment a measurement group based on its dimensions and weight. These assignments are extremely valuable since it makes it easier for our air planners to recommend the ideal combination of heavy and light packages of varying dimensions.

Lots of yelling, clipboards, text messages, paper, and eventually, data entry traditionally make up consolidation work. We wanted to create a solution that would improve current processes and could be quickly understood by our origin and destination teams.

Enter emojis!

One of the biggest challenges is keeping track of how freight is represented in software. If we get 150 boxes in 3 very similar sizes, it’s difficult to create a cargo representation that can effortlessly transition from paper to page.

Representing cargo as visual images helps the warehouse staff communicate. Nobody confuses twenty hot dogs for twenty dancing men. Emojis offer quicker visual recognition than a series of numbers.

We used emojis as the basis for ‘onboarding’ cargo into our system, but we think they can be used for so much more.

How did we get here?

We couldn’t design anything until we knew who we were designing for, so we went to ground zero: the Hong Kong International Airport, where our partners currently perform consolidation.

We documented an entire team of consolidation experts’ workflows in an attempt to create better software and ultimately improved customer experience. These consolidation experts have a wealth of expertise and the collaborative nature of consolidation was especially inspiring. It takes a lot of people to build an air container successfully.

Meeting and observing our users in the place they work was critical to the formation of our design. Ethnographic research allowed us to see the process through the eyes of our users and break down the problem into digestible chunks.

To keep track of everyone’s roles, we developed a family of key personas. These personas helped us understand each individual’s goals, needs, and idiosyncrasies. We developed the following personas and using familiar processes built a new toolkit for receiving and loading cargo.

Warehouse, meet cargo

Arthur, the intake coordinator, formally introduces the shipments to Flexport. This begins our physical relationship with the cargo.

We’re responsible for it now, which means we must make the tough decisions: which flight it should travel on, which warehouses it should pass through, which truck driver should handle it, and so on.

We’ll guide the shipment through its multi-vehicle travel itinerary from Asia to the United States.

When cargo passes into our hands, we must weigh and measure it to plan its onward travel. This updates our digital profile of the cargo and assigns each box an emoji. The emojis retain that box’s attributes, including weight, dimensions, and shipment ID. This puts a face on the cargo and helps our team load the right boxes on every flight.

Brian, the planner, uses the digital profiles of cargo to reserve space on the plane in containers, like a block of seats. The emojis help him estimate how much space each shipment will need on the plane.

Peter, the labeler, prints out Brian’s plans for the cargo in the warehouse. This plan includes the emojis, which identify each piece of traveling cargo. He uses the emojis as a mechanism to find the right boxes per flight and label them with the correct travel documents.

Terry, the Cargo Conductor

Terry, the conductor, seats the cargo. He walks around the warehouse waiting area and sizes it up. He sketches out a rough placement of each box’s position on each container. He verbally directs the labor team on how to arrange the cargo in the containers.

The Muscle

The labor team brings the cargo from the waiting area to its seat within a container. They decide exactly how the cargo is arranged in the containers, and are responsible for reporting the specific configuration details back to Terry.

The laborers arrange the cargo by size, weave it together in a bundle, and tie it together with rope. They decide exactly how the cargo is arranged in the containers, and are responsible for reporting the specific configuration details back to Terry.

Once the build is completed, the bundle will be wrapped snugly in plastic and slotted into the belly of a plane.

Emojis help us communicate

Consolidation is a beautifully messy blend of computer and human expertise. There were many things we learned from our trip to Asia, but one thing stood out: the biggest gap in the current toolset was a single mechanism for communication. It must happen every time a shipment comes into the warehouse; every time a box doesn’t fit into a container, and every time a laborers’ experience trumps the computer’s output.

The product that was missing was a common language to communicate the output of everyone’s work.

Emojis enable that. Since emojis are an abstraction, these symbols can mean as much or as little as we want. The planner uses emojis in the reservations interface to represent volume and size. For the team at the warehouse, emojis represent nothing more than ‘this box is different than that.’

The flight club

When we started, we only knew consolidation by the tools that were used to perform it. This gave us a distorted view of the process. It looks far more complicated when you see the work as a jumble of emails, excel files, paper sketches, and text messages.

Placing ourselves side-by-side with our users, in the context of their work, helped us put a face to the problem. These people didn’t need a behemoth computer system to make their process more efficient; they just needed an easier way to work with each other.

🛩📦💅

Finding Simple Solutions to Complex Problems–with Emojis was originally published in Flexport UX on Medium, where people are continuing the conversation by highlighting and responding to this story.