top of page

Cargo Loading Interface

Redesign a cross-platform logistics interface that helps planning personnel manage cargo loading, optimize space usage, and streamline real-time handling coordination.

Please note: Due to the nature of this project being a government contract, only limited information and visuals can be shared in accordance with security and confidentiality requirements.

C-17 Globemaster_edited.jpg

Quick Information

Role

Lead UX Designer

Process

Discovery & research

Ideation

Redesign

Final Takeaway

Tools

Figma/Figjam

Adobe Xd

Teams

MS Office

Goal

Design a modern, logistics interface that enables planning personnel to efficiently manage cargo loading operations, maximize available storage space, and coordinate real-time handling across teams and locations.

Problem

Current users rely on an outdated and unintuitive interface, which presents a steep learning curve for new personnel and frustrates experienced planners. The manual entry process for managing field-based transfer lists is time-consuming and error-prone, often resulting in delays, miscommunication, and inefficient space utilization.

Solution

Develop an intuitive, visually-driven drag-and-drop interface that simplifies cargo organization while providing real-time feedback and validation. The new system will significantly reduce manual data entry, improve usability for both new and experienced users, and support faster, more accurate decision-making in high-paced logistics environments.

Discovery & Research

Objectives:

  • Understand workflows of planners and other relevant personnel.

  • Identify bottlenecks to planners based on real user input. 

  • Align digital tool functionality with real-world constraints.

Activities:

  • Onsite observations with 2 logistics planners

  • Workflow mapping from cargo intake to cargo final check

  • Pain point identification of current guidance through application and table-based planning layouts

Key Insights:

  • Manual inputs (entering long character strings) cause frequent errors and inefficiencies.

  • Open spaces in cargo area leads to incorrect loading/unloading feedback.

  • Real-time updates are  miscommunicated to teams due to labeling.

  • Users need a visual, drag-and-drop interface to simulate cargo loading and planning.

planning-Research.jpg
planning-Drawing_1.jpeg

Define, Sketch, & Ideate

Feature Prioritization:

  • Visual layout of cargo bay with clear labeling

  • Drag-and-drop cargo placement

  • Visual suggestions for specific cargo restrictions

  • Shared loading alerts for up-to-date information 

Activities:

  • Sketching sessions to map workflows from intake → plan → load → manifest review

  • Designed low-fi wireframes for:

    • Cargo intake screen

    • Load planner with drag-drop interface 

    • Interaction indicators and labels

    • Reports and manifest print selection modal 

Interaction Concepts:

  • Scale-based bay view of containers 

  • Auto-calculating center of gravity/weight balance

  • Real-time “loading status” indicators shared to all roles

Wireframe & Prototype

Outputs:

  • Wireframes:

    • Layouts for multiple different cargo bay configurations

    • Color coding and labels for various types of cargo and cargo seating 

    • Drag-and-drop walk through with each stage in process clearly defined

Early Validation:

  • Drag-drop needed larger interactive targets

  • Color codes for cargo types improved accuracy

  • Most planners would like to be able to toggle tooltips and microcontent

Tools:

  • Figma interactive prototypes

  • FigJam for live session mapping with client

  • User feedback via 1:1 on-site sessions

loading-diagram.png
planning-system.png

Design System & Dev Handoff

Deliverables:

  • Component library items for planner avatars, cargo tiles, cargo loading zones labeling

  • Documentation and visuals for development reference and artifacts

  • State mapping for cargo status: planned, selected, confirmed, rejected, success

  • Tooltips and example content for planners to expand on

  • Export-ready specs for:

    • Report selection

    • Manifest selection

Final Delivered

Outputs:

  • Drag-and-drop cargo layout with corresponding labeling

  • Cargo tagging: success, warning, and error messaging

  • Tooltips with the ability to toggle visibility

  • Cleaner interface with updated theme utilizing latest design system modifications 

  • Exportable reports/manifests and (CSV, PDF, print)

Early Feedback:

  • Planning time was reduced

  • Planners reported increased confidence in load accuracy

  • Improved coordination via shared exportable reports/manifests

Next Steps:

  • Implement newer cargo carriers into the system now that there is a solid foundation

  • Expand the drag-and-drop to other sections of the website with the template built

  • Improve on the report/manifest page content to include cargo bay layouts created

OutputComponentExample_2.jpg
bottom of page