AI / GenAIAI agent observabilityDesktop + mobile

Stratos AI: one console for a fleet of AI agents

A redesign of Stratos AI, an observability and governance console for enterprise AI agents. Teams run dozens of agents across models, frameworks and environments, and need to see what is failing, what it costs and why, in seconds, at a desk or on call.

stratos.ai · interactive prototypeOpen full prototype ↗
Year
2026
My role
Lead Product & UX Designer
Domain
AI agent ops, LLM observability
Users
AI platform, ML & ops teams
Deliverables
3 core screens, desktop + mobile

Overview

Project overview

Enterprises now run AI agents built on different models (Gemini, GPT, Claude, Llama), frameworks (LangGraph, LangChain, CrewAI, Bedrock) and MCP tool servers, across dev, test and production. Each one has its own latency, error rate and token bill.

Without one place to watch them, teams found problems through angry users or a surprise invoice. Stratos AI brings every agent into one console; my redesign made that console about triage, not just data.

Before
  • Every metric had the same visual weight
  • Alerts hidden in a separate tab
  • Filters spread across pages
  • No path from an agent to its traces
  • Desktop only
→
After
  • An alert banner leads, with severity counts
  • KPIs grouped by health, spend and trend
  • The same filter bar on every list
  • Fleet → agent → trace in two clicks
  • A mobile layout for on-call triage

The challenge

Problem statement

  1. Signal lost in noise: as fleets grew, the console showed lots of data but no priorities.
  2. Slow root cause: moving from a failing agent to the exact prompt meant several screens and copy-pasted IDs.
  3. Hidden cost: token spend per agent was hard to compare, so budgets surprised teams.
  4. Away from the desk: on-call engineers had no usable view on their phones.

How might we help an AI-ops team spot, understand and fix an agent problem in under a minute, wherever they are?

Approach

My approach

  1. Audit of the existing console: what each screen showed, and what teams actually looked for first.
  2. Task analysis of the most common jobs: check health, find a failing agent, debug a trace, compare spend.
  3. Information architecture built around zoom levels, from fleet down to a single prompt.
  4. Greyscale wireframes for desktop and mobile, then a high-fidelity interactive prototype.
  5. Reusable patterns for filters, tables, status chips and expanding rows.

Information architecture

From fleet to a single prompt

Every screen is one zoom level. Users move down a level only when they need more detail, and can always see where they came from.

Level 1Fleet

Notice

Mission Control flags what is failing, costing or slowing down, before any chart.

Level 2Agent

Locate

The Agents registry filters down to the agent behind the alert.

Level 3Span

Diagnose

Traces show every span and tool call for that agent.

Level 4Prompt

Fix

The exact prompt and model show why it failed, so the team can act.

Users

Who it’s for

Primary

AI platform engineer

  • Keeps agents online
  • Debugs failing traces
  • Needs fast filtering
Primary

AI-ops / SRE lead

  • Owns SLOs and incidents
  • Watches fleet health
  • Gets paged on mobile
Secondary

FinOps / team manager

  • Tracks token spend
  • Compares agents by cost
  • Plans budgets

Principles

Design principles applied

Six principles guided every screen, on desktop and on mobile.

PriorityTriage before analytics

Applied: Alerts lead every view; charts give context after.

Impact: Problems are seen first, not found by accident.

Visual hierarchyCalm density

Applied: Light surface, neutral palette and one blue accent, so status colours stand out.

Impact: Dense data stays readable.

Same filters everywhereConsistency

Applied: Segmented controls and dropdowns behave the same on Agents and Traces.

Impact: Learn once, use everywhere.

AccessibilityNever colour-only

Applied: Every status has a text label as well as a colour.

Impact: WCAG-friendly and fast to scan.

Cognitive loadProgressive disclosure

Applied: Agent details expand inline instead of opening new pages.

Impact: Context is never lost.

Context of useMobile for on-call

Applied: Cards, a bottom tab bar and large touch targets for paged engineers.

Impact: Triage is possible away from a desk.

Low-fidelity wireframes

Greyscale wireframes of every screen, desktop and mobile

All three screens were wireframed in greyscale first, with the same regions as the final design. The mobile wireframes rethink each screen for a phone rather than shrinking it: tables become cards and navigation moves to a bottom tab bar.

Desktop · 3 screens

01Mission Control

◉ Stratos AIMission ControlAgentsTracesGOVERNToken EconomyIncidentsAsk Stratos AIMCP Proxy
DayWeekMonthRegister agent
Fleet needs attention: 1 critical and 2 warnings1 Critical2 WarningsReview
Agents offline · error rate · latency over SLO
Agents online0.0K
Total tokens0.0K
Total spend0.0K
Queries0.0K
Fleet health
Avg uptime
Spend by agent
agent
agent
agent
agent
7-day trend
Recent activity
AgentSpanTime
OK
OK
OK
Active incidents
IncidentAgentSeverity
HIGH
HIGH
HIGH
Alerts first, then health, spend and trend, then activity and incidents.

02Agents

◉ Stratos AIMission ControlAgentsTracesGOVERNToken EconomyIncidentsAsk Stratos AIMCP Proxy
DayWeekMonthRegister agent
Agents
AllMCPOnlineOfflineAll Environments ▾
AgentTypeEnvStatusLatencyErrorUptimeTokensActions
⋯
⋯
⋯
Configuration
Consumption
Tools
⋯
⋯
One registry with segmented filters, aligned metrics and inline expansion.

03Traces

◉ Stratos AIMission ControlAgentsTracesGOVERNToken EconomyIncidentsAsk Stratos AIMCP Proxy
DayWeekMonthRegister agent
Traces
⌕ Search promptAll Agents ▾All Types ▾Team ▾Model ▾Framework ▾
Auto-refreshShowing 1–10 of N
TimeAgentTypeTeamSpan / TaskPrompt previewModel
model
model
model
model
model
model
model
‹ PrevNext ›
Search plus five facets, a live-refresh toggle and paginated prompt-level traces.

Mobile · 3 screens

M1Mission Control

9:41●●● ▮
Mission Control
Fleet needs attention
1 Critical2 WarningsReview
Agents online0.0K
Total tokens0.0K
Total spend0.0K
Avg uptime0.0K
Spend by agent
agent
agent
agent
Mission
Agents
Traces

M2Agents

9:41●●● ▮
Agents
AllMCPOnline
weather▴
Latency
Error
Uptime
Research-google▾
Latency
Error
Uptime
crewai-math▾
Latency
Error
Uptime
Mission
Agents
Traces

M3Traces

9:41●●● ▮
Traces
⌕ Search prompt
All Agents ▾All Types ▾
Showing 8 of 8 traces
agenttime
tool:span_task
agenttime
tool:span_task
agenttime
tool:span_task
Mission
Agents
Traces

All screens · interactive

Every screen, live

Each frame below is the working prototype, not a screenshot. You can switch filters, expand rows and page through traces. Use “Open full screen” to explore one at full size.

01

Fleet overview

Mission Control

The landing view for platform and AI-ops teams. Instead of a wall of equal charts, it starts with what needs attention now, then gives the health, spend and trend context behind it.

stratos.ai / mission-controlOpen full screen ↗
Alert banner firstCritical issues and warnings sit above the metrics, with one “Review” action
Fleet health and spendUptime, healthy share and cost by agent, side by side
Activity and incidentsRecent runs and open incidents, linked to traces
02

Agent registry

Agents

One registry for every agent across environments. Filters for type, status and environment cut a long list down fast, and rows expand inline to show configuration.

stratos.ai / agentsOpen full screen ↗
Segmented filtersAll, MCP, Online, Offline, plus environment, in one row
Scannable tableLatency, error rate, uptime and tokens in aligned columns
Inline expansionModel, framework, team, spend and tools without leaving the list
03

Prompt-level debugging

Traces

Where engineers debug a failing agent. Search prompts, filter by agent, type, team, model or framework, and read the exact span and prompt.

stratos.ai / tracesOpen full screen ↗
Search plus five facetsAgent, type, team, model and framework
Live auto-refreshA clear toggle, so live data never moves while you read
Paginated results“Showing 1–10 of N” keeps large trace volumes manageable
M

Mobile · live

Mobile version

On-call engineers get paged on their phones, so the console has a dedicated mobile layout. The alert banner stays first, tables become cards, and a bottom tab bar switches between Mission Control, Agents and Traces. Try the filters, expand an agent or search traces.

Mission Control · Open ↗
Agents · Open ↗
Traces · Open ↗

Success metrics

How success would be measured

This is a product concept, so these are the measures I would track after launch rather than results.

Time to detect

From an incident starting to someone opening the affected agent.

Time to root cause

From opening the agent to finding the failing trace.

Cost visibility

How many teams review spend by agent every week.

Mobile triage

Share of on-call alerts acknowledged from a phone.

My role

What I owned

I owned the redesign end to end: auditing the existing console, task analysis, information architecture, dashboard and data-table patterns, the mobile layout, visual design, and building the interactive desktop and mobile prototypes with AI-assisted tools.

Product auditTask analysisInformation architectureEnterprise dashboardsData tables & filteringMobile designInteractive prototypingAccessibilityClaude

Closing

Key takeaways

  • In operations tools, order matters more than amount: the same data, ordered by urgency, changes how fast people act.
  • Consistency is speed: identical filter patterns mean people learn them once.
  • Mobile is a different job, not a smaller screen: on call, people need to triage, not analyse.
  • AI products still need classic ops UX: agents fail like any other service, so proven SRE patterns apply.

Thanks for reading

Questions or feedback? I’d love to hear them: yogeshmalikbe@gmail.com

Next case study

HelioNova Design System

View project