Enterprise Dashboard

Making supply chain data easier to act on.

A modular analytics dashboard for enterprise buyers of perishable goods, built to replace scattered spreadsheets and disconnected reports.

Role:
Senior Product Designer
Company:
iTradeNetwork
Timeline:
2021
Discipline:
Data Viz, Product, UI

~$2.4B

Est. Annual Customer Spend

8

Configurable Widgets

6

Months to MVP

4

Design Iterations

Context

Enterprise buyers of perishable goods had the data they needed, but it was scattered across spreadsheets and disconnected reports. Pulling it together by hand took time they didn't have, because perishable goods don't wait. My job was to design one dashboard that surfaced the right number at the right moment, so buyers could act without exporting anything first.

iTrade's Clients

Safeway company logo
Loblaws company logo
Sysco company logo
Sobeys company logo
Walmart company logo
Elior company logo
Topco company logo
Costco company logo

Challenge

The core challenge: give users clarity without oversimplifying, inside real constraints.

Constraints

Complex Data

Inventory, shipments, contracts, pricing, and quality metrics, all updating constantly. The interface had to simplify without hiding what mattered.

Legacy Integration

The dashboard sat on existing ERP and supply chain infrastructure. Available data structures and API limits set the boundaries for every widget.

Time-Sensitive Work

With perishable goods, delays cost money right away. The interface had to put exceptions and urgent items ahead of passive reporting.

Spreadsheet Habits

Buyers lived in spreadsheets and legacy dashboards. The new tool had to feel modern without breaking the workflows they relied on.

What the dashboard had to do.

Before designing anything, I set three criteria the dashboard had to meet:

Show the top priority on landing.

A buyer sees their most urgent issue without exporting anything.

Cut the manual work.

Fewer spreadsheet exports, less report assembly by hand.

Earn daily use.

Something buyers return to every day, not a one-time login.

Key Decisions

The design system already set the visual rules, so the key decisions were about what was actually valuable to buyers.

Minimal widgets, complete drilldowns.

The dashboard's core rule came from one widget: the Commodity Price Index. It took four rounds with buyers and developers to get it right, and every other widget followed what we learned.

Data tables and executive summaries buyers shared with us.

Buyers constantly went back to data tables and executive summaries to understand their supply chain. That detail had to live somewhere in the new tool.
Discovery
Screenshots of data tables and executive summaries provided by the user.
Iteration v1
The first iteration of the Commodity Price Index Widget.

My Thoughts

Show every product in the commodity family, with toggles so buyers could explore the data without switching views.

User Feedback

The chart was on the right track, but buyers needed one high-level metric first. The detail still mattered, mostly for executive reports, but it didn't belong up front.

Iteration v2
The second iteration of the Commodity Price Index Widget.

My Thoughts

I stripped out the secondary data. Before polishing the visuals, I wanted to confirm we were surfacing the right metric.

User Feedback

Closer. The high-level number and how it compared to the market mattered most, as long as the full data stayed reachable.

Iteration v3
The third iteration of the Commodity Price Index Widget.

My Thoughts

I locked which KPIs to surface and set the widget's size. That size became the base unit for every widget on the grid.

User Feedback

Buyers needed to switch the comparison period. With that, this version worked.

Iteration v4
The fourth iteration of the Commodity Price Index Widget.

My Thoughts

On our stack, icons and images inside widgets increased load times. I also needed to understand exactly how each metric was calculated.

Developer Feedback

Icons would require many extra backend calls and slow the product down. Engineering also needed full specs for the drilldown and the KPI calculations.

Final

Final widget and drilldown.

The final widget was simpler on the surface and more rigorous underneath, with more math and technical specification than I expected. It gave the whole dashboard its rule: keep each widget to the number that matters, and put everything else in the drilldown.
The final design of the Commodity Price Index Widget.
The drilldown for the Commodity Price Index Widget.

Desktop-first, on purpose.

Every buyer we spoke with did this work on a desktop or laptop, and the thing they asked about most was how spreadsheets and exports would work. So the grid was designed for large screens, built around the widget size set during the Commodity Price Index iterations.

A diagram of the dashboard product frame including the navigation, header, and grid.
The product frame: navigation, header, and widget grid.

Widget Anatomy

The dashboard was built on the company design system, so the visual rules were already set. The design work was deciding what each widget needed to do, and making every widget behave the same way.

Solution

The finished dashboard gave buyers a modular, configurable view of their most important KPIs. Users could filter their data, export executive summaries, drill down into widgets, and customize their view with configuration workflows.

Dashboard Mockup

Widget Library

What the MVP does.

6 key features.

1
An example of the "Request New KPI" button.
Request new KPIs from inside the dashboard.
2
An example of the widget library.
Choose from a library of 8 KPI widgets, determined by sessions with buyers and subject matter experts.
3
A representation of the widget configuration workflow.
Configure each widget to the metrics a buyer picks.
4
A mockup of widget data export to .PDF, .CSV, and .XLS file types.
Export executive summaries as PDF, CSV, or XLS.
5
A mockup of drilling down into a widget's data.
Read the top-level KPI on the widget and every data point in the drilldown.
6
An example of the comparison period filtering on the dashboard.
Compare periods: month over month, year over year, and prior year.

Widget Configuration

Data Table Demo

Takeaways

These are the top three concepts that I took away from this project.

Subject matter experts made the domain readable.

Perishable supply chains run on jargon. Working closely with SMEs let me design for how buyers actually worked, not how I assumed they did.

Minimal widget, complete drilldown.

One clear number up front was more useful than a detailed chart. The detail still mattered. It just belonged one click deeper.

Sketch live with the people who use it and build it.

My most useful sessions were live sketching with buyers, PMs, and developers. Hearing constraints early, like the load cost of icons, shaped the design before anything was built.