Meridian
The destination handoff in one working map.
Meridian brings the freight desk onto a detailed destination planning map. A compact utility bar and icon rail frame richly layered shipment cards, each with an original vessel, aircraft, or truck illustration. Selecting a movement reveals its destination port schematic, expected arrival, cargo, and operational handoff state. Berth, collection, and transfer points support the next planning decision without implying live vehicle positioning. A secondary world view connects the same shipments over geographic coastlines, while the manifest provides a concise operational ledger. Midnight surfaces, restrained cyan routes, and clear status accents keep the working geography in focus. The crossing-route identity connects each destination to one shared operational view.
- Role
- Brand identity and frontend design
- Year
- 2026
- Platform
- Responsive website
- Status
- live
The problem
The freight desk needs arrival, cargo and collection details beside the selected movement. A destination plan must be legible without pretending to show a live vehicle position.
What I built
A freight workspace with selectable port plans, geographic route monitoring, cargo records and purposeful local shipment controls.
Inside the product.
Screens from the working product, with demonstration data.
Desktop website
A midnight port schematic takes most of the workspace. A narrow shipment rail and floating arrival docks keep the operational context close without turning the map into a background.
Scroll sideways to inspect the interface.
The choices behind it.
Brand identity and frontend design
Keep the map in command
A midnight port schematic takes most of the workspace. A narrow shipment rail and floating arrival docks keep the operational context close without turning the map into a background.
Distinguish plan from position
Each shipment selects its destination schematic and handoff facts. The secondary world view preserves geographic routes while the port view remains clearly labelled as a planning schematic.
Routes that meet at a shared node
Two crossing routes join around a central node, showing connected destinations and a single operational view.
From start to finish.
- Select a shipment
- Inspect its destination handoff
- Compare the global route or manifest
Build details Stack, scope, and implementation
Built with
- React 19
- TypeScript
- Vite
- CSS
Areas
- Web design
- Brand identity
- Dashboard
- Logistics
- Data visualization
- Dark UI