UX Challenge: Portcast Main Dashboard

The Goal

For freight forwarders, Portcast is a SaaS product that helps improve supply chain profitability.

Instead of relying on manual tracking and human intuition, Portcast leverages the power of data to accurately predict container arrival times and forecast cargo demand, ensuring that containers arriving on time and in full.

In this UX challenge project, my goal is to re-imagine the main page of the product for a Regional Control Tower Manager user.

My Contribution

Concepts & Ideation
Web app UX/UI

Team

Solo

Year

2022

The Assignment

Below is the screenshot of the current main page of the product, called “Exceptions”. It is the first screen that users are going to see when they navigate to the product URL. The assignment is to “make an improvement to the main page of the product”.

Background Research

I have to admit, a lot of the domain knowledge presented here were completely alien to me. I have had no experience working in the logistics or supply chain field. All I know is from a customer’s point of view, buying a product online and fervently checking how is it being delivered to me every single hour. And that’s the extent of it.

So I spent the first two days reading articles, learning new vocabularies and just trying to make sense of things. The questions on my mind were:

  • What is a supply chain?
  • What is a freight forwarder?
  • What is a control tower?
  • What does a control tower manager do?
  • What are exceptions?
  • How do you pronounce the word “freight”?
  • …

So after watching a bunch of YouTube videos and dozens of articles, here’s how I understood it:

Freight forwarder

Similar to a travel agent, this person or company buy space in vehicles and infrastructure and sell that space to their customers. They buy in bulk at low prices and pocket the margin. This is a very stressful job as you need to keep track of thousands of shipments moving at one time, valued at several million dollars. So a hiccup can cost a lot.

Control tower

A department that keep track of connected dashboard of data and events across the supply chain. It enables organizations to understand, prioritize and resolve critical issues in real time. With information ready at hand, organizations can better predict disruptions and respond to unplanned events.

Control tower manager

The person in charge of the control tower. She is the one overseeing everything that’s going on in the control tower. She must keep track of all shipments and ensure smooth operations. She need to deal with unpredictable, inevitable vulnerabilities and disruptions daily. All in order to optimize the operations and prevent costly mistakes.

Exceptions

Are undesirable events that happened in the supply chain. It can be delays or disruptions due to a variety of reasons: mechanical breakdown, x-ray exams need to be conducted, missing commercial invoice, discrepancies in quality and amounts, natural disasters, accidents, protests… They are critical red flags to the efficiency of the freight networks. Quickly identifying and addressing these issues will ensure smooth operations and help prevent catastrophic disruption.

With all these domain knowledge equipped, I set out to define what the assignment is about.

Clarifying the Assignment

The assignment was confusing to me in the beginning and I wasn’t sure what to do. I didn’t know whether the assignment asked for a “Main Dashboard” or an “Exception Dashboards”, or whether it’s a dashboard at all. In my mind they are two different things:

  • The main dashboard should contain pieces of information from all other tabs/menus/sections, not just exceptions.
  • While exceptions only revolves around… well, exceptions.

The competitor examples given are general home/overview/main dashboard pages, not exceptions. This also made me question whether there will always be some exceptions existing? I don’t know how often exceptions will occur, if it’s not that prevalent then will users have to see an empty screen every time they open the product? Which is definitely not ideal.

In general, I understand what exceptions are but when it comes to the details I’m rather clueless. Are Portcast exceptions automatically detected? Do they have varying urgency or impact? How accurate are they? Is there always exceptions? More research is needed so I’m definitely not confident in diving deep into it.

Therefore, I assumed that the task is referring to “product main page” instead of “exceptions page”. This would be what agents expect to see first when they open the product.

Understand the User

The target users are “freight forwarder control tower manager”, which I will call “agent” or “user” for short. They are in charge of daily operations which include looking at long excel sheet of all shipments and try to look for “needles in a haystack” – those vessels and containers that deviate from the schedule.

One thing that occurred in my mind is that if this person’s job is looking at dense datasheet and comparing dates, then with ML capabilities to analyze and predict these things automatically, does that mean this person’s job is being replaced by the machine? Then the user of this product is no longer the person described above, and has evolved into something else. However, I know I am definitely missing a lot of critical understand here, so I will stick with the original user definition.

As I described earlier, a control tower is basically an information center that fetch and display crucial data and events across the supply chain. And there are a lot of information out there, the challenge is to decide what kind of information to show to which type of people.

I referenced this graph to understand some of the functions of a control tower. For this type of user, I think it falls somewhere between tactical (event management, event monitoring, visibility/track and trace) to operational (forwarding).

So I tried to the best of my current ability to imagine myself as a user and think of what I will need.

As an agent, when opening the product, I want to:

  • Get an overview of what’s going on right now
    • How many shipments are active?
      • How many are delayed?
      • How many are on time?
      • How many are too early?
    • Critical issues that need my attention
    • Notable vents that happened since I left last time
  • Statistics (in the last 30 days)
    • How many shipments have I completed?
    • How many delayed instances happened?
    • How much money/hours saved thanks to the product?
    • Average delay time
  • New shipment activity
  • Switch to view all shipments
  • View a single shipment in details
  • Search for a shipment
  • Add a new shipment to keep track of
  • …

Above are some of the need that I guessed that an agent would be interested to know. At this point, I decided that the “product main page” should be a dashboard.

Problems and opportunities with the current screen

I can now take a look at the current screen and identify areas of opportunities for improvements. My attention turns to the “Needs attention” table.

Below are some of the concerns that I had:

  1. The distance between the status and the container name is too far away. This results in a lot of eye movement effort and also make it difficult to associate which status with which container. I would assume that container ID and status is the most important piece of information here, so they should be close to each other.
  2. The current visual treatment of predicted arrival time and scheduled time might not pack enough punch. If it’s our key selling point, we should defnitely play it up.
  3. As a user, I think I would like to know more about the reason as to why the machine predict that there will be a delay. So maybe some more information about how we come up with this number might be welcomed.
  4. Also, how sure are we about the predicted delay? Be transparent about this can earn customer’s trust as opposed to appear overconfident.

These concerns will be tackled during the design of the main dashboard.

Information Planning

I came up with the information architecture for the main dashboard and each of the widget inside it.

Low-fidelity Mockup

With the information architecture at hand, I proceeded to create wireframes and low-fidelity mockups using a combination of pen & paper and Figma.

High-fidelity Mockups

I then moved on to apply visual treatment and create high-fidelity mockups in Figma. Please keep in mind, this is just one of the way that the user interface can take shape, I just moved forward quickly with it for the sake of the assignment.

Closing Words

Given the time constraints, this is the limit to what I was able to deliver.

The most challenging aspect of this assignment to me is grasping the domain knowledge, which is the complex nature of logistics and supply chain. I figure that for an outsider person, it would take at least several months to be able to understand all the nuances of the business and empathize with the users. Hence, I actually spent more time researching than getting hands-on with the UI and UX.

Also, the assignment ask for “an improvement”, so I’m not sure whether proposing a whole new dashboard is actually in line with what is being asked of me. I hope my understanding is correct.