All 128Delayed600123456789At risk 3Delivered today
LoadRouteDriverETAStatus
FL-2041Rotterdam → LyonM. Jansen16:20●On time
FL-2042Antwerp → MilanA. Rossi18:05▲Delayed
FL-2043Hamburg → PragueK. Novak07:40●On time
FL-2044Le Havre → MadridL. Garcia11:15■At risk
FL-2045Gdańsk → ViennaP. Wójcik21:30✓Delivered
FL-2046Bilbao → BordeauxJ. Etxeberria14:50●On time
FL-2047Genoa → ZurichS. Keller09:05●On time
FL-2048Calais → CologneE. Martin13:25▲Delayed
FL-2049Porto → SevilleR. Sousa17:45●On time
JKto move ·Ato assign
FL-2041
Rotterdam → Lyon
M. Jansen · ETA 16:20
Collected
Border
Depot
Delivered
Weight18.4 tPallets26
RotterdamLyon
Driver note · 12 min ago
Queue at the border is about 40 minutes. Will update ETA after customs.
Component sheet of buttons, status pills and a dense data table
Fig. 1Component sheet of buttons, status pills and a dense data table
86
Components with docs
5
Product teams on one system
−30%
Time to ship a new screen
Timeline
1 year, start to launch
Audit2 mo
Tokens3 mo
Components7 mo
Migration6 mo
Sep 22NovJan 23MarMayJul
The problem
Five teams had built five tables. Dispatchers switching between screens had to relearn how to sort, filter and select a row.
Approach
We started with the table because it is where dispatchers live, then pulled buttons, pills and inputs out of it. Density is a setting, not a separate component.
Comfortable density for reading, with numbers right-aligned so they compare.
Status is the only colored column, so the eye lands there first.
Compact density for the dispatch floor: six loads fit where four did before.
Fig. 2One table, two densities.
1Comfortable density for reading, with numbers right-aligned so they compare.
2Status is the only colored column, so the eye lands there first.
3Compact density for the dispatch floor: six loads fit where four did before.
Details
Status colors are paired with a shape, so a delayed load reads the same on a grayscale printout. Keyboard shortcuts are listed in every tooltip.
Every status has its own shape: dot, triangle, square, tick.
Checked in grayscale. Each status still reads without its color.
Fig. 3Status reads by shape as well as color.
1Every status has its own shape: dot, triangle, square, tick.
2Checked in grayscale. Each status still reads without its color.
“Dispatchers live in that table for eight hours. Ines made it faster with a keyboard than the old one was with a mouse, and it shows in every shift.”
