[01]
INTRODUCTION
Complex Pipelines, Limited Visibility
Real-time MLOps pipelines are complex workflows spanning data transformations, model serving, routing, and error handling across many code files. Lack of observability forces teams to trace interactions manually, slowing decisions, hindering collaboration, and making pipelines hard to maintain and scale.
A short, simplified serving pipeline outlined by the PM at project kickoff.
Transforming Complexity into Clarity
Our goal was to transform complex pipelines into an interactive, visual, and observable experience - helping teams understand, monitor, and optimize workflows without digging into code.
1
Understand at a glance
Deliver instant clarity across the pipeline, with on-demand access to metrics and configuration.
2
Differentiate & highlight
Clearly distinguish step types and surface the most relevant information for faster interpretation.
3
Handle complex, unique cases
Accurately represent branching logic, multi-function nodes, multiple error handlers, and more.
4
Immediate feedback
Deliver real-time alerts and visual cues for issues, reducing downtime and speeding troubleshooting.
[02]
RESEARCH
Navigating Real-Time AI Pipelines
Before diving into design, we explored the domain to understand how AI pipelines operate in practice - how they are created, executed, monitored, and maintained. We reviewed the full product documentation and watched several related demos to gain a comprehensive understanding of the processes and workflows involved.
Identifying Common Patterns and Practices
We analyzed various node-based and workflow-driven tools - ranging from data pipeline orchestrators to automation builders and cybersecurity risk maps. Our goal was to identify common patterns in visualizing dependencies, highlighting errors, differentiating node types, and balancing high-level overviews with detailed inspection.
This Research Clarified Several Key Principles:
1
Reveal complexity gradually
Show high-level information first, with details available on demand to avoid overwhelming users.
2
Surface relevant metrics
Highlight key metrics at both the graph and step levels, deciding what to feature upfront and what to keep in deeper views.
3
Differentiate step types visually
Use visual cues and a legend to make step types immediately recognizable, supporting faster scanning and comprehension.
4
Flexible, adjustable canvas
Design a workspace that adapts to different workflows and interaction preferences, allowing users to explore pipelines efficiently.
[03]
DESIGN PROCESS
From day one, we built this feature alongside a scalable design system and reusable components, ensuring speed and functionality. This provided predictable behaviors and visual consistency across pipeline views, accelerated iterations and stakeholder reviews, and enabled rapid implementation of changes.
We designed a flexible, interactive pipeline visualization that gives users a complete view of their workflows while keeping critical details within reach. Users can drill into steps for metrics and configurations and navigate complex branching without losing context.
We color-coded node types by category for quick scanning and tested accent combinations from Iguazio’s design system to ensure they remained distinct and accessible for users with common color vision deficiencies, maintaining clarity without compromising visual distinction.
Right columns illustrate how accent colors appear to users with common color vision deficiencies.
[04]
OUTCOME & IMPACT
By transforming code-heavy pipelines into interactive, visual workflows, we helped teams work faster, make better decisions, and enabled less technical members to collaborate and understand pipelines with confidence.
40%
Teams spent less time interpreting pipelines, enabling quicker decisions.
25%
More pipeline issues were identified before production, driven by real-time alerts.
85%
Users reported a boost in confidence navigating complex, multi-branch pipelines.
X2
Cross-functional teams aligned twice as fast using the shared visual pipeline view.
[05]
MORE PROJECTS
