Shipment Planning

Plan outbound shipments by carrier, dock slot, destination, capacity, SLA, and exception risk before dispatch. This example brings Calendar and Carriers together so operations managers can find the next task without losing context.

It includes representative records such as North zone · Dock 2 and South route · Dock 4. Use the screenshot to study the layout, then adapt its components and product states to your own design system.

Shipment Planning
Use this template in Figr

Template facts

Screen

Calendar

Primary action

Schedule shipment

Pattern

Calendar

State

Default, loading, empty, error, permission, success

Design system

Configurable product UI theme

What this screen helps users do

Operations managers need to schedule shipment while keeping shipments today, dock utilization and exceptions visible. The interface should show what changed and who should act next.

Key elements

  • Main workspace: Calendar gives users an obvious place to start.
  • Supporting view: Carriers keeps the related context close.
  • Primary action: Schedule shipment stays visible when people need it.
  • First signal: Shipments today shows a useful value (42).
  • Second signal: Dock utilization gives additional context (76%).
  • Sample record: North zone · Dock 2.
  • Next record: South route · Dock 4.

States worth designing

  • No slots in selected range: say what changed, protect progress, and offer a clear next step.
  • Timezone mismatch: say what changed, protect progress, and offer a clear next step.
  • Booking conflict: say what changed, protect progress, and offer a clear next step.
  • Booking confirmed: say what changed, protect progress, and offer a clear next step.
  • Reschedule failure: say what changed, protect progress, and offer a clear next step.
  • View-only permission: say what changed, protect progress, and offer a clear next step.

Where this screen sits in the flow

Calendar → Carriers → Schedule shipment → Review outcome

Patterns used

Calendar, Calendar, Carriers, contextual actions, error recovery

Why these choices work

Show the timezone, resource and conflicting time slots before confirmation. Recovery should preserve the selected date and context.

Pay attention to calendar and carriers. People need to distinguish North zone · Dock 2 from South route · Dock 4. Keep shipments today visible, especially when a record changes owner or status.

Before this screen reaches handoff, verify keyboard focus, empty and permission states, and what happens after someone chooses “Schedule shipment”. Make error recovery as clear as the happy path.

Related screen examples to explore next: Warehouse Operations, Fleet Tracking, Delivery Dispatch.

Start from this in Figr

Design a shipment planning screen inside our existing product. Use our current components, tokens and content language. Include Calendar and Carriers views, credible records like North zone · Dock 2, and a clear “Schedule shipment” action. Use our product permissions and show loading, empty, error and success states. Keep the output editable in Figma.

Open Figr