Pamudi Dahanayake
← All work Plate IV · Case three of three

Freight forwarding and 3PL · Global distribution network

Freight logistics cockpit

Warehouse location detection for a global logistics operator working across approximately thirty-nine countries. Rack, aisle and bay states held in one dense view that floor staff and planners read from the same source.

Role
Sole designer, system owner
Scope
Design system and screens
Stack
Figma, specified for React
Reach
≈ 39 countries
A grid of rack cards, each labelled A07-01-01 and marked Empty, one highlighted in amber, above a dark footer paging through 01 to 32.
Figure 1 Rack detection Location state across aisles and bays
Handheld batch pick screen: a SKU header reading 00 of 40 items scanned, item cards with pick quantities, and a Scan SKU ID field pinned at the foot.
Figure 2  ·  Batch pick Handheld, gloved
Scan, then type
The SKU field holds focus so the scanner drives the screen; quantity is the only thing entered by hand.
Count in view
Items scanned against the batch total stays pinned to the group header while the item list scrolls.
Exception state
A short pick tints the whole task, not one row, so the state survives a glance from a moving forklift aisle.

The problem

The building was known; the pallet was not.

Location detection produced far more state than any screen had been designed to hold: every rack, aisle and bay, in every facility, changing continuously. Planners wanted the network view. Floor staff wanted the one aisle in front of them.

Existing tooling answered neither well. Wide tables scrolled sideways past the point of use, and per-site views hid the exceptions that actually needed a decision.

The approach

One grid, two reading distances.

The rack grid is the primary object, and it is built to be scanned rather than read: occupancy and exception states legible at a glance, identifiers legible on approach. Filters narrow the same grid instead of switching to a different layout.

Because the operator runs in dozens of countries, the type scale, number formatting and label lengths were specified for translation and for longer location codes from the outset, and the components were written against React for the build team.

What shipped

Location grid component
Rack, aisle and bay states as one scannable object, with exception treatment defined per state.
Design system and specs
Tokens, components and interaction specs written against React for the implementing team.
Internationalisation rules
Type scale, numeral and label allowances set for multi-country deployment.
Style guide in-file
Kept inside the Figma source of truth so the team could onboard without a walkthrough.