State Farm · Server Management SaaS
SaaS AI Data Center Operations
Contextual AI. Predictive planning.
Human-approved agentic workflows.
Try PULSE Working component · Scripted demo data
db-02 memory is climbing
Memory rose from 64% to 89% in 40 minutes, likely from a slow query. Adding a read replica should keep it under 70%.
Review fix opens the team-built application’s proposed plan. A person reviews and approves before any simulated action runs.
01 / At a glance
Product leadership, from direction to delivery.
One command center.
A connected operating picture.
I led the design; my team built the application. Infrastructure health, servers, databases, alerts, and response workflows come together in one experience.
Explore the working experience- Role
- Senior UX & Product Design Lead · AI Strategy & Design Engineering
- Scope
- Led the product direction, experience architecture, and interaction design, and built the design system from the ground up.
- Our delivery
- A working React application with shared Storybook components
- Designed for
- Infrastructure operators and platform teams
- The challenge
- Make connected systems understandable and proposed actions reviewable
The AI experience
From an early signal to a decision people control.
- 01
Contextual AI
Connect an insight to the specific server, rack, site, or alert it affects.
Scripted demonstration - 02
Proactive AI
Surface developing memory pressure on db-02 before the operator has to search for it.
Scripted demonstration - 03
Predictive AI
Explore when power, space, cooling, or storage could reach capacity.
Planning direction - 04
Recommendation AI
Suggest a response, such as adding a read replica, and explain the reasoning.
Scripted demonstration - 05
Human-approved agentic AI
Review a proposed plan, then approve, reject, monitor, or undo a simulated action.
Working simulated flow
02 / Challenge
An alert is only the start of the story.
An operator needs to know where a problem is, what it affects, and what to do next. I structured the experience around those connected questions.
From scattered signals
to a shared operating picture.
Site context, health states, and resource details needed to stay connected as people moved between views. The design brings a concerning trend close to the affected system and keeps the response in the same journey.
03 / Three critical design decisions
Orient. Investigate. Stay in control.
One place to orient
I organized the overview around site, rack health, telemetry, and active alerts. Site switching keeps the operating context explicit.
Know which environment you are looking at.Two views, one system
I paired a spatial rack scene with a 2D floor plan. Shared rack IDs and selection lead into the same server details.
Change perspective without starting over.AI proposes. People decide.
I placed contextual guidance beside the issue, then made the plan reviewable in AI Ops before an operator approves a simulated action.
Inspect, edit, reject, or approve.04 / Working experience
Follow one issue from signal to decision.
A rising-memory scenario shows how the built application connects investigation and a proposed response. These are captures from the working application.
01 / Locate the issue
Find the rack.
Keep the bigger picture.
The overview surfaces a critical memory alert. Switch to the floor plan to locate the rack, then continue into its host record.
- Consistent site and rack labels
- Health communicated with text and color
- Shared selection across 3D and 2D
02 / Inspect the evidence
Put the symptom
beside the system.
Server detail connects memory usage, recent activity, the affected database, and a scripted AI diagnosis. “Review fix” carries that context forward.
The question changes from “What is red?” to “What needs my attention?”
03 / Review the response
Make the approval
point unmistakable.
The operator sees the proposed steps and can edit or reject them. Approval precedes simulated execution, with progress, cancellation, failure recovery, and undo states implemented in the application.
Nothing runs until a person approves.
Reading the signals · Synthetic demonstrations
Make change understandable.
Animated CPU, network, and cluster signals, styled to match the application overview.
CPU load
81%Rolling synthetic samples. Focus the slider to pause and inspect.
Network
Synthetic liveRolling synthetic traffic samples in both directions.
Clusters
Synthetic liveSegmented meters show changing synthetic cluster capacity.
Inspect the demonstration data
| Series | Samples in sequence |
|---|---|
| CPU · percent | 54, 57, 62, 59, 68, 72, 66, 74, 81, 70, 64, 58, 61, 56, 60, 54 |
| Network · relative samples | 21, 26, 31, 24, 35, 42, 38, 44, 32, 29, 37, 46, 40, 34, 28, 36 |
05 / The system behind it
From design decisions to a working system.
I led the interaction direction; my team built reusable React components, documented their states in Storybook, and connected them to consistent demo fixtures.
How the demonstration works
React components, typed synthetic fixtures, and deterministic scenario logic power the experience. AI guidance is scripted; operational actions are simulated. No live language model or infrastructure integration is connected. This implementation is separate from the AI interaction patterns I led.
Define the experience
Translate the operator’s workflow into layouts, interaction patterns, and responsive behavior.
Build the shared parts
Document reusable components and their health, loading, error, selection, and approval states in Storybook.
Connect the workflow
Carry the same components and typed fixtures through Overview, servers, databases, alerts, and AI Ops.
Actual component evidence
Explore the pieces behind the product.
The application’s MetricTrendPanel accepts typed series, exposes time ranges, and supports keyboard sample inspection. Its Storybook interaction checks exercise those same controls.
Explore the chart component Captured from the public component library.Explore the component system
Story configuration
title: 'Data Display/Metric trend panel',
component: MetricTrendPanel,
args: {
title: 'CPU load',
kind: 'cpu',
series: overviewFixture.cpu,
previousAverage:
overviewFixture.previousCpuAverage
}Excerpt: MetricTrendPanel.stories.tsx. The story and application use the same component implementation.
06 / Results & reflection
A delivered application, with the decisions visible.
A connected operational journey
My team built the overview, server inventory and detail, database workflows, alerts, and approval-led AI Ops. Shared state keeps the scenario connected across screens.
Behavior checked beyond the happy path
The latest project checkpoint records 180 passing Storybook component/accessibility checks, plus focused browser regressions, TypeScript, lint, and application builds.
Documented application checks, not a new test run or a business-impact metric.Clarity comes from the connections
A useful command center does more than show metrics. It helps people connect a signal to its impact, inspect the evidence, and choose the next action.
See the team-built application
Explore the decisions in context.
Start in Overview, inspect a rack, and follow “Review fix” into AI Ops.