Configuring a B2B Enterprise Dashboard

Product Design
UI
UX

Context

Following the successful launch of the Design System, I led the design initiative for a new product at iTradeNetwork. Through user interviews, market research, and industry analysis, we identified a clear opportunity: clients needed a modern dashboard to better support their daily operational decisions.
Company
iTradeNetwork
Industry
Perishable Supply Chain
Timeline
2021-2022
Role
Lead Designer

Our Top 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

The Perishable Supply Chain

The perishable supply chain encompasses the end-to-end process of producing, transporting, storing, and selling time-sensitive goods such as fresh produce, dairy, meat, seafood, and prepared foods. Because these products have limited shelf lives, the system requires real-time visibility, accurate forecasting, close collaboration between trading partners, and proactive risk management to ensure freshness, profitability, and customer satisfaction.
1
Illustration representing a farm.
Farm
2
Illustration representing an apple being harvested.
Picked
3
Illustration representing apple being packed into crates.
Packed
4
Illustration representing the scanning of a PTI label.
Scanned
5
Illustration representing products being shipped from the farm.
Shipped
6
Illustration representing the products being unloaded from a truck.
Delivered
7
Illustration representing products being distributed from a DC to stores.
Distributed
8
Illustration representing an apple being purchased from a store.
Sold
THe steps to get an apple for the farm to the consumer.
A map of the United States with an abstract representation of a company's supply chain.
A client's typical supply chain network spanned across North America with distribution centers acting as hubs for inventory.

Personas

Our primary users consisted of Buyers representing enterprise organizations and Suppliers representing producers of products such as produce or meats.
Buyer
Buyers are responsible for sourcing perishable goods from suppliers and ensuring the right products are available at the right time, price, and quality. They manage contracts, monitor inventory levels, track shipments, and respond quickly to shortages or demand fluctuations.
Supplier
Suppliers coordinate with farmers or producers to aggregate, price, and deliver perishable goods to retail buyers. They balance fluctuating yields, logistics constraints, and retailer commitments while managing inventory, fulfillment, and quality standards.

Challenge

Despite having access to large volumes of operational data, users struggled to translate information into actionable insights. The absence of a unified, intuitive dashboard slowed decision-making, overcomplicated task workflows, and increased operational risk across supply chain networks.
“I need a unified, reliable system that delivers actionable visibility into contracts, pricing, and supply chain performance to empower confident decision-making”

Constraints

To evaluate the effectiveness of the dashboard, we established success metrics spanning business outcomes, product efficiency, and user experience

Complex Data Sets

Supply chain operations generate large volumes of real-time data (inventory, shipments, contracts, pricing, quality metrics). The interface needed to simplify complexity without oversimplifying critical information.

Legacy Integration

The product relied on existing ERP and supply chain infrastructure. Design decisions were constrained by available data structures, API limitations, and technical feasibility.

Time-Sensitive Environment

Because perishable goods are involved, delays have immediate financial consequences. The interface needed to prioritize urgency and exception management over passive reporting.

Enterprise Adoption

Users were accustomed to spreadsheets and legacy dashboards. The new solution needed to feel modern while minimizing disruption to established workflows.

Success Metrics

To evaluate the effectiveness of the dashboard, we established success metrics spanning business outcomes, product efficiency, and user experience
Business
  • Reduction in time-to-decision for critical issues
  • Decrease in spoilage or late shipments
  • Improved contract fulfillment rate
  • Increased user adoption across buyer and supplier accounts
Product
  • Reduction in time-to-decision for critical issues
  • Decrease in spoilage or late shipments
  • Improved contract fulfillment rate
  • Increased user adoption across buyer and supplier accounts
Experience
  • Reduction in time-to-decision for critical issues
  • Decrease in spoilage or late shipments
  • Improved contract fulfillment rate
  • Increased user adoption across buyer and supplier accounts

Process

I applied a user-centered approach grounded in the design thinking process, leveraging rapid iteration to efficiently deliver solutions that reduced organizational costs while maximizing user value.
Research
MVP
Lo-Fi
Hi-Fi
Implement
Improve

Research

Before jumping into the wireframes we interviewed our Users, examined indusrty trends, and defined pain points to inform the direction of the product.

Pain Points

Comparing complex metrics
"Comparing prices of commodities to the CPI, PPI, and my organizations previous spending trends, then exporting the data in a way that is easy to comprehend."
Long Loading Times
"It takes me hours to generate meaningful reports and extrapolate insights from my supply chain analytics. Sometimes, it can takes weeks if a company has not properly integrated their data with mine."
Maintaining Inventory Levels
"I am losing money if my inventories are not filled months ahead of time. I need to be prepared for crisis and disasters. I can’t let another Pandemic lose us millions."
Exportable Data Visualizations
"I need to export my data in a meaningful way that is also easy to present to my Board of Directors. I need assets to assist my talking points and future financial projections for the company."
Predict Futures Market
"I have too much data to sort through, and not enough time to examine it thoroughly. I want to understand what is happening right now, and how I can plan ahead for the future. This is like the stock market."
Segmented Supply Chain
"I want to understand how individual commodities, locations, and sectors are performing, not just all my data at once. I need to be able to filter my data down to the item-level, and I need to do this quickly."

MVP

For the first version of the product we narrowed down the requirements to on the essentials for the MVP (minimum viable product). This strategy would save our company time and developement costs to quickly release a live product that could be continuosly iterated upon with User feedback.
A lo-fi version of the Product MVP, a dashboard that monitors the User's supply chain.

Requirments

  • KPIs(Widgets): Surface and visualize Key Performance Indicators
  • KPI Configuration: Users can customize the data that the widgets surface.
  • KPI Data Drilldown: Widgets will have additional data available if a User clicks on a widget.
  • KPI Requests: If the User does not find a widget they will be able to request a new one.
  • Data Exports: Users can export executive summaries and data visualizations to assist with internal communication.
  • Customizeable View: The dashboard view can be customized by the User.

Product Frame

To expedite the KPI iteration process, I started with the foundation of the product and leveraged pieces established by the Design System. We used a desktop screen resolution as a starting point because 100% of our Users performed their tasks at this breakpoint.
Screen Size: Desktop/Laptop, BG Color: #F5F6FA
Using a desktop resolution as the starting break point.
Product Navigation: can expand and collapse.
The product navigation was fixed to the left side of the product frame.
Product Header: Contains global actions, notifications, and the User menu.
The Product Header was fixed to the top of the screen and housed notifications an global actions.
The Page Header contains the main CTAs with consistent hierarchy and the page title.
The page header was fixed below the product header and dynamically adjudted CTAs according to the page contents.
The dashboard grid is 4 columns wide with rows that are a 136px height. The gutters are 16px.
The grid of the dashboard was defined based on competitive analysis and user interviews.
There are 4 widget sizes: 1x1, 2x1, 1x2, and 2x2.
For the MVP we decided that 4 sizes would accomdate KPI needs.
A visual representing Widgets/KPIs calling data and then drilling down.
For the technical requirements, we had our backend development team set up repos to call User data sets.

Widget Iterations

KPIs to be built were defined based on user interviews then narrowed down to the most impactful. After documenting the requirements and validating with the development team, widget iterations were completed within and Agile Development fraeworks utilizing Atlassian project management software.

One of the more complex widgets to create was the Compodity Price Index, here is the design process:
EXAMPLE

Commodity Price Index Widget

User Needs

The User needs to understand to the decimal point what prices they should be negotiating for. They are pushing millions of cases and cutting huge POs, 1 penny can equal 10 million in savings. The process of determining the prices is tedious and they need a system that ultimately saves them time to focus on other tasks. The more processes they can automate the more time they can spend focusing on the future trajectory of their organization.

Functionality

SlideThe widget will render the User’s price for a specific commodity compared to the CPI and PPI data sets. If there is a green percent that means they are saving money compared to the average consumer. The User may also drilldown into their data to view a more detailed summary of the commodity compared to additional metrics that are rendered in a much larger viewport.

Requirements

  • The widget is customizable with a stepped progress component.
  • The Widget connects to the backend data repository.
  • There is a Drilldown for the Widget that exposes all data associated with the configured data.
  • The User can share their data with others in their organization via email.
  • The User can export their data as either a PDF, CSV, or XLS.

Initial User References

Screenshots of what data visuals that the User was reviewing.
These are screenshots of what our Users were reviewing to review their commodity price indexes.

Iteration 1

Iteration 1 of the Commodity Price Index Widget.
Thoughts
My first idea with the widget was to surface the data for each individual product within a commodity family, with controls and toggles within the widget to enable data manipulation on the fly.

Iteration 2

Iteration 2 of the Commodity Price Index Widget.
Thoughts
After removing all the secondary information there was much more space to work with. Before I focused on the visual aesthetic of the widget and wasted time, I wanted to ensure that the metrics we were surfacing were exactly what the User wanted to see.

Iteration 3

Iteration 3 of the Commodity Price Index Widget.
Thoughts
Now that I new exactly what the User wanted, I could start reshaping the widget in a more efficient manor. My goal is to use the minimum amount of visual data as possible and organize it in a way that is intuitive, scannable, and actionable.

Final Widget + Drilldown

The final version of the Commodity Price Index Widget.The drilldown of the Commodity Price Index Widget.
Left: Final Widget, Right: Widget Drilldown
Thoughts
My first idea with the widget was to surface the data for each individual product within a commodity family, with controls and toggles within the widget to enable data manipulation on the fly.

Solution

The final solution is a modular, customizable dashboard that surfaces real-time insights and supports in-depth analysis through intuitive drilldowns and advanced data-table tools. By maintaining familiar workflows while enhancing efficiency, the experience reduces operational overhead and frees users to concentrate on strategic growth and relationship development.
MVP Widgets
8
Task-Time Reduction
64%
User Satisfaction
95%
Transactional Data
$2.4B+

Final Dashboard

An example of a fully configured dashboard.
High fidelity image of the final version of the dashboard that a User has configured.

Widget Drilldown

After clicking on a widget, a User would see a drilldown page.
High fidelity image of the final version of the dashboard that a User has configured.

MVP Widgets

For the MVP of the Dashboard, we worked with our Users to create 8 total widgets. Here are examples of the final results, including the empty state of each widget.

Total Statistics

Monitors the User’s total quantity or spend of a specific category.
Total Statistics widget visual.

Inventory Alerts

Lets the User know when specific items are below their days-on-hand threshold.
Inventory Alerts widget visual.

Expiring Savings

Tracks the time remaining on rebates, limited time offers, and contracts.
Expiring Savings widget visual.

Unconfirmed POs

Tracks the User’s purchase orders that are unconfirmed and require action.
Unconfirmed Purchase Orders widget example.

Commodity Price Index

Monitors the User’s average price on a commodity compared to PPI and prior year metrics.
Commodity Price Index widget visual.

Spend Comparison

Compares the total spend on specific products based on savings.
Spend Comparison widget visual.

Top Statistics

Tracks the largest totals in descending order with all items available in a drilldown.
Top Statistics widget visual.

Contract Price Variance

Displays the total variance on contracts that need to be resolved by the suppliers.
Contract Price Variance widget visual.

Widget Configuration Demo

Each widget had a custom configuration workflow so that User's could customize their dashboard based on their organizational data.

User Workflow

A demonstration of a User entering their dashboard and addressing an issue with one of their purchase orders.

Takeaways

SME Knows Best

Our biggest advantage was deep insight into users’ daily workflows. By partnering closely with Subject Matter Experts, we were able to break down the complexities of the perishable supply chain and cut through dense industry jargon, leading to more informed, user-centered decisions.

MVP is the MVP

Focusing on a Minimum Viable Product allowed the team to move quickly and iterate with purpose. By validating core features early, we built confidence in the foundation of the dashboard and created a clear path for expanding functionality.

Live Sketching, Love Results

Some of the most valuable sessions came from live sketching with users, PMs, and developers. Even without formal design training, their contributions brought fresh perspectives that directly elevated the quality and usability of the product.

1
2
3
4
1
2
3
4

Thank you!

Thank you for taking the time to learn more about my work.

Get in Touch →

About Me

Learn More →

Next Project

Learn More →

Kristopher Shogren

Design Portfolio
Email:
hello@cmykris.com
Site Menu
Social Media
Copyright © 2026 CMYKris LLC — All rights reserved.