← All work
UX ResearchEnterpriseMaritime Logistics

Logic Behind the Lift

A shared picture for the people moving global trade

Imagine solving a giant, time-critical puzzle.
You cannot see all the pieces.

And the people moving them are in another room, waiting for your instructions.

That is the coordination challenge inside a container terminal. I designed SmartYard to give planners and field teams a shared view of what was arriving, what needed to move, and what had to happen next.

CompanyLoopt
RoleStaff UX Designer
Timeline2023–2024
ClientsMaersk · Ecoporto
English SmartYard interface showing service tasks and container moves by yard block, with stacker assignments below
One operational picture, from yard activity to equipment assignments. English review of the original interface · View full resolution ↗
20+interviews across operational and planning roles
R$70kreported monthly savings per client
Livein terminal operations in Brazil

One yard. A much larger chain of decisions.

A shipping container can travel from a factory by road or rail, pass through an export terminal, cross an ocean on a vessel, and enter another terminal before continuing inland. The same steel unit connects manufacturers, shipping lines, customs authorities, terminal teams and inland carriers across countries.

Inside the yard, containers are stacked in designated blocks and moved by heavy equipment. Their position has to account for vessel schedules, cargo cut-offs, customs release, inspections and collection appointments. Refrigerated cargo also needs powered storage. An inaccessible container can force extra lifts; a missed deadline can disrupt the next leg of its journey.

  1. Origin

    Factory or warehouse
    Road / rail transport

  2. Export terminal

    Receive · inspect · stack
    Prepare for vessel loading

  3. Ocean crossing

    Vessel departure
    International shipping

  4. Import terminal

    Discharge · store · release
    Coordinate collection

  5. Inland destination

    Road / rail transport
    Next supply chain stage

Illustrative container journey. SmartYard focuses on the terminal: where shipment plans become physical movements.

Operational context: Gard · Container terminal operations ↗

The yard was connected.
The information was not.

The existing tools did not bring the operation together. Data lived in spreadsheets, in people's heads, and in walkie-talkie conversations. Planners had to reconstruct the picture before they could decide what to do.

In spreadsheets

Arrival lists, schedules and separate versions of the plan.

In people's heads

Exceptions and experience that stayed with the person who knew.

Over the radio

Spoken updates that another shift could not look up later.

Separate fragmentsNo shared operational picture
Schematic based on the research findings: information existed, but it was scattered across people and channels.

Every decision was
an educated guess.

Which container moves first? Which stacker is available? What will arrive next?

Give the people coordinating the yard one shared source of truth.

The goal was to make the next decision clearer: the right information, at the moment someone needed to act. That meant understanding how a plan moved between the office and the field.

20+ interviews.
Four perspectives on the same yard.

I interviewed people across the operational chain, from yard checkers recording individual movements to senior planners coordinating terminal strategy. The research also informed the driver-facing tablet product.

Field teams knew the detail of a particular container or task. Managers and planners needed to understand what that detail meant for the whole terminal. Each role held part of the picture, and each depended on information from the others.

01

Yard checkers

Record container arrivals, departures and repositioning. Closest to the physical operation, but with limited visibility into the wider plan.

02

Operations managers

Coordinate teams across yard operations, security, customs and container release. Depend on accurate updates from the field.

03

Yard planners

Decide where containers should be positioned and when they should move. Need to connect expected arrivals, available space and planned departures.

04

Master planners

Balance terminal capacity with vessel schedules, customer agreements, refrigerated cargo needs and collection windows.

Bring the current operation and the next decision into the same view.

The information gap created work of its own. To share a container photo, a field worker had to return a company device to the office, download the image to a network folder, rename it and send it by email. Even a basic update could require several people and tools.

Expected arrivals

What is coming in, and what space will it need?

Connect expected volumes and arrival plans with the containers already in the yard. Planners need to prepare the terminal before the next movement becomes urgent.

Time in the yard

How long has this container been waiting?

Dwell time is the time a container spends in the terminal. A dwell-time projection estimates how long it is expected to stay. The planning need was to make that waiting time visible alongside collection dates, so teams could spot containers approaching an agreed window and act before delays accumulated.

Elapsed time, an estimated departure and a contractual deadline answer different questions. They should be labelled separately, rather than compressed into an unexplained “dwell” metric.

Collection planning

Position the container for its next move.

Knowing when a container is likely to leave helps planners choose an accessible position. This was an opportunity to bring Loopt's recommendations into the planning workflow and reduce unnecessary rehandling.

Task status

What is blocked, and who needs to act?

Keep the container, task, assigned equipment, timing and operational notes together. A status is useful when the planner can understand the exception and coordinate the next action.

Terminology: UNCTAD · Container dwell time ↗

Follow a plan from expected cargo to work in the yard.

The export-planning views bring voyage volumes, bookings and deadlines together. The operational views show how yard activity is distributed and which equipment is assigned to each container task.

The screens below come from the original editable designs. This portfolio review adds English localisation and small clarity improvements. The charts, components and core layouts are preserved; the refinements are not presented as new production outcomes. Figures shown in the interfaces are design sample data.

01 / Before arrival

Understand what the terminal needs to prepare for.

Compare booked and forecast cargo volumes by voyage and loading port, alongside the cut-off and gate movements. Gate-in means a container has entered the terminal; gate-out means it has left.

English export planning table with loading ports, cargo cut-off dates, bookings, forecasts and gate movements
Export planning. The table uses balanced column widths, consistent padding and wrapped headings. Forecast is a plain heading, with emphasis kept on the values. “Loading port” and “Discharge port” replace the abbreviations; the cut-off uses a readable date. Negative cut-off days indicate days before the deadline. View full resolution ↗
02 / As the deadline approaches

See how expected volumes change over time.

Compare bookings and forecasts with historical booking patterns as the cargo cut-off approaches. This gives planners context for the workload they may need to accommodate.

English shipment forecast chart with an axis counting down from thirty days before the cargo cut-off
Volume forecast. The time axis now reads “30 days before” through “Cut-off”, replacing the unexplained “DDL” labels. View full resolution ↗
03 / Across the yard

Connect the workload with the equipment.

Compare service tasks and physical container moves across yard blocks, then see the stackers assigned to those areas. A stacker is the heavy equipment used to lift and reposition containers.

SmartYard English yard overview: activity by yard block, service and move counts, active stackers and equipment assignments
Yard overview. “Quadras” becomes “Yard blocks”; “Movimentos” becomes “Moves”; equipment is identified as “Active stackers”. View full resolution ↗
04 / At task level

Make the next action easier to coordinate.

The service queue keeps each container task next to its status, assigned stacker, timing, yard position and notes. Inspection, loading and unloading each carry their own requirements and dependencies.

English container service queue showing task status, equipment, task dates, estimated start times, yard positions and notes, with a text cue on the pink timing exception
Service queue. “Est. start” clarifies the predicted time, dates use month names, and the highlighted time includes “Check” alongside the colour cue. View full resolution ↗

Small changes that make the same information easier to read.

Language

Use the team's vocabulary.

“Yard blocks”, “Unloading”, “Queued” and “Yard position” describe terminal work. “Unstuffing” means removing cargo from a container.

Time

Distinguish a forecast from a recorded event.

“Est. start” names the estimate. “03 Jun 2024” removes date-format ambiguity. The chart explains its countdown to the cut-off.

Exceptions

Give colour a text cue.

The highlighted start time carries “Check”. The queue still needs an explicit exception reason and owner before this refinement could be considered complete for production.

The office and the field need the same operational truth.

SmartYard and the driver-facing tablet emerged from the same research. One helps planners coordinate the terminal; the other helps an operator carry out the next task in the yard.

Both shared the OCTO TOKENS design system: colours, spacing and component patterns. Designing them together connected the planning view with the people doing the physical work.

Better positioning starts with a clearer picture.

SmartYard was adopted in terminal operations serving Maersk and Ecoporto in Brazil. The dashboard brought planning and yard information into a shared view, giving teams a clearer basis for coordinating container movements.

The project reported R$70,000 in monthly savings per client through fewer unnecessary container moves. When the next step is visible, planners can position a container for that step and reduce the need to lift it again just to reach another one.

← PreviousOperator's Seat All work Next →Career Progression Experience