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 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.


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.


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.



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 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

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.
