Designing Flexport

2014-Present • First Designer • Now managing a team of 11

I joined Flexport,—a software-powered full-service freight forwarder—in 2014 as one of its first employees. I worked on all things design, with product design as the priority. I used my visual, interaction and research skills to help Flexport attain product-market fit and scale its offerings. I then focused my attention on scaling and leading a design team within a high-growth startup.

In the beginning, there were only a few employees in a small office in SOMA. Flexport now employs over 400 people with offices all over the world and has raised over $200 million. I grew the design team to 12 over the last four years.

Fig1. - Flexport's interactive shipment tracking dashboard, reporting, and billing views.

Flexport’s mission is to fix the user experience in global trade. We leverage software and industry expertise to provide more visibility and control, along with lower transaction cost and prices. We have developed a global network that is culminating in what we hope will be the new operating system for global trade.

Fig2. - Flexport's logistics dashboard and shipment list view.

I designed the first major version of Flexport’s client, partner, and internal apps as the product design lead. I helped reduce transaction and operational costs by providing greater user agency and control through design. I then built and managed a team of product, communication, research, and UI system designers.

I cannot show the majority of work I did at Flexport because of proprietary concerns. Below is a sample of some of the projects I directly worked on while leading design at Flexport.


Jumpstarting User Research

User research is crucial at Flexport because of the complex workflows of the many user types that must be accommodated to make the system work. One of the first things I did at Flexport was to get out of the building and interview clients.

Fig3. - Examples of Flexport's early client persona documents.

I conducted countless user research sessions to derive product insights, employing: user interviews, contextual inquiry, persona development, card sorting, etc.

Fig4. - Pictures from a card sorting exercise I conducted to help inform the information architecture of our product.

One of my biggest insights from interviewing and observing the many people that comprise international logistics was that no one knows it all. Each knowledge worker has a depth of subject matter expertise and knows enough about adjacent roles to get their job done. This insight drove the product design architecture of our system, connecting the dots between each user type.

Flexport is now privileged to have a dedicated user researcher who helps each product designer spearhead research.


Compliance Onboarding

International logistics entails stringent regulatory compliance. Each new client needs to provide many details, documents, and verifications before Flexport is allowed to serve them. The process is painful, which made me excited to design it from the ground up.

Fig5. - Sketches and ideas for the compliance onboarding flow.

I started the project by reviewing all the known requirements with my product manager. We agreed on business and user goals and began examining the common onboarding issues. I started to sketch ideas, while my product manager further defined all the exceptions and unknowns.

Fig6. - An early map of the compliance onboarding conditional flow created in parallel to our task analysis study.

We performed task analysis and defined the conditional flow. I then created a low-fidelity prototype and began to conduct usability tests.

Fig7. - An early wireframe of the compliance onboarding interface.

I iterated the design based on insights from usability tests, as well as new requirements for exceptional cases (ex. what if the user is apart of a non-resident corporation and doesn’t have access to key documents?).

Fig8. - High-fidelity compliance onboarding views.

I then created a high-fidelity prototype and conducted additional usability tests. Once we had high confidence in the new design, we began implementation. We have made countless tweaks to the compliance onboarding flow since its launch to accommodate unique use cases.

Fig9. - An example of a quick usability test I conducted to help validate the compliance onboarding flow.

Logistics Dashboards and Shipment Views

Fig10. - Flexport's overview dashboard and shipment details view.

One of the primary touch-points of Flexort’s product system is the shipment dashboards and tracking pages. I worked closely with PMs and engineers to construct logistics visualizations, action-items, and a messaging system. These views have undergone extensive testing, analysis, and iteration to provide deep insight into a user’s global supply chain.

Fig11. - Logistics dashboards thumbnail sketches.
Fig12. - Logistics dashboard wireframes.

I sketched countless ideas and brainstormed new possibilities with my team. I created low-fidelity wireframes and prototypes to test. The outcome was three distinct views: global shipments map view, shipment list view, and shipment details view.

Fig13. - Information architecture and interface ideas.

The global shipments map view provides a graphic representation of international freight movements. Users hover on the different shipments to see metadata and click to see a summary of the shipment in a card that overlays the map.

Fig14. - A view of the overview dashboard.

The shipment list view shows shipments presented linearly. Users can sort and filter the list. This view provides a structured way to pivot information to commit subsequent action.

Fig15. - A view of the shipment map, summary card, list, and details interface.

The shipment details view provides a single source of truth for an individual shipment. Users can see route details, shipment status, associated documents, products being shipped, and have the ability to contact their logistics manager.


Website and Conversion Flows

I also designed the first major versions of the public website and conversion flows.

Fig16. - One of the final designs for the signup flow.
Fig17. - A few of the client testimonial pages.
Fig18. - Online banner ads from a retargeting campaign.
Fig19. - A graphic I created to illustrate Flexport's global presence and the people who power it.

Order Management

Order management allows users to submit purchase orders directly to their suppliers, which enables them to plan the logistics of the delivery ahead of time.

Fig20. - A collection of views from the order management interface.

I started this project by conducting many user interviews with demand planners of Flexport’s largest clients. After the initial research, I worked closely with engineers, PMs, and salespeople to better understand the technical and business opportunities that would inform the design.

Fig21. - An early task flow to execute an order.
Fig22. - A wireframe flow illustrating the creation of a purchase order.

I mapped out different creation flows based on user observations. After countless iterations and testing, we began implementing the design in small batches, iterating as we went.

Fig23. - Views from one of the final order management designs.
Fig24. - Interactions from the table view of one of the final order management prototypes.
Fig25. - Interactions from the details view of one of the final order management prototypes.

Billing

Building a better billing system with automatic updates, and easy ways to review and compare line items, export data, add payment methods, and pay for rendered services was imperative to the product’s success.

Fig26. - Past due invoice reminder flow.

I enjoyed thinking of ways to alert users to past due invoices, as well as increase transparency across our system. Many designers find these types of design problems boring. I find them fascinating.

Fig27. - Billing table to invoice details interaction.

The User Interface

I believe a good user interface emerges after implementation and shapes later implementation through a set of standard design elements, components, patterns, and views. I had the opportunity to design the first versions of the product before distilling the design system.

Fig28. - A collection of user interface elements I designed while creating Flexport’s client app.

Flexport is now privileged to have a dedicated UI systems lead who is the gatekeeper of our design library, and works with engineers to bridge the gap between design and code.


What users say

Flexport has a ridiculously high NPS rating for a freight forwarder. One of the reasons for Flexport's high NPS is its software design. Below are some recent customer quotes.

"Really great interface, easy to use — and a wonderful intermediary to the wild, messy, sort of horrible world of international freight."
"Easiest forwarder I have ever used. Their website is very helpful."
"Extremely easy to use."
"Your interface makes things too easy. Almost like having a sharp employee dedicated to handling all of our shipments."
"Great service, easy to use interface, dedicated team — it’s everything shipping should be in the modern world."
"Flexport provides the necessary visibility and end-to-end user interface I need to run a lean supply chain."
"Your software is the key difference in streamlining the whole process. I don’t know anyone else with anything similar. The onboard process was great too."
"FLEXPORT IS MY FAVORITE WEBSITE EVERRRRRRRRRRRRR"

Management Becomes a Full-Time Job

As Flexport grew, so too did our design needs.

Fig29. - An early Illustration of the design team's structure from an article I wrote on building a design team.

In 2016, the majority of my time became dedicated to managing the design team I built, and continue to develop. As the director of design, I currently manage a team of 11, including product designers, a product design manager, design system lead, user research lead, and a communication designer. I collaborated and empowered the team to develop processes related to product design, hiring, leveling, research, critique and many more areas. I also educated the leadership of Flexport on the role of design at the company and the many ways it contributes to business goals. I have written about my experience leading design at a high-growth startup, as well as how I designed the design team.

We are looking for amazing people to join our growing team. If you enjoy working on complex problems that have the potential for a major world impact, you might be the right fit for one of our open positions.


Evangelizing the mission

I believe the greatest opportunity for designers is in reinventing the antiquated industries that power our world. International logistics comprises 12% of global GDP, but the industry still operates like it’s the 80’s. Too many designers work on the easy problems because they don’t know about the inefficiencies of industries that are three steps removed from their daily experience.

Fig30. - I gave a talk at Berkeley on design’s role in reinventing the industries of the future.

As the web progresses exponentially, and user experience becomes a major part of business success, traditional and highly regulated industries like freight forwarding remain stagnant. This stagnation has produced many unnecessary barriers that — given the right foundation — design is uniquely qualified to address.

Fig31. - I was asked to speak at San Francisco Design Week. I discussed designing for the enterprise on a panel of designers from Uber, Dropbox, Blend, and Slack.

Global logistics—like so many other antiquated industries—has the power to lift millions from poverty and increase global prosperity, as well as spark conflict, increase inequality, and pollute the world. A reconstitution of international logistics is coming, and it is vital to get it right this time. I believe the next decade provides a small window for establishing a new paradigm, and designers have the opportunity to help make it right.

Fig32. - Company anniversary badges.

Promoting and further refining Flexport’s mission for different contexts within the company is just as important as communicating it to external audiences. I do my part to propagate Flexport’s mission. One example is by creating Flexport’s anniversary badges. Employees proudly stick the badges on their laptops with each passing year of their time at the company.

Fig33. - Flexport's Maker values.

Makers are made up of engineers, designers, product managers, and data scientists. They came together to determine the guiding principles of the group. The values were born out of the shared context of their roles and were interpreted by our overarching company values. I had the pleasure of designing the posters.

Fig34. - Flexport's Maker values posters presented in the office.

Joining a startup that experiences continuous rapid growth over the course of many years supercharged my growth and experience as a designer. Every six months at Flexport feels like a new chapter in its development. We reach a new stage of growth and maturity, and I have grown along with it. It has been my most rewarding professional experience.


Writings from my experience at Flexport

Designing a Design Team

This article describes how the design team at Flexport developed over the last three years. It covers the team’s evolution, roles, meetings, processes, and systems.

Leading Design in a High-Growth Startup

I’ve distilled the top 3 lessons I’ve learned while leading design at Flexport. I hope this article will help designers in a similar situation survive the rollercoaster.

Designing The New Operating System for Global Trade at Flexport

Global trade is a relationship business. Humans come together — regardless of their differences — to exchange goods and capital, and technology increases the productivity of this arrangement.