CMS
Revolutionising Container Yard Management with Automation & AI
My Role: UX & Product Designer
Duration: 1 year
Deliverables: Web App (Desktop First)
Summary
The Container Yard Management System was designed to bring complete digital transformation to yard operations. With automation, AI integration, and a user-focused approach, the system replaced outdated manual workflows and elevated operational efficiency.
From planning to container tracking, every touchpoint was reimagined to ensure accuracy, speed, and transparency.
Outcomes
Fully automated container yard operations with zero manual intervention
70% improvement in container movement visibility
60% reduction in turnaround time (TAT)
High stakeholder satisfaction and scalable architecture for future upgrades
Quick Facts
An overview of the project’s purpose, users, context, timeline, and goals.
What
A fully automated Container Yard Management System that digitises planning, gate entries, inventory tracking, and container movements.
Who
Container yard owners, terminal operators, and logistics managers seeking a smarter, error-free way to manage yard operations.
Where
Implemented at major container yards operating within CNB Logitech’s logistics ecosystem.
When
Designed and launched over a year period, with continuous updates based on live yard feedback.
Why
To eliminate manual errors, cut down turnaround time, boost operational visibility, and improve safety through AI and automation.
Solving the Problem
Reimagining a slow, error-prone container yard operation into a fast, automated, and intelligent system using user-centered design.
The Challenge
Container yard teams often relied on outdated systems, spreadsheets, and manual coordination to manage yard operations. This led to:
Delayed container movement
Manual errors in data entry
Safety risks due to human presence
Lack of visibility across the yard
The goal was to build a platform that streamlines planning, boosts visibility, improves safety, and eliminates manual dependencies.
My Role
Spoke with yard operators, supervisors, and planners to understand pain points
Built modular UI components to handle complex planning and inventory tasks, enabling flexibility & faster updates
Collaborated with developers and TOS vendors to ensure smooth system integration
System Overview
To make the system modular, scalable, and easy to manage, I broke down the entire product ecosystem into a mind map. This helped align all teams and stakeholders around core modules and their responsibilities. It also made onboarding and future development easier by visualising how each part connects.
Final Design
After validating the flow and layout through wireframes, I moved into high-fidelity design with a focus on clarity, consistency, and usability for yard operators and admin users alike.
Each screen was built to support real-time interaction, quick decision-making, and seamless transitions between planning, bookings, inventory, and user controls.
Dashboard
I designed the dashboard as the central control panel for yard operators and supervisors. The goal was to surface the most important data upfront, so users could make quick, informed decisions without jumping between modules.
Key Highlights:
Top KPIs
I included high-level stats for machines, tasks, and trailer performance to give users a quick overview of yard health.
Yard Performance Graphs
These graphs helped visualise movements, pending tasks, and trailer activity over time, making trends easy to track.
Zone Cards
I created a modular view for each yard zone (Track Area, Rail-side, Import/Export) with real-time status of machines, trailers, and tasks.
Live Alerts Panel
To improve responsiveness, I added a right-side alert panel showing active issues by zone with color-coded severity.
Filtering by Date & Zone
Users can easily drill down by date range or specific zone for more focused analysis.
The goal was to build a platform that streamlines planning, boosts visibility, improves safety, and eliminates manual dependencies.
Planning Engine (Rules)
One of the most powerful parts of the system was the Planning Engine. I designed the Rules section to give operational teams full control over how containers are allocated across the yard, based on custom logic, cargo type, and capacity.
What I Focused On:
Rule Creation Flow
I included high-level stats for machines, tasks, and trailer performance to give users a quick overview of yard health.
Drag-and-Select Yard Mapping
Users can select slots visually on a grid layout, either by clicking rows/columns or using drag-and-drop. This helped eliminate confusion while assigning yard areas.
Color-Coded Visualisation
I introduced custom color assignment per rule to help visually distinguish between cargo types or operations at a glance.
Rule Overview Cards
I created a card-style dashboard for existing rules, showing metadata like container process, size, customer, and total slots booked.
Interactive Yard Map View
In the Yard Area tab, users could see how each rule was distributed across the yard with totals, legends, and a smooth hover-to-detail panel to explore the data behind each rule visually.
This module helped users go from manual planning to automated yard logic in minutes. It saved hours of coordination and created better control over how the yard operates in real-time.
Planning Engine (Bookings)
The Bookings section was designed to make container planning faster, clearer, and more flexible for operators. I focused on simplifying how teams view, assign, and manage container slot plans.
What I Focused On:
Booking Dashboard View
I created a card-style layout for all bookings, showing job orders, creation dates, container numbers, and slot count. Each card gave users quick access to edit or delete entries without diving deep.
Preplanning Flow
I designed the Bookings Area with a grid layout that mirrors the actual yard structure. Users could manually assign slots or use the Auto Assign feature to save time. It supported filters by job order, container, IGM, and liner.
Color Indicators
I introduced visual labels for available, occupied, pre-planned, and selected slots. This made it easier to avoid overlaps and identify gaps in the plan.
Bulk Assignment & Update Options
The interface allowed users to select multiple containers and assign them to specific yard zones using a clean drag-select pattern, followed by quick reassignment or update actions.
This section helped reduce the time spent on manual booking allocation and brought clarity to container placement planning, especially during high-traffic hours.
Inventory
I designed the Inventory view to give yard operators a real-time, color-coded snapshot of container occupancy and distribution. The goal was to eliminate the guesswork in locating containers and provide clarity at scale.
What I Focused On:
Grid-Based Yard Visualisation
I mapped the yard area in a grid layout to match the physical layout. Each slot visually reflects the presence, size, and liner of the container using simple stacked blocks and colors.
Real-Time Occupancy Insights
I displayed overall yard occupancy and liner-wise distribution at the top, including totals for 20 ft and 40 ft containers. This helped operators plan better based on real-time load.
Color-Coded Liner Mapping
Each liner is represented by a unique color, making it easy to scan and identify container types or ownership without reading labels.
Quick Search & Filtering
To speed up operations, I included search and filters by container number, IGM, or yard area. This reduced manual lookup time significantly.
Zone Overview Sidebar
A left-side summary shows the total vs empty slots per yard zone. Users can toggle between them to focus on any specific CY block.
This screen made daily operations smoother by giving teams full visibility across thousands of slots — all in one view, without switching tabs or spreadsheets.
Closing Note
Container Yard Management System was an opportunity to transform a traditionally manual and fragmented operation into a fully automated, intelligent yard solution. By combining automation, user-centered design, and AI-powered visibility, I helped design a system that brings structure, accuracy, and efficiency to every corner of yard operations.
The project delivered clear business results:
Reduced container turnaround time by 60 percent, leading to faster yard clearance and higher throughput
Eliminated manual tracking errors, improving accuracy in container placement and record keeping
Increased operational transparency, building stronger trust with logistics teams and clients
Enabled unmanned gate operations and mobile-first workflows, enhancing on-ground safety and speed
This experience reinforced my belief in designing with purpose - balancing innovation, practicality, and long-term value in high-impact enterprise products.
