Turning Complex Supply Data into Actionable Insights
This project involved designing a Supply Chain Nerve Center for a large FMCG organization. The platform was conceived as a control center for senior leadership, enabling them to monitor supply chain health, identify risks early, and take timely corrective action.
Unlike operational tools focused on execution, the primary purpose of this system was oversight and control. Leaders needed a single, reliable view that could quickly answer critical questions such as:
-
Where are disruptions emerging right now?
-
Which regions, factories, or categories require immediate attention?
-
Are key performance indicators trending towards or away from plan?
INDUSTRY
FMCG
CLIENT
Leading FMCG Organisation
TEAM
1 Lead Designer (me ), 2 UI Designer, 1 Project Manager
DEVICE
Desktop Web+ TV
Problem Statement
The client is a large FMCG organization operating multiple factories and depots nationwide. Their operations team depended on scattered spreadsheets and disconnected reports, making it difficult for leadership to get a clear, real-time view of plant performance, inventory, dispatch, and manpower in one place.
They needed a centralized control tower dashboard that consolidated factory health, stock coverage, dispatch timelines, sales movement, and external disruptions into a single, actionable view. More importantly, the system had to move beyond historical tracking and highlight early risk signals when performance was likely to drop below acceptable levels.
Design Process
Discovery Finding 01
Current reporting was fragmented and spreadsheet-based.
Discovery Finding 02
Decision-makers lacked a visual summary of regional operations.
Discovery Finding 03
Needed visibility into live incidents affecting manufacturing (e.g., floods, strikes).
Discovery Finding 04
Teams wanted drill-down capabilities by week, format, material, or depot.
Information Architecture
-
Structured KPIs into digestible widgets.
-
Created hierarchy between alerts (top-priority center map) and supporting data (side metrics).
Wireframing
-
Built low-fidelity prototypes.
-
Iterated with users for usability around toggles, legends, and date selection.
High-Fidelity Design
-
Final UI implemented with neon-accented dark theme.
Theme Concepts
Explorations
After completing the wireframes, the next step was to develop theme options. Both light and dark variations were explored so the client could review them side by side and decide the direction before moving into final UI refinement. Presenting both options early helped align expectations and accelerated decision-making.
At this stage, the graphs used placeholder data. This allowed layout, hierarchy, and visual balance to be validated before the actual data sets were integrated into the system.
Dark Theme
Light Theme
Core structure of KPI graphs
Each KPI bar chart was structured to show performance across a rolling time window: N-3, N-2, and N-1 representing the past three weeks; N representing the current week; and N+1, N+2, and N+3 indicating projected performance for the upcoming weeks.
This structure allowed users to immediately compare past trends, current status, and forward-looking forecasts in a single view, supporting quicker and more informed operational decisions.
N=Current Week/Day
