Fleet control,
zero ambiguity
Fleet control,
zero ambiguity
Fleet control,
zero ambiguity
A responsive web dashboard for monitoring and operating a live fleet of
industrial 3D printers — designed to surface machine state fast and enable
intervention without losing context
A responsive web dashboard for monitoring and operating a live fleet of industrial 3D printers — designed to surface machine state fast and enable intervention without losing context
A responsive web dashboard for monitoring and operating a live fleet of industrial 3D printers — designed to surface machine state fast and enable intervention without losing context
Product Design · End - To - End · Iot
Product Design · End - To - End · Iot
// Industrial Fleet Management
// Industrial Fleet Management
A plant operator is tracking multiple printers at once: active jobs, material consumption, thermal state, and fault conditions across the floor. When a machine fails mid-print, the interface has to show what happened, what is at risk, and what action is safe to take next.
A plant operator is tracking multiple printers at once: active jobs, material consumption, thermal state, and fault conditions across the floor. When a machine fails mid-print, the interface has to show what happened, what is at risk, and what action is safe to take next.
// How Overview reads
// How Overview reads
Twelve widgets on one screen resolve in three horizons. Each layer answers a different question, and each takes a different span of attention to read.
Twelve widgets on one screen resolve in three horizons. Each layer answers a different question, and each takes a different span of attention to read.
Twelve widgets on one screen resolve in three horizons. Each layer answers a different question, and each takes a different span of attention to read.
Glance
Horizon 1 — top strip
Live
Horizon 2 — middle band
Decide
Horizon 3 — lower band
Glance
Horizon 1 — top strip
Live
Horizon 2 — middle band
Decide
Horizon 3 — lower band
Fleet state. Machine health.
Job progress. All inline.
Fleet state.
Machine health.
Job progress. All inline.
203
Total prints
14.3
Avg / week
Mar 17
Peak week
203
Total prints
14.3
Avg / week
Mar 17
Peak week
203
Total prints
14.3
Avg / week
Mar 17
Peak week
F2
F2
// OVERVIEW IN MOTION
The overview brings machine health, active jobs, alerts, and material risk into one surface. Operators can scan the floor state in seconds and see where intervention is needed next.
The overview brings machine health, active jobs, alerts, and material risk into one surface. Operators can scan the floor state in seconds and see where intervention is needed next.
The overview brings machine health, active jobs, alerts, and material risk into one surface. Operators can scan the floor state in seconds and see where intervention is needed next.
// OPERATIONAL PRINCIPLES
The printers view surfaces what needs attention across the floor. The materials view shows what can slow or block production next. Together, they turn monitoring into operational awareness.
The printers view surfaces what needs attention across the floor. The materials view shows what can slow or block production next. Together, they turn monitoring into operational awareness.
The printers view surfaces what needs attention across the floor. The materials view shows what can slow or block production next. Together, they turn monitoring into operational awareness.
STATE FIRST
STATE FIRST
Machine state stays visible before detail.
Machine state stays visible before detail.
INLINE EXCEPTIONS
INLINE EXCEPTIONS
Warnings surface inline, not after the fact.
Warnings surface inline, not after the fact.
INVENTORY AS SIGNAL
INVENTORY AS SIGNAL
Material status is treated as an operational input, not a back-office metric.
Material status is treated as an operational input, not a back-office metric.
RISK BEFORE SHORTAGE
RISK BEFORE SHORTAGE
Low-stock states appear early enough to protect active jobs and planning.
Low-stock states appear early enough to protect active jobs and planning.
// Design principles
These aren't goals or aspirations — they're constraints that emerged from the operational model. Each one is visible in the product: in the order of elements, in what's in the row, in what mobile doesn't let you do.
These aren't goals or aspirations — they're constraints that emerged from the operational model. Each one is visible in the product: in the order of elements, in what's in the row, in what mobile doesn't let you do.
These aren't goals or aspirations — they're constraints that emerged from the operational model. Each one is visible in the product: in the order of elements, in what's in the row, in what mobile doesn't let you do.
Critical values appear in relation to one another, giving the operator context at a glance and reducing interpretation time.
Rows are arranged by time to attention, so the first item signals where risk is closest and focus should begin.
A missing feed still communicates system state through color, timestamp, and framing, so the operator can place it immediately.
Its role is quick intervention and status checks, with deeper setup reserved for the desktop workflow.
Critical values appear in relation to one another, giving the operator context at a glance and reducing interpretation time.
Rows are arranged by time to attention, so the first item signals where risk is closest and focus should begin.
A missing feed still communicates system state through color, timestamp, and framing, so the operator can place it immediately.
Its role is quick intervention and status checks, with deeper setup reserved for the desktop workflow.
Critical values appear in relation to one another, giving the operator context at a glance and reducing interpretation time.
Rows are arranged by time to attention, so the first item signals where risk is closest and focus should begin.
A missing feed still communicates system state through color, timestamp, and framing, so the operator can place it immediately.
Its role is quick intervention and status checks, with deeper setup reserved for the desktop workflow.
// Design System
Core and semantic token architecture for React responsive Web App. It underpins every spacing, color, and typography decision, structured for implementation.
Core and semantic token architecture for React responsive Web App. It underpins every spacing, color, and typography decision, structured for implementation.
export function StatusBadge() { return ( <span style={{ fontSize: "var(--typography-caption-fontSize)", color: "var(--color-status-success-fg)", background: "var(--color-status-success-bg)", border: "1px solid var(--color-status-success-border)", padding: "0 var(--space-control-sm)", borderRadius: "var(--radius-pill)" }}>Active</span> ) }
Open to new product challenges.
Available for product design work across web, mobile, and connected systems.