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.
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.
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.
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.
| Phase | Weeks | What happened | Gate |
|---|---|---|---|
| Kickoff | W1 | Vision workshop, stakeholder map, research ops, success criteria | G1 · Vision agreed |
| Discover | W1–3 | Audit, market scan, competitors, mood boards, personas, journeys | Insight report |
| Define | W3–4 | Problems and HMWs, 13 bets, principles, object model, IA, flows | G2 · Problems and bets signed |
| Develop | W5–8 | Concept sprints, lo-fi to mid-fi, design system, prototype | G3 · Concept chosen |
| Deliver | W8–10 | Hi-fi for every screen and state, accessibility pass, Dev Mode specs | G4 · Hi-fi approved |
| Handoff | W10 | Engineering walkthrough, design QA, beta plan | G5 · 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.
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.
- 1Idea
- 2Build
- 3AI logic
- 4Test
- 5Approve
- 6Deploy
- 7Monitor
- 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 said | For 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
| Product | What we learned |
|---|---|
| n8n | The canvas is the right mental model for builders, but it feels technical to business users. |
| Zapier | Plain-language building lowers the barrier to start. |
| Make | Show the data moving between steps. |
| Copilot Studio | Admins need central policies. |
| UiPath | Enterprise buyers expect audit by default, but it is heavy to learn. |
| LangSmith | Trace trees and evals make agents trustworthy, but they are built for developers. |
| Workato | Reusable 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
Test vs Live, always visible
Became Sandbox vs Live, shown on every screen.
Pull requests
Became Publish review: a diff, checks and a named reviewer.
Trace trees
Became Run Replay: watch a run like a video, re-run from any step.
Suggestion mode
Became Copilot suggestions you accept or reject, never auto-applied.
Simulators
Became the sandbox plus a pre-publish checklist.
⌘K everywhere
Became one command palette for every object and action.
Three visual directions
Calm daylight
Readable for long sessions, and it looks trustworthy in a CISO meeting.
Neon ops
Dark only. It felt like a tool for engineers, and the brief asked for light.
Playful builder
Friendly, but less serious than banks and hospitals expect.
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.
“Show me the whole flow on one screen, then let me test each step.”
“If I can’t see the trace, I can’t fix it.”
“I will sign off only what I can explain to an auditor.”
Hypothesis quotes, written to be tested in interviews.
Problems, ranked
| # | Problem | Priority | How might we… |
|---|---|---|---|
| P1 | Too many tools and concepts | P0 | …make the product model simple enough to learn in ten minutes? |
| P2 | The flow is hidden | P0 | …let builders see the whole flow and test any step? |
| P4 | Agents are black boxes | P0 | …make every agent decision visible and replayable? |
| P5 | No safe road to live | P0 | …make testing safe, and going live a clear, reviewed decision? |
| P6 | Control is scattered | P0 | …give Meera one place to set, see and prove control? |
| P7 | Failures have no story | P1 | …turn every failure into a guided, safe fix? |
| P8 | Cost and value are invisible | P1 | …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.
- Department
- Task
- Task Pipe
- Goal
- Run
- 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.
Six principles, each with a rule we could check
| Principle | The UI rule | We say no to |
|---|---|---|
| Show the whole flow | Every workflow opens on the canvas. Forms live in side panels. | Long wizards |
| Safe by default, live by decision | New workflows start in Sandbox. Live needs a review, a diff and a typed confirmation. | Hidden test/live switches |
| Glass box, not black box | Input, output, tools and reason are one click away. | Unexplained AI |
| Every status leads to an action | Show the cause, the impact and the safest next step. | Red dots with no explanation |
| Never start from blank | Every empty screen offers a template, Copilot or an example. | Empty "No data" tables |
| One model, many roles | Same objects for every role, different panels. | A separate tool per team |
Agent Canvas
The whole flow on one screen.
Copilot Builder
Drafts arrive as suggestions to accept or reject.
Simulation Sandbox
What would have happened in Live, with cost.
Run Replay
Watch a run like a video. Re-run from any step.
Approval Inbox
One queue with reason, data, policy and cost.
Policy Studio
When, If, Then in plain English, with a code view.
Health & Recovery
Every alert links to the failing step.
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.
Three concepts, combined
Canvas first
Chosen as the base. The risk was that it could feel technical.
Chat first
Approvers cannot audit a chat, so chat became a side panel that drafts nodes.
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.
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.
Voice: talk like a helpful senior colleague
Errors follow one formula: what happened, why, and what you can do now.
The design system, counted from the library
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.
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.
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.
Copilot drafting
Copilot proposes nodes as dashed suggestions. Nothing is applied until a person accepts it.
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.
Approval Inbox
Sorted by risk and deadline. Every item carries the reason, the data, the policy that asked and the cost.
Publish review
Going live works like a pull request: a diff, the checks, a named reviewer and a typed confirmation.
More screens
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
| Event | What it tells us |
|---|---|
| sandbox_run_completed | Engagement, and time to the first safe run |
| publish_requested / approved | Whether the review path is used, and how fast |
| replay_opened | Whether people can debug on their own |
| approval_decided | Governance guardrails |
| recovery_action_taken | Time to fix |
| confidence_rated | Happiness |
HEART targets for the first 90 days of beta
Risks we designed around
| Risk | How we reduced it |
|---|---|
| The canvas feels too technical | Copilot, blueprints and a list view |
| Copilot suggests something wrong | Never auto-applied, always shown as a diff |
| Approval fatigue | Risk-based approvals. Bulk actions only for low risk |
| Simulation gets expensive | A cost estimate before every run, cheaper test models |
| Too many features | Release one is one complete journey, nothing more |
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.
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.
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.
