PortSight~8 min read

What should a freight team do first?

Four A-versus-B calls led to one thesis: this needed to be a decision tool, not a monitoring tool.

  • Role: Product strategy, design, front-end
  • Timeline: Side project
  • Team: Solo
  • Impact: Not measured yet
  • Platform: Web
The Command screen: a ranked queue of six items, each with a type tag, time remaining, dollar exposure, a confidence percentage, and a single action link.
What shipped. One ranked queue, one action per row, and the dollar figure and the deadline on the same line as the decision.

The short version

PortSight is a financial-exposure tool for freight operations: for the people who learn on a Tuesday that a customs filing was missed, a port is closed, and a carbon declaration is short by 170 tonnes, each with its own deadline and price.

I built it alone, from design through front-end. The first version did what most tools in this category do: it monitored beautifully. Risk index, active disruptions, regulatory intelligence, a map. You could study it for a minute and still not know what to do next.

The work came down to four decisions, one for each surface: show the situation, or hand someone the next move. I made them separately, then realised they were the same decision four times.

Scope

I owned

  • Product strategy and the thesis, which arrived after the decisions rather than before them
  • Four A-versus-B direction calls, one per surface, each logged with what was rejected and why
  • The design system: tokens, seven shared components, severity tiers, motion timings
  • Front-end implementation in React and TypeScript: no engineer on this
  • The accessibility and status-indicator pass, and the drift backlog naming what’s still wrong

Problem

What good is a tool that tells you everything except what to do?

A shipment is late, a filing is overdue, a port is closed. The systems that track this are good at surfacing all of it and they leave the hardest part on the desk: of the nine things currently wrong, which one costs the most if you deal with it after lunch?

That’s not a data problem. Everything needed to answer it is already on the screen: the deadline, the fine, the route, the owner. It’s an arrangement problem, and arrangement is the part nobody treats as a decision.

Who it’s for

Port operations

Vessel arrivals, berth assignment, and the question of which disruption to work first.

Compliance and regulatory affairs

Filings against statutory deadlines, where being late is priced rather than inconvenient.

Finance

Exposure across the portfolio, and what any of it means before a board meeting.

The method

I built two directions per surface, far enough to be wrong in public.

Four surfaces, and for each one an A and a B taken to working prototype rather than to a comparison table. Then a decision, written down with the rejected option and the reason next to it, so a call made in April can still be argued with in June.

What follows is that log. Three of the four rejections are things I had already built and liked.

Start with the next move

Cockpit or queue?

We chose a ranked decision queue with one row per item over a system-health cockpit showing risk index, active disruptions, and regulatory intelligence side by side. The cockpit could not immediately tell a user what to do now and needed opinionated, data-rich panels that the prototype lacked the data fidelity to support. A queue makes a strong claim about priority, and getting its first item wrong makes the product confidently wrong rather than merely unhelpful. Each row therefore shows confidence beside exposure, and filters let users re-cut the queue by type or deadline. This is a prototype with no users, so the choice is reasoned rather than measured.

The rejected cockpit: a risk-exposure score of 72 and four KPI blocks across the top, active disruptions listed in the centre, and a regulatory intelligence panel down the right.
Rejected. Handsome, dense, and it never says which of the four disruptions to open first.
The shipped decision queue: six numbered rows, each with a type tag, time remaining, dollar exposure, confidence, and one action link.
Shipped. The same information, ordered, with the question already answered.

Cut the beautiful lie

Was the map helping anyone?

We removed the map and rebuilt the list around exceptions, rather than rebuilding a map on real AIS data. The existing map used hardcoded CSS percentages, had no connection to the vessel-tracking feed, used meaningless coordinates, and occupied a third of the screen without operational value over the list. Removing the most impressive screen element made the product look less capable in the demo where capability was judged, but a real map needs a live vessel-tracking feed, coordinate rendering, and clustering; shipping the fake one would make the prototype lie to its author. This is not measured, but the rebuilt list carries exception type, for which the map version had no room.

The earlier Shipments screen: a list of eight shipments on the left, and on the right a dark grid with seven scattered coloured dots and a critical/watch/on-track legend.
The map. Seven dots on a grid, positioned by hardcoded percentages, representing nothing.
The rebuilt Fleet screen: the same shipments at full width with a new exception column showing tags like WEEE Directive Violation and ISF Filing Overdue, plus status and exception filters.
The space the map used, spent on an exception column and a filter that can cut the list by exception type.

Why that one was hard

The map is the screenshot you put in a portfolio. It is the thing that makes a logistics prototype look like a logistics product, and it took real work to build.

It also answered a question nobody in this workflow asks. An operations manager does not need to know that a vessel is somewhere in the Indian Ocean; they need to know that the import security filing on it expires in six hours. The dots were decoration dressed as instrumentation, and every minute a user spent looking at them was a minute not spent on the thing with a countdown attached.

Make twenty holds manageable

What happens when there are twenty holds, not one?

We chose a triage board with Open, In Progress, Submitted, and Resolved states plus a single-screen action view per violation, instead of a five-step wizard with a fast track for simple violations. UFLPA-style enforcement creates five to twenty simultaneous compliance holds, while the wizard makes each travel through five screens. The board risks losing the wizard’s review step, even though an incomplete filing is worse than a late one because a customs officer rejects it while the clock continues. The confirmation sheet therefore retains the full review: required fields, uploaded document, and receiving authority contact. This is not measured; the board structurally handles the multi-violation case the wizard could not.

The rejected wizard: a vertical five-step rail reading Violation, Docs, Upload, Review, Submit, with step two showing two documentation checkboxes and a Continue button.
Rejected. Five steps per violation, and a “draft restored, resuming at step 2 of 5” banner that exists because people leave halfway through.
The shipped triage board: violations grouped under Open, In Progress, Submitted, and Resolved on the left, with a full action view for one violation on the right showing required fields, an upload zone, and the receiving officer’s contact details.
Shipped. Every violation’s state visible at once, and the whole of one violation’s work on a single screen beside it.
The submission confirmation: a check mark, “Submitted successfully”, the filing destination, a CBP reference number, and a Return to board button.
The end of the flow returns you to the board rather than to the item, because the next violation is the actual next task.

Reports should recommend, not just report

Do reports need more charts or a point of view?

We chose a three-part narrative intelligence briefing with charts in a supporting sidebar over a fixed analytics grid with working filters and real exports. CFOs and risk officers open Reports to decide, and a $14.8M projected loss without its implication is not useful. The briefing presents top risk events with dollar impact, 30-day leading indicators, and two or three recommended actions with estimated ROI. That editorial position can be wrong in a way someone can point to, so each recommendation carries its arithmetic: “saves $136,000 of $756K total exposure, adds 1.5 days transit, 88% probability of SLA preservation.” Readers can reject the recommendation and retain the calculation. This is not measured; working filters and real exports remain prerequisites built under the briefing format, not instead of it.

The briefing’s first section, “What happened”: three risk events, each with an ID, a status badge, a projected exposure figure, a paragraph of context, and an action link.
01: What happened. Three events, priced, each with the next action attached.
The briefing’s third section, “What to decide”: three ranked recommendations with estimated savings, effort labels, decision windows, and links.
03: What to decide. Estimated ROI, effort, and how long the window stays open.

The thesis, arrived at backwards

PortSight is a decision-support tool, not a monitoring tool.

That sentence is in the decisions log, and it is written after the four entries above it rather than before them. I did not start with a thesis and apply it four times. I made four separate calls about four unrelated screens, wrote down why each one went the way it did, and then read the log back and found I had been answering the same question all along.

Which is an argument for keeping the log. The pattern was not visible from inside any single decision.

What each screen answers now

One question per screen

  • Command: what do I act on right now, and in what order?
  • Fleet, which shipments are off-plan, and why?
  • Exposure: what violations need resolution, and which can I batch?
  • Analytics: what does our risk exposure mean, and what should we do about it?

The rejected directions aren’t wrong. A cockpit, a real map, a wizard, an analytics grid, each is the right next layer once the decision layer underneath is proven, and each needs data fidelity this prototype doesn’t have. Build the decision layer first, then add awareness on top of it. That ordering is the product plan.

Assignments

The Assignments view: five people, each with the exposure they’re carrying, time remaining, and Escalate, Reassign, and Message actions.
The same ordering logic applied to people. Total exposure, and how much of it nobody has touched.

Building it alone

No engineer on this, so the design system is a real one rather than a Figma library. Shared style values in code, seven shared components, three severity tiers, motion timings with entrance and exit easing separated. The discipline matters on a solo project because the design decisions have to survive me implementing them at eleven at night.

The system doc carries a Known Drift section listing what’s still wrong: off-grid spacing at 7px, 10px, and 14px, and page-level styles still using hardcoded font sizes where the shared components read from the shared values. Writing the backlog down is what stops the drift being rediscovered later as a surprise.

A convincing prototype can still be untested

The uncomfortable truth is that every decision here was tested only against my own operational reasoning. I built the queue, removed the fake map, replaced the wizard with a triage board, and made reports recommend actions, then argued with myself about each call. No freight team saw it.

That leaves the load-bearing claims exposed: that the queue should order work this way, that exception type matters more than vessel position, and that five to twenty simultaneous holds is the realistic case. A single afternoon with a compliance officer could overturn any of them. The $813K exposure, $14.8M projected loss, and 92% delivery-guarantee breach probability on screen are demo data, invented to make the interface legible, not results. The useful judgment is that a prototype can make a direction clear without making it true; this one needs freight operators before it earns either metrics or confidence.

Sam Cusano