NOLTO
Product design case · 2026

AI Logistics
Command Center

A calm operations workspace that spots delivery risk early, explains every recommendation and keeps a person in charge of the decision.

BrandUXDesktop UIMobileDesign systemPrototypePromo
Keep Everything Moving
02 · Problem

Logistics teams find problems after the customer does

A coordinator watches 100+ live shipments across carriers, borders and docks. The signal that a truck will miss its slot exists, scattered across tools, until it is too late to act cheaply.

Typical morning, without NOLTO
"Your truck is 47 minutes late for our slot." — the receiver, 14:30
The queue at Röszke jumped at 08:31. A detour would have cost €42. The penalty is €820.
01
Too many shipments

Hundreds of moving parts per shift. Lists sorted by ID, not by risk, hide the one shipment that matters.

02
Fragmented information

TMS, carrier portals, border feeds, telematics, email and phone. Context is rebuilt by hand every time.

03
Reactive workflows

Alerts fire when an ETA is already broken. The team learns about a delay when the receiver calls.

04
Slow decisions

Comparing a reroute against a slot change means spreadsheets and calls. Cost and SLA impact stay guesses.

03 · Product idea

One loop from signal to decision

NOLTO reads live tracking, border queues and carrier history, predicts delivery risk, prepares options with cost and SLA impact, and waits for a person to approve.

What is happening right now?Command Center: KPIs, live network, arrivals by destination
What requires attention?Needs attention feed, ranked by severity and time to impact
What happens if nothing is done?Projected ETA, breach risk and penalty at risk, with confidence
What is the fastest, safest action?Three comparable options, a recommendation, explicit approval
Human in the loop
04 · UX scenario

08:31. A queue at Röszke puts NL-2048 at risk

Lena Horvat, operations lead at Danubia Logistics, runs 148 shipments from Vienna. A pharma load for Medivia must reach Belgrade DC between 14:00 and 14:30. The border queue just jumped from 40 to 130 min.

LH
Lena Horvat
Operations lead · Danubia Logistics
Shift06:00–14:30, ViennaWatches148 shipments, 19 lanesNeedsAct before a slot is lost
08:42Critical card surfaces

Command Center ranks NL-2048 first: 47 min late, €820 at risk.

Command Center
08:43Cause and impact

Röszke queue 130 min on top of a 28 min late departure. Confidence 87%.

Shipment detail
08:44Three options compared

Reroute, move the slot, or transfer at Novi Sad. NOLTO recommends A.

AI Resolution
08:45Approve with a summary

What happens next is listed. Undo stays open for 5 minutes.

Decision
08:45ETA 14:39, back in slot

Dispatch and customer notified. Breach risk 82% → 4%.

Movement restored
LaterPattern by carrier

NorthLine drives 31% of exposure. A review is one click away.

Analytics
Desktop-first

The control room is a wide screen. Side-by-side comparison, dense tables and a live map need the space.

Mobile as companion

On the move, Lena approves, snoozes or calls. The full console stays on desktop.

Three minutes to a decision

From the critical card at 08:42 to an approved reroute at 08:45, with every number on screen.

Information architectureCommand CenterShipmentsExceptionsNetworkAnalyticsAutomations
05 · Command Center

Calm overview, one loud signal

Hierarchy does the triage. Five KPIs answer what is happening, the map shows where, and only one card speaks in Graphite and Orange: the decision that needs Lena now.

1KPI strip

Volume, on-time forecast, risk, critical and cost exposure. Context line under each number.

2Needs attention

Sorted by severity, then time to impact. The decision card leads with the consequence and the fix.

3Live network map

Lanes coloured by status, disruptions hatched. Pan, zoom and click a truck: this is the real product.

Live prototype · interactive
06 · Shipment and Exceptions

From a queue of problems to one shipment’s story

1Shipment detail

ETA against the slot on one rail, the corridor map, a timeline that mixes events and NOLTO actions, and facts on the side.

2Exceptions queue

Severity stripe, SLA timer and a NOLTO suggestion per row. Filters for critical, my decisions and SLA under 2 h. Bulk actions on selection.

07 · AI Resolution

Structured AI, human approval

No chat window pretending to be UX. NOLTO lays out three real options side by side, says which it prefers and why, and the person decides.

1Compare, not converse

Arrival, cost, breach risk, expected penalty, cold chain, driver hours and who must confirm.

2Show the evidence

Confidence 87% from 214 similar crossings, the feeds behind it, and follow-up questions answered in place.

3Keep a person in charge

Approve, snooze, dismiss or call. Approval shows what happens next and stays undoable for 5 minutes.

Try it: pick an option, ask a question, approve
08 · Analytics

From incidents to patterns

Analytics starts with a sentence, not a chart: the one insight worth acting on this month. Every chart below answers a question an operations lead actually asks.

1Insight first

NorthLine caused 31% of late-delivery exposure. One click to its lanes or a draft carrier review.

2Questions as titles

Are we on time? What causes delay? Which carriers drive exposure? Where are lanes late?

3Honest data

Missing timestamps are flagged per carrier, so a good score with poor data never looks trustworthy.

09 · Design system

Tokens first, components second, screens last

Every screen is assembled from components bound to semantic tokens. Changing a role, like status/critical, updates chips, rows, banners and maps at once.

91
variables,
3 collections
15
text
styles
47
components
108
variants
40
icons
Core palette
Orange#FF7A1ACanvas#F4F0E8Graphite#24211FTerracotta#C95C3BPeach#FFD7B5Sage#7F9187
Responsive logic. 1440 desktop with full rail. Under 1280 the rail collapses to icons, under 1200 split views stack. 390 mobile is a companion layout from the same tokens.
Rendered with the product’s own CSS
10 · Mobile

A companion, not a shrunken console

Mobile answers one question: does anything need me right now? Priority feed, exceptions, a plan picker and approval.

1Thumb-first actions

Primary action sits above the tab bar. Sheets keep context visible behind them.

2Same tokens, own components

List item, top bar, bottom nav and sheet are built for 390 pt, not scaled from desktop.

3Approval with undo

The same two-step approval as desktop, with a 5 minute undo.

PriorityExceptionsPick a planApproved
11 · Motion and prototype

Motion explains what changed

Every transition carries information. 150 ms for hover, 300 ms for panels, 600 ms for data. Ease-out, no bounce.

Route redraws

The new path draws from the truck to the destination, so the change is readable in one glance.

15:17
Numbers count, never jump

ETA counts to 14:39 and changes colour as it enters the slot.

Breach risk
82%
Risk shrinks with the decision

Cause and effect stay on the same screen: approve, and the bar answers.

Live: press “Approve recommended plan”
Figma prototype. Two flows with Smart Animate.Promo film. 37 s, 16:9 and 9:16, built from this UI.
NOLTO, Keep Everything Moving
Thank you
AI Logistics Command Center · Product design case · 2026