Making Data Human
- My Role
- Lead UX Designer
- Timeline
- 2024 – 25
- Key Metric
- 0→1
- Built the first scalable UX for supply chain network visualization at Blue Yonder
Core challenge
Analytics · Data Visualization
At a glance
Final solution at a glance
0→1
Built the first scalable UX for supply chain network visualization at Blue Yonder
6
User personas served from a single shared visualization system
3
Core interaction patterns designed from scratch — overview, investigation, action
✓
Improved readability, reduced clutter, and faster disruption investigation validated by PMs and planning stakeholders
01 — The Problem
What does a supply chain network look like — and why does it matter?
The supply chain of any major retailer or brand is a web of interdependencies — plants, vendors, distribution centers, warehouses, stores, transportation links, and product flows — all constantly moving, all connected. When one node in that web fails, the impact ripples downstream in ways that are nearly impossible to trace without a visual system. This was the problem the Supply Chain Network Visualizer was built to solve.
No map. No clarity. No starting point.
Before this tool existed, there was no unified visual understanding of the supply chain network. Planners operated across fragmented systems — spreadsheets, ERP reports, static dashboards — with no way to see relationships, trace disruptions, or understand downstream impact quickly. A lot of critical operational knowledge was tribal: senior planners 'just knew' how the network behaved. Newer users had no way to build that understanding.
Fragmented Visibility
Supply chain data was spread across spreadsheets, ERP systems, and static dashboards — no single place to see how entities were connected or how disruptions propagated.
Reactive Troubleshooting
When something went wrong, planners had to manually investigate which products, regions, and downstream nodes were affected — a time-consuming, error-prone investigation across disconnected tools.
Tribal Knowledge Dependency
Network understanding lived in experienced planners' heads, not in the product. Newer users had no visual reference, making onboarding slow and mistakes common.
No Impact Propagation Visibility
There was no way to quickly understand: if this node fails, what downstream operations are affected? That relationship clarity simply didn't exist.
02 — Role & Process
Simplifying complex supply chain networks.
This was one of my first major projects after joining Blue Yonder — and I stepped into a problem space where earlier UX efforts had struggled to find a scalable direction. The network was complex. The data was dense. The personas were varied. I started not from a design brief, but from the data structure — mapping entities, relationships, and planner behaviors from the ground up.
Understanding the Domain from the Data Up
I started by deeply mapping supply chain entities and their relationships — plants, vendors, DCs, warehouses, stores, transportation links, product flows. Before designing a single screen, I needed to understand how the network actually behaved, and how planners mentally modeled it. This included working with PMs and planning stakeholders to identify the critical use cases that mattered most operationally.
Surfacing Pain Through Collaborative Validation
With no open competitor references to benchmark against — this category of enterprise tool is closed and proprietary — I worked with product managers, planners, and operational stakeholders to validate readability, comprehension, and workflow logic. We tested how users interpreted node relationships, where they got lost during troubleshooting, and what information they prioritized under pressure.
Designing the Visual Hierarchy System
The biggest architectural decision was how to structure information density. Showing everything at once made the graph unreadable. Hiding too much destroyed operational context. The solution was a layered progressive disclosure model — overview first, then context-based expansion, then deep investigation — with each layer designed to preserve orientation.
Making the Graph Actionable, Not Just Visual
A visualization is only useful if users can act within it. I designed contextual interactions directly within the graph: inspect node health, trace dependency chains, filter by product or brand, trigger corrective workflows — without ever leaving the visual context. Reducing workflow fragmentation was as important as reducing visual clutter.
Refining Through Operational Feedback
Multiple rounds of iterative refinement shaped the final system. Key validations: node comprehension, filtering usefulness, expand/collapse behaviors, impact tracing clarity, and multi-persona readability. Observing how planners actually interpreted relationships — where they stalled, what they immediately understood — drove every iteration.
03 — Design Decisions
Three decisions that defined the visualization.
With no competitor UI to reference and no prior scalable UX foundation to build on, every major decision had to come from first principles — grounded in domain knowledge, user behavior, and systems thinking.
A Node Graph — Not a Table
Tables could show data but failed completely at communicating relationships. A supply chain isn't a list — it's a web of interdependencies. The node-based graph was the only format that matched how planners mentally modeled the network. It allowed users to understand dependencies visually, trace disruptions naturally, recognize patterns faster, and see operational impact chains in a single glance. The visualization had to match the mental model — not the data structure.
Progressive Disclosure to Tame Density
The network was genuinely enormous — hundreds of nodes, multiple hierarchy levels, dense interdependencies. Showing everything at once produced an unreadable, panic-inducing graph. Hiding too much destroyed the operational context planners needed. The solution: layered exploration. Overview first — network health at a glance. Then context-based filtering. Then focused sub-network views. Then on-demand detail panels for deep investigation. Each layer preserved orientation while managing cognitive load. Users could go as deep as they needed without ever losing their place.
Contextual Actions Within the Graph
The biggest failure mode of the previous approaches was forcing users to leave the visualization to take action. If you spotted a disruption but had to navigate to a separate tool to investigate it, the graph became a read-only artifact — not a working environment. We designed every investigation workflow to be triggered directly from the graph: inspect node health, view connected entities, filter by product or brand, trace impact chains, trigger corrective actions — all without breaking the visual context. The graph became the workspace, not just the overview.
Left: The network at macro overview level. Right: A planner mid-investigation — node selected, dependencies highlighted, impact chain traced.
04 — Key Screens
The visualization system in action.
Six views that represent the core of the network visualization experience — from macro overview to deep disruption investigation.
Network Overview — Macro View
The entry state. Every supply chain entity and connection visible at once — with node health status signaling where attention is needed before the planner has asked a single question.
Network Configuration — Entity Setup
The configuration surface where planners define entity types, set connection rules, and configure node thresholds that drive the entire visualization — turning raw data into a structured, interactive graph.
Disruption Alert — Node Warning State
A warning fires on a distribution center. The planner can see at a glance that something is wrong, which node is affected, and which connections are implicated — before opening a single detail panel.
Node Detail — Dependency Inspection
The investigation view. A node is selected, its detail panel surfaces inline — shipment delays, inventory depletion risk, affected retail chains, transportation dependencies — while the graph highlights the full downstream impact chain.
Store-Level Network Filter
Filtered to a single store's supply path. Planners can isolate exactly which distribution centers and suppliers feed that location — all other nodes recede without disappearing entirely.
Impact Tracing — Action from Graph
The proudest interaction. A planner traces a disruption's downstream impact, identifies affected regions and products, and triggers a corrective workflow — all without leaving the visual context of the graph.
05 — Multi-Persona Design
Six personas. One shared graph. Completely different needs.
Supply Planner
PrimaryUnderstands what broke, what it affects, and what to do about it — in that order. Every interaction must reduce time from alert to action.
Goals — Disruption visibility and fast path to corrective action.
Operations Manager
PrimaryNeeds to assess node health and throughput at a glance — without drilling into individual nodes. The overview state must surface health trends and anomalies immediately.
Goals — Node health and throughput at a glance.
Logistics Coordinator
SecondaryNeeds to see transportation and fulfillment dependencies clearly — understanding how logistics disruptions affect downstream nodes in real time.
Goals — Transportation and fulfillment dependencies.
Inventory Planner
SecondaryNeeds stock level visibility and depletion risk across the network — with proactive alerts when inventory thresholds are at risk of being breached.
Goals — Stock levels and depletion risk across the network.
Brand / Category Manager
SecondaryNeeds product-specific impact visibility — understanding how disruptions at the supply level affect specific brands and categories at the shelf.
Goals — Product-specific impact visibility.
Network Operations
SecondaryNeeds system-level health and operational integrity — monitoring the entire network for anomalies and ensuring consistent operational performance.
Goals — System-level health and operational integrity.
06 — Design System
Built from the ground up. Shared across the product.
Every component in the Network Visualizer design system was built from scratch — there was no prior UX foundation to inherit. The system covered node state management, information hierarchy, filtering controls, and interaction patterns that were unique to this product. Despite the complexity, the system was designed to serve all six personas from a single unified visual language.
Visualization Layers
Overview, context filter, sub-network, node detail, and corrective action — each layer with its own information density and interaction model.
Personas Served
Supply planners, ops managers, logistics coordinators, inventory planners, brand managers, and network operations — all from one graph.
Core Interaction Patterns
Overview scanning, context-based filtering, and deep node investigation — the three modes that define every workflow in the product.
07 — Impact
From unreadable to operational.
This was one of the first projects where I stepped into a space where previous UX attempts had struggled — and helped find a scalable direction. The most meaningful validation was simple: the visualization finally made sense to users who had been unable to understand it before.
0→1
Built the first scalable UX for supply chain network visualization at Blue Yonder
6
User personas served from a single shared visualization system
3
Core interaction patterns designed from scratch — overview, investigation, action
✓
Improved readability, reduced clutter, and faster disruption investigation validated by PMs and planning stakeholders
The design process behind the visualization — entity mapping, relationship modeling, and node hierarchy exploration before a single production screen was drawn.
08 — Reflection
What I learned designing complex systems.
Proudest Interaction
The progressive network exploration behavior. Instead of overwhelming users with a giant unreadable graph, the experience allowed planners to progressively investigate relationships while maintaining orientation. Designing hierarchy expansion, contextual filtering, dependency highlighting, and impact tracing took deep iteration and systems thinking — and it was the first time I worked on a truly large-scale visualization problem.
Biggest Challenge
Balancing macro-level network visibility with detailed node-level inspection — without losing either. Too much hidden: planners lose operational context. Too much shown: the graph becomes unusable. The progressive disclosure model was the solution, but finding the right thresholds for each layer took many iterations and direct observation of how planners actually behaved.
What I'd Do Differently
Formalize the multi-persona filtering model earlier. The realization that six distinct personas needed six different network abstractions came mid-process. Starting with a persona-specific filter architecture from day one would have saved significant rework and produced cleaner information hierarchy decisions.
Tools & Methods
Figma · FigJam · Entity relationship mapping · Node hierarchy explorations · Mind mapping · Supply chain domain research · Collaborative validation with PMs and planning stakeholders · Iterative prototype testing with operational feedback loops