Terminal 49

Tracking an $800b industry

Terminal 49 is a logistics and tracking startup who focuses on solving the last mile in container shipping; an 800 billion dollar industry.

Last Mile refers to the the stage in a shipping containers life-cycle where it needs delivered from the import terminal to its final destination via over-the-road trucking.

The problem

There was no way for users to easily track orders and containers

Terminal 49 is functioning in a mixed state of piecemailing their own interface together while also reacting manually to emails and notifications related to the entire container life-cycle; creating an overwhelming amount of information to sift through and track for themselves, and their users.

Ramping up with research

Shipping is an old industry and much of its processes crudely took shape in the 60’s and haven’t changed much since.

Workers in this industry, as we’re told, don’t rely on technology much beyond their phones, if that, so we were faced with creating a tracking system that would be friendly for less tech-savvy users.

Terminal 49 had established a number of personas, so the project began by getting acquainted with them, wrapping our heads around the container shipping industry and all it’s unique processes, terminology, and phrasings.

My roles
  • Mentor junior designers
  • User testing and synthesis
  • Explore IA and wireframe of dashboard shell
  • Icon design
  • Establish a grid system for team design consistency
IA & wireframes

In spite of the industry’s history, not much exists to competitively reference and research, so, when it came to what would inform our initial IA and wireframe suggestions, we took what we learned about the industry and personas and opted to usability test two options, increasing our odds that we strike a chord with the client in the first round; I led a team that came up with Option B which used a column approach.

Option A
Option B
User testing
User testing

Our client served as our testers; not desirable, but better than nothing.

Since Terminal 49 is a new concept in the Last Mile shipping industry, our client wasn’t yet comfortable testing anyone outside of the company.

Testing taught us:

  • Our iconography usage needed to be reigned in
  • Some users experienced dyslexia if certain information bits were too close together
  • Users value filtering orders by segments of an order/containers journey
Icon design

This assignment was one of my more enjoyable challenges in the project. It’s another design extension of taking something complex (a container ship or a container crane) and distilling it into something simple and easy for a user to understand.

Fast forward; solutions

Option A was approved by a happy client and is in development.
Option A

As a team, through user-testing, attention to personas, and a lot of collaborative sketching and white-boarding, we delivered a tracking system that simplified a cluttered process for users. The format does what we set out to do; handle a lot of information and allow the user to:

  • Customize their dashboard settings
  • Create orders
  • Upload documents
  • Track orders
  • Access necessary information

Pros:

  • Handles a lot of information
  • Tracker is customizable per user
  • Filters Container Order results into logical phases of the shipping cycle

Cons:

  • Requires user to click and scroll a little more than necessary
  • Relies too heavily on icons; difficult to interpret
  • Lacks negative space
LIST VIEW
EXPANDED VIEW

Another look at Option B

A different approach
I was a fan of Option B, so, after the project finished, I went back and had another look to satisfy my own curiosity.

Option B organizes information in a way that allows users to maximize the amount of information in front of them and track orders with less clicking and scrolling.

Pros:

  • Handles a lot of information
  • Fewer clicks and scrolling to reveal more information than Option A
  • Increased negative space for improved scan-ability; readability
  • Relies more on words versus icons
  • Uses color coding; shapes for visually impaired
  • Includes spreadsheet view with horizontal scrolling

Cons:

  • Unknown
  • Untested by the client or their users
TASK FLOW
Overview Prototype

Design Decisions

Structure; an email analogy

Option B is rooted in a common email app layout like Outlook, Mac Mail, among many others. This structure is familiar to millions of people and takes the user from left to right, going from general information to detailed.

Mailboxes/Folders  =  Navigation Filters

Email inbox  =  Order list

Email window  =  Order overview

Navigation

Revisiting the navigation, I wanted to reduce the reliance on icons, but at the same time, give the user a way to visually reference what they’re seeing by using a color system; shapes for color blindness. My hope is that these visual anchors will serve a dual purpose:

  1. act as something like mental breadcrumbs, allowing the user to know where they are in the tracking system, or what they’re looking at, with less overall scanning
  2. Bring clarity to order lists that might include orders from various stages in the container life-cycle
"View by" filtering

Certain personas only desire to see certain information; this feature makes it easy to exclude or include information.

View by options
Maximizing the view

The initial default view shows all information about an order. Scrolling up maximizes the view-space for containers by reducing the order overview information.


Color is used to indicate which stage an order is in:

  • On ship
  • At Terminal
  • Pickup
  • Delivery
Full order overview
Minimized views
Spreadsheet view

Some people just love spreadsheets, so for those who appreciate long lines of information, I’ve included this long sentence (optimized for desktop) and included horizontal scrolling.

Spreadsheet Prototype
Final thoughts

For a 0-1, Terminal 49 has what they need to get the ball rolling, they’re pleased with what our team put forth, and I feel good that the person manning the ship over there will continue to build and improve on what my team provided.