AI Middleware: Making AI systems easier
to build, manage, and understand.
ROOTFLO · OS PLATFORM · SHIPPED 2025
Role
Product Designer
Timeline
2 weeks
Team
2 founders, 2 engineers, 1 product designer (Me)
Responsibilities
Product strategy, user flows, visual design
Overview
How do you manage AI when everything is connected to everything else?
As Rootflo started building more AI products, we noticed a pattern: every new application meant rebuilding the same infrastructure. Databases had to be connected again. Agents had to be configured again. Workflows had to be recreated. Integrations lived in different places. We needed a better way to bring all of this together.
Product Strategy
Understanding how AI applications were being built today, and defining what a scalable middleware platform should be like.
Systems Thinking
Mapping the relationships between applications, agents, workflows, data sources, APIs, and integrations.
Product Design
Turning a complex technical ecosystem into a workspace that developers could understand and manage.
problem
AI applications were becoming their own ecosystems.
Every new AI project came with its own configuration, integrations, workflows, and data sources. As the number of applications grew, so did the complexity.
Recent activity
Config 182594
Engineer
Config 182595
Engineer
Config 182596
Engineer
Repeated work
Engineers repeatedly configured the same infrastructure for every new project.
Location 2
Agents
Location 1
Database
Location 3
Workflows
Scattered information
Agents, workflows, databases, and integrations lived across different places.
Workflows
Workflows 1
Workflows 2
Agents
Agent 1
Agent 2
Agent 3
Invisible relationships
It wasn't immediately clear which agent depended on which workflow, or which workflow depended on which data source.
Application 3214
Done
Application 27849
Done
Application 4245
Done
Application 17968
Done
Application 17968
Done
Application 17368
Done
Growing complexity
Managing a few AI applications was manageable. Managing dozens wouldn't be.
AI agents could exist within a single Fortune 500 enterprise by 2028.
Enterprise applications will embed AI agents by 2026.
Organizations feel prepared to govern AI agents at scale.
Opportunity
What if every AI application could share the same infrastructure?
Instead of building each AI application as an isolated ecosystem, we saw an opportunity to create a common layer connecting everything together. Our goal was simple: One place to build and manage AI applications. The platform needed to make complexity easier to navigate without hiding the technical control developers needed.
"What should this platform make easier?"
Everything in one place
Users should never wonder where something lives.
Built for growth
Adding new AI applications shouldn't increase complexity.
Reduce mental effort
The platform should organize complexity instead of exposing it.
Make systems understandable
Users should immediately understand how data, workflows and agents connect.
flow
Middleware isn't a collection of screens. It's an ecosystem.
Before designing the interface, I needed to understand how every piece connected. Together with the engineers, I mapped the relationships between:
exploration
The biggest challenge wasn't adding features.
It was deciding how much complexity users should actually see. We explored different ways of organizing the platform before landing on the final direction.
Direction 01: Everything at once
A powerful dashboard that exposed the entire system upfront.
Why we moved on
It gave users access to everything, but became overwhelming as the number of systems grew. There was too much to scan and too many things competing for attention.
Direction 02: Deep hierarchy
A more traditional navigation structure with separate sections and nested pages.
Why we moved on
It reduced visual density, but introduced another problem: context switching. Users had to move through multiple levels to understand how different parts of a project connected.
Direction 03: Project-first workspace
A workspace organized around the application, with its components grouped into clear sections.
Why this direction
It balanced simplicity with control. Users could focus on one application while still having easy access to everything connected to it.
VISUAL DESIGN + tone
Logo design
The Wavefront identity combines movement and structure. The wave represents a living, flowing layer, while the modular blocks represent the composable systems.
Typography
A clean geometric typeface keeps the interface modern while maintaining high legibility across technical information.
Microcopy
Simple phrases such as “Let’s start your journey” make the platform feel more approachable without distracting from the work.
gradient
#101010
#ffffff
#fbfbfb
#ced1d6
Colour
A blend of white and soft gradients, maintaining light mode across platforms.
Solution
Wavefront: one workspace for the entire AI stack.
The final experience was structured around the application as the central unit. From there, users could create and manage the different components that power their AI application.
App management dashboard
The dashboard gives users an overview of everything they are building. Instead of opening separate tools for every project, users can see their applications in one place. Each application card surfaces:
Project name
Application link
Last updated time
Quick access to the workspace
A prominent Create new application entry point makes starting a new project straightforward.
One application. Everything connected to it.
Creating an application: Keep the first step simple.
Starting from zero: An empty workspace should still tell you what to do next
A new application opens with a simple onboarding state:
Instead of presenting an empty dashboard, the workspace gives users clear starting points for creating their first: Database → Agent → Workflow
The goal was to turn an empty state into a starting point.
Consistent empty states: Every module follows the same mental model
This makes the platform predictable as users move between different modules.
Creating a component: Complexity, broken into manageable steps
Rather than exposing every possible setting at once, the interface progressively introduces complexity as users need it.
Components at a glance: From empty state to structured system
A persistent Create new action keeps adding components frictionless.
Component details: Deep technical control without losing context
This gives technical users the depth they need while keeping the interface manageable.
reflection
Think in systems.
Middleware isn't just about individual screens. Understanding how agents, workflows, data, and applications connect shaped the entire product.
Structure complexity.
The goal isn't to hide complexity, but organize it so users can understand and control it with less mental effort.
Design for scale.
Every decision had to work beyond today's few applications and support a system that could grow without growing equally complex.
Clarity over decoration.
The best design decisions weren't the most visually impressive, they were the ones that made developers faster and more confident.
