Designing Flexport

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

I joined Flexport in 2014 as one of its first employees. I was tasked with all things design, with product design as the priority. In the beginning, there were only a few employees in a small office in SOMA. Flexport now employs 400+ people and has offices all over the world. I grew the design team to 11 over the last 3+ 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 cheaper 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 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 so important 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 a number of details, documents, and verification before Flexport is allowed to serve them. The process is very 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 came to an agreement on business and user goals, and began reviewing the common onboarding issues. I began 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 further 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. - Some of the many thumbnail sketches for the logistics dashboards.
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 3 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, where 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 have the ability to 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 are able to 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 while allowing Flexport to plan logistics ahead of delivery.

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 base on user observations. After countless iterations and testing, we began implementing the design in small batches, constantly 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 pragmatically 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.


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 10, including product designers, a product design manager, design system lead, user research lead, and a communication designer. 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 3 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 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 the mode of coordination is coming and it is important that we get it right this time. I believe the next decade provides a small window to establish 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 unique shared context of their roles and were interpreted from 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 6 months at Flexport feels like a new chapter. 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 3 years. It covers the team’s evolution, roles, meetings, processes, and systems.

Leading Design at 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.