Concept · self-initiated. Fictional product; all data, research and outcomes are simulated. No live services are connected.
WED 04 NOV 2026 / LOCAL DEMONSTRATION

Every arrival.
In view.

A single operational picture of cargo, exceptions and the decisions between.

2806 scheduled arrivals today
98.4%↑ 2.6% / illustrative
0301 requires a decision
16.2h−1.8h vs sample baseline
LIVE VESSEL ROUTING / SIMULATED36.3° N ↗
PILOT STATIONBERTH 12CHANNEL 04HOLD / 14:30OFFSHORESOUTH CHANNEL
PK-4082 / REVIEWETA + 02:15
Berth 04 → 09
Awaiting confirmation
● ALIGNED ROUTE  ● EXCEPTION WATCH
DISPATCH QUEUE04 ACTIVE
01
MV Pacific CrownBERTH 12 · ARRIVING 14:45
ON TRACK
02
MV Atlas MeridianCHANNEL 04 · ARRIVING 16:10
ON TRACK
03
MV Horizon CapeBERTH 09 · ARRIVING 17:25
REVIEW
04
MV Carina NorthOUTER BAY · ARRIVING 18:30
ON TRACK
▲ DECISION REQUIRED / PK-4082

Updated arrival estimate conflicts with the assigned berth window. Review a proposed adjustment before any schedule changes.

EXCEPTIONS ARE USER-APPROVEDILLUSTRATIVE DATA / NOT LIVE TRACKINGDESIGNED FOR HUMAN DISPATCH TEAMS
PORTLINE · INDEPENDENT PRODUCT DESIGN CONCEPT · ROUTES, VESSELS AND METRICS ARE FICTIONAL.

Portline / Maritime logistics

A port-operations control tower that triages late containers and recommends accountable next actions.

The problem

Dispatch teams monitor schedules across fragmented systems and spend their highest-pressure hours chasing status updates rather than resolving bottlenecks.

Product strategy

Dense, keyboard-friendly table views use consistent urgency signals; an adjacent agent panel explains each recommendation and cites the demo fields that triggered it.

Proposed technical architecture

React, TypeScript, TanStack Table, FastAPI, PostgreSQL, Redis jobs and event-sourced audit logs. Fictional shipment records and delay reasons only. This architecture is a proposal, not a deployed backend.

Design decisions

Data-rich, utilitarian, nocturnal / navy with coral alerts. Introduce an evidence drawer with priority rationale, timeline and an explicit approval gate.

UX research approach

Synthetic research: 6 fictional dispatcher interviews, 12 modeled triage tasks. This is a fictional scenario: no real interviews or measured outcomes are claimed.

Accessibility & responsive design

Keyboard-operable controls, visible focus, readable content and responsive reflow support this concept. Reduced-motion preferences remove animated scrolling. Physical-device and assistive-technology validation remain future work.

AI-assisted workflow

Prioritize exceptions by downstream consequence; test information density with dispatch tasks; design side-by-side before/after triage states. AI-assisted implementation is used for prototyping and iteration; product recommendations here are deterministic local simulations.

Limitations & lessons

Conflicting ETAs surface as a conflict, not a consolidated fact. An agent cannot notify a carrier or reroute cargo without dispatcher approval. The next step is real user research, production data validation and accessibility testing before any launch.

Information architecture & user flow

  1. Ingest sample container status and ETA
  2. Rank late shipments by simulated impact
  3. Recommend a contact or rebooking action
  4. Dispatcher approves before any message or change

Core views: Arrivals control tower → Exception evidence drawer → Approval and audit timeline

← Back to UX/UI & Website Design