Case study 02Enterprise AI agent platform2026

One calm place to build, test, govern and run AI agent workflows.

A ten-week, end-to-end redesign of an enterprise AI agent platform. The goal: a product a process owner can learn in a day and a CISO can approve in a meeting. I took it from a dense dark-mode admin tool to a calm, glass-box product with sandbox runs, replay, approvals and policies built in.

Role
Lead UX Designer
Client
N3XGEN.io
Timeline
10 weeks · 2026
Platform
Web · light mode · 1440 → 1280
Team
2 product designers, researcher, content designer
5 → 3core objects, so the product model can be learned in ten minutes
13innovation bets, ranked and split into Now, Next and Later
218components in a light-mode system built on 134 variables
01Overview

AgenticOS is where enterprise teams build AI agent workflows: a support agent that reads a ticket, checks a policy and drafts a refund, with a manager’s approval in the middle. The first version worked, but it looked and felt like a set of admin tables and dense modals. The most important safety feature, Dry Run, was a small switch inside a long form.

Gartner expects more than 40% of agentic AI projects to be cancelled by the end of 2027, because of rising costs, unclear value and weak risk controls. I treated those three reasons as the design brief. If the product could make cost visible, value provable and risk controllable, it would get approved. If not, it would end up in the 40%.

North star: any enterprise team should be able to turn a process into a safe, observable AI agent workflow in one afternoon, and trust it in production.

10weeks from kickoff to a beta-ready handoff
6personas across build, run, govern and fund
13innovation bets ranked by impact
34screens wireframed, then designed in hi-fi
A note on evidence

The audit of the existing product, desk research, competitor review, concepts, wireframes, brand, design system and hi-fi screens are finished work. Interviews, usability rounds and the beta were planned for after handoff. So personas are proto-personas, and every metric here is a target we agreed, not a measured result.

02Role & process

I led the UX vision and process end to end, with two product designers, a UX researcher and a content designer. One designer owned Build (canvas, agents, templates). The other owned Run, Observe and Govern. I owned research strategy, the information architecture, the design system direction and the handoff, and I kept the decision log: what we chose, why, who decided, and what we did not choose.

PhaseWeeksWhat happenedGate
KickoffW1Vision workshop, stakeholder map, research ops, success criteriaG1 · Vision agreed
DiscoverW1–3Audit, market scan, competitors, mood boards, personas, journeysInsight report
DefineW3–4Problems and HMWs, 13 bets, principles, object model, IA, flowsG2 · Problems and bets signed
DevelopW5–8Concept sprints, lo-fi to mid-fi, design system, prototypeG3 · Concept chosen
DeliverW8–10Hi-fi for every screen and state, accessibility pass, Dev Mode specsG4 · Hi-fi approved
HandoffW10Engineering walkthrough, design QA, beta planG5 · Beta live

The design system started in week four, not week eight, so screens were built on it instead of before it. A steering group of the CPO, CTO and VP Sales signed each gate, and a one-page decision memo went out the day before every review. Short memos made for short meetings.

03Discover

I began with a screenshot audit of twenty screens from the existing dark-mode product, rated P0 to P2. The base was solid, but the product’s promise was invisible. Dry Run was a tiny switch in a dense form. Mission Control showed four failed KPIs while every service tile said Healthy. The task builder was a list, not a canvas, and nothing taught people the five-level model of Department, Task, Task Pipe, Goal and Run.

Then I mapped how a team builds one AI workflow today. It touches eight places: Slack and Jira for the idea, scripts or n8n to build, an LLM console for the AI logic, a laptop with copied data to test, email and meetings to approve, CI to deploy, log tools to monitor, and spreadsheets to report.

  1. 1Idea
  2. 2Build
  3. 3AI logic
  4. 4Test
  5. 5Approve
  6. 6Deploy
  7. 7Monitor
  8. 8Report

Eight places for one workflow. Our desk research assumed 6–8 tools and 4+ teams before go-live, with no single place to see flow, risk and cost.

What the client asked for, and what it meant for design

They saidFor design, that means
"Easy enough for business teams, not only engineers"A visual canvas plus a plain-language Copilot
"We need to trust it with real data and real money"Safety, approvals, policies, audit and cost visible by design
"Features that make us stand out in sales demos"Simulation, replay, policy studio, evaluations, cost guardrails
"Safety must be part of the product"Sandbox by default, approvals, workspace isolation, full audit trail

Seven competitors, one gap

ProductWhat we learned
n8nThe canvas is the right mental model for builders, but it feels technical to business users.
ZapierPlain-language building lowers the barrier to start.
MakeShow the data moving between steps.
Copilot StudioAdmins need central policies.
UiPathEnterprise buyers expect audit by default, but it is heavy to learn.
LangSmithTrace trees and evals make agents trustworthy, but they are built for developers.
WorkatoReusable building blocks speed teams up.

The gap: easy enough for a process owner, governed enough for a CISO, and open to any model or tool. Nobody did all three well.

Borrow the idea, never the look

Stripe

Test vs Live, always visible

Became Sandbox vs Live, shown on every screen.

GitHub

Pull requests

Became Publish review: a diff, checks and a named reviewer.

LangSmith

Trace trees

Became Run Replay: watch a run like a video, re-run from any step.

Google Docs

Suggestion mode

Became Copilot suggestions you accept or reject, never auto-applied.

Flight checklists

Simulators

Became the sandbox plus a pre-publish checklist.

Linear · Raycast

⌘K everywhere

Became one command palette for every object and action.

Three visual directions

A · Chosen

Calm daylight

Readable for long sessions, and it looks trustworthy in a CISO meeting.

B · Rejected

Neon ops

Dark only. It felt like a tool for engineers, and the brief asked for light.

C · Rejected

Playful builder

Friendly, but less serious than banks and hospitals expect.

04Define

Six proto-personas covered the whole life of a workflow: Priya the business analyst who has the idea, Sarah the process architect and Karthik the AI engineer who build it, Rahul on call who keeps it running, Meera in risk and compliance who approves it, and Alex who pays for it.

Proto-personas grouped by what they do with a workflow: build, run, govern or fund.
“Show me the whole flow on one screen, then let me test each step.”
Sarah · Process Architect
“If I can’t see the trace, I can’t fix it.”
Karthik · AI Engineer
“I will sign off only what I can explain to an auditor.”
Meera · Risk & Compliance

Hypothesis quotes, written to be tested in interviews.

A refund-approval workflow, from idea to "was it worth it?". The mood drops from excited to in the dark.

Problems, ranked

#ProblemPriorityHow might we…
P1Too many tools and conceptsP0…make the product model simple enough to learn in ten minutes?
P2The flow is hiddenP0…let builders see the whole flow and test any step?
P4Agents are black boxesP0…make every agent decision visible and replayable?
P5No safe road to liveP0…make testing safe, and going live a clear, reviewed decision?
P6Control is scatteredP0…give Meera one place to set, see and prove control?
P7Failures have no storyP1…turn every failure into a guided, safe fix?
P8Cost and value are invisibleP1…show cost before a run and value after it?

From five objects to three

The old model asked people to learn Department, Task, Task Pipe, Goal and Run before they could do anything. We tried one single "Automation" object too, but it was impossible to govern. We landed on three core objects and four shared libraries.

Before
  • Department
  • Task
  • Task Pipe
  • Goal
  • Run
After
  • Workspace: team, members, budgets, policies
  • Workflow: a versioned canvas of nodes
  • Execution: one traced, replayable run

Plus four libraries: Agents, Connections, Policies and Knowledge. Lifecycle: Draft → Sandbox → Live, and rollback is one click.

IA grouped by intent: build it, run it, watch it, control it, connect it.

Six principles, each with a rule we could check

PrincipleThe UI ruleWe say no to
Show the whole flowEvery workflow opens on the canvas. Forms live in side panels.Long wizards
Safe by default, live by decisionNew workflows start in Sandbox. Live needs a review, a diff and a typed confirmation.Hidden test/live switches
Glass box, not black boxInput, output, tools and reason are one click away.Unexplained AI
Every status leads to an actionShow the cause, the impact and the safest next step.Red dots with no explanation
Never start from blankEvery empty screen offers a template, Copilot or an example.Empty "No data" tables
One model, many rolesSame objects for every role, different panels.A separate tool per team
05Bets & flows

Build

Agent Canvas

The whole flow on one screen.

Build

Copilot Builder

Drafts arrive as suggestions to accept or reject.

Test & trust

Simulation Sandbox

What would have happened in Live, with cost.

Test & trust

Run Replay

Watch a run like a video. Re-run from any step.

Govern

Approval Inbox

One queue with reason, data, policy and cost.

Govern

Policy Studio

When, If, Then in plain English, with a code view.

Run

Health & Recovery

Every alert links to the failing step.

Run

Cost & Value

Budgets, alerts and time saved per team.

We scored all thirteen bets on user impact, business value, effort and risk. Release one had a simple rule: one complete, safe journey. Canvas, Copilot drafts, Sandbox, Replay, Approval Inbox, environments, Health and Recovery, and basic policies. The full Policy Studio, Quality Gate, Cost and Value and Blueprints came next. Co-editing and the marketplace came later.

Six core flows, one per persona, from "Priya builds from a sentence" to "Alex spots a budget at 80%".

Three concepts, combined

A · Base

Canvas first

Chosen as the base. The risk was that it could feel technical.

B · Kept as Copilot

Chat first

Approvers cannot audit a chat, so chat became a side panel that drafts nodes.

C · Kept as list view

Step list

Messy with branches, so it became the accessible list view for screen readers.

Agent Canvas, in detail

7 node types
Trigger, AI agent, Tool (incl. MCP), Logic, Human step, Policy check, Output. One shape, many colours.
7 node states
Idle, running, passed, failed, waiting for approval, simulated, blocked by policy.
Test a node
Run one step with pinned sample data, without running the whole flow.
Keyboard
Tab between nodes in flow order, arrows along edges, Enter opens the panel.
Wireframe of the canvas editor. Library on the left, settings on the right, and a run bar: "Last test passed · ₹0.42 · 3.1 s".
06Brand & system

The brand idea was calm control. Quiet surfaces instead of loud gradients, plain words instead of jargon, and proof instead of "just trust the AI". Agent Indigo is used for action and focus only, roughly 5–8% of any screen, so that when something is indigo it actually means something.

The mark: two steps and one connection, the agent’s path that is never broken.

Voice: talk like a helpful senior colleague

Not thisSay this
Deploy to production environmentPublish to Live
Execution error: upstream timeout (504)Invoice reader stopped at "Post to SAP". 41 invoices are waiting.
Pending HITL task #2318Refund Agent wants to refund ₹42,000. Approve, change or reject.
Execute in isolated environmentRun in Sandbox

Errors follow one formula: what happened, why, and what you can do now.

134variables: 53 primitives, 60 semantic colours, 21 sizes
218components, all auto-layout and bound to tokens
129variants across 23 component sets
72icons at 20 px, 1.6 stroke, never filled

The design system, counted from the library

Canvas node: 7 types × 4 states (default, selected, error, suggested by Copilot).
Indigo ramp, cool slate neutrals, status colours and the seven node hues used only on the canvas.
07Final screens

Thirty-four screens in eight groups, designed at 1440 and responsive down to 1280: Foundation, Build, Run, Observe, Govern, Connect, Admin and Global. A few of them carry most of the story.

01

Home

Copilot prompt first, then what needs you: an approval, a failing workflow, a quality gate that blocked a release. Runs, success rate and spend at a glance.

02

Agent Canvas editor

The whole refund workflow on one screen. Sandbox is the default, and the run bar shows the last test, the cost and the time.

03

Copilot drafting

Copilot proposes nodes as dashed suggestions. Nothing is applied until a person accepts it.

04

Run Replay

Scrub through a run like a video. See the input, the tools and the reason for every step, then re-run from the step that went wrong.

05

Approval Inbox

Sorted by risk and deadline. Every item carries the reason, the data, the policy that asked and the cost.

06

Publish review

Going live works like a pull request: a diff, the checks, a named reviewer and a typed confirmation.

More screens

08Handoff

Screens were marked "Ready for dev" in Dev Mode, with tokens as variables, the variant library, a canvas interaction spec (drag, connect, zoom, keyboard), a copy deck, annotated flows and accessibility notes per component. We walked engineering through each area, answered Jira questions within a day, and ran design QA on staging every sprint.

"Done" had a strict meaning: every state designed, every string final, every token used, and every screen checked against the six principles.

Analytics events, agreed before build

EventWhat it tells us
sandbox_run_completedEngagement, and time to the first safe run
publish_requested / approvedWhether the review path is used, and how fast
replay_openedWhether people can debug on their own
approval_decidedGovernance guardrails
recovery_action_takenTime to fix
confidence_ratedHappiness
< 30 minto the first Sandbox run
90%of publishes preceded by a Sandbox run
≥ 85%task success on flows A–F
0Live actions without a recorded decision

HEART targets for the first 90 days of beta

Risks we designed around

RiskHow we reduced it
The canvas feels too technicalCopilot, blueprints and a list view
Copilot suggests something wrongNever auto-applied, always shown as a diff
Approval fatigueRisk-based approvals. Bulk actions only for low risk
Simulation gets expensiveA cost estimate before every run, cheaper test models
Too many featuresRelease one is one complete journey, nothing more
09Reflection

01

Simplify the model first

Going from five objects to three did more for learnability than any screen. Changing a sticky note costs a minute. Changing a shipped product model costs a year.

02

Safety has to be visible

A safety feature hidden in a form is not a safety feature. Making Sandbox the default and Live a decision changed how the whole product felt.

03

Rules make design fast

Principles written as checkable UI rules ended a lot of debates. We could point to the rule instead of arguing taste.

If I did it again, I would get two design partners into the sandbox flow even earlier, with real data, before the canvas was polished. The riskiest assumption in the project was that risk leads would approve inside the product instead of over email. That deserves real evidence first.