work nudgebee
Work · nudgebee · Oct 2023 – now
Three years inside one product
nudgebee is an AI operations platform for Kubernetes and cloud. It watches a company's infrastructure, works out what's broken or wasteful, explains it with evidence, and, once a person says yes, fixes it.
I joined in October 2023 as its first designer, and for a long time its only one. In January 2025 the role became Design Engineer: I still design the product, and now I build parts of it too.
The product's screens aren't mine to show, so everything here is redrawn by hand. What I can share is the thinking: the problem, the call I made and why.
Oct 2023Founding product designer
Jan 2025Design Engineer
NowStill climbing
Foundations and navigationCost and optimisationDashboards and monitoringOne product, many brandsAdmin and setupPatterns everywhereThe peaks are what I'd point to first. Everything else sits lower down, in the mist.
Peak 01 · The AI assistantDesign
An assistant you can watch think, and correct
The chat, the agent's visible work, citations, and a memory users can read, edit and erase.
The problem
An answer from the assistant can take minutes, and behind it the agent may have made dozens of calls. People need to see that work while it happens, trust the claims at the end, and not lose their place while they wait. Most of them will leave the tab, and that's fine; the product has to plan for it.
The calls I made
- 1.
Show the work while it runs, then put it away. Your question, then a plan, then a live row for each step, then the answer. Once the answer lands, the steps retire behind a chip. A long conversation that keeps all its working on screen turns into a log file.
- 2.
Twenty calls are one step you expand. An agent's work is a tree. Shown flat, one lookup that fanned out to twenty calls buries the rest of the investigation. Nested rows, with depth drawn in a fixed gutter, keep every title lined up however deep it goes.
- 3.
Every claim points back to the step that produced it. Citations in the answer are chips that open the exact piece of work behind a sentence. Sources say where information came from; citations say how the assistant used it. Two different questions, two different controls.
- 4.
Assume they'll leave. The launcher counts work in progress, and when an answer lands while the chat is closed, it turns green and says so. One chat panel lives on every page, so asking about something never costs you the page you were looking at.
- 5.
A memory you can audit. The assistant remembers things about your systems and habits, and one wrong guess quietly shapes every answer after it. So every row is readable, editable, pinnable and deletable, and says where it came from: you told it, it inferred it, or the system set it. Correct an inferred fact and it stops being re-guessed.
What shipped
- One chat surface on every page
- Nested agent steps
- Citations into the work
- Memory with provenance
Peak 02 · Automation builderDesign
A builder for automations that touch production
The canvas, its nodes and branches, and a way to rehearse an automation before it runs for real.
The problem
The runbooks engineers follow by hand live in their heads and in wiki pages. The builder turns them into automations that run on their own, against live infrastructure. Every design call here comes back to one fear: an automation doing the wrong thing to production.
The calls I made
- 1.
One node anatomy for several hundred action types. Commands, cloud calls, chat messages, tickets, AI steps, loops, branches, approvals. Each node has the same parts in the same places (status, inputs, hover actions), so the canvas reads the same whatever is on it. Most of the consistency came from reviewing the build, pull request by pull request.
- 2.
Four ways in, not one. Start from a blank canvas, a template, pasted code, or describe what you want to the assistant. A single on-ramp is what kills adoption of a builder.
- 3.
Branches fan out instead of colliding. Conditional paths used to overlap and their handles were too small to hit. Now true, false and switch paths each have their own visual language, and they spread out rather than stack.
- 4.
Rehearse before it's live. Dry-run the whole thing, run up to one step, or simulate a trigger, all before anything fires for real. After a run, a panel answers the first question everyone has: what set this off?
- 5.
Explain the AI steps. People wouldn't place an AI step they couldn't predict. Each one now says what it does with its input and what it gives back. The cheapest possible fix for "I don't trust this one".
What shipped
- Node design across the canvas
- Four ways to start
- Branching and connectors
- A testing path before production
Peak 03 · Design systemDesign + Code
A design system that tells you which one to use
41 primitives, ~50 written rules for choosing between them, and the product moved onto it.
The problem
The same control looked different on two tabs side by side. That drift wasn't carelessness. It came from two reasonable people making opposite calls whenever two components could both fit. A library answers "what exists". It doesn't answer "which one do I use here", and that gap is where drift comes from.
The calls I made
- 1.
Three layers, and the middle one matters most. Primitives at the bottom, recipes for the three screens the product is mostly made of (a listing, a modal, a form) at the top, and in between, written decision rules. A rule got added the first time each "which one?" question came up: status pill or chip, toast or banner or field hint.
- 2.
Same look, different meaning, still two components. A form select and a toolbar filter look identical, but an empty form field might be an error, while an empty filter just means "showing everything". So they're separate components, and picking between them is a UX call, not a code call.
- 3.
Colour goes on the change, never on the number. In this product, a drop from 1.2 cores to 0.5 is a win, while the same drop in availability is an incident. Comparison components take a direction and pick the colour themselves, and a percentage never shows without what it's a percentage of.
- 4.
The visible result is things disappearing. About 25 one-off components collapsed into primitives: two cards into one, three dialogs into one modal, a scatter of custom pills into one status label and one chip. Then I co-led moving about 110 files onto the system with three engineers, and every "which one here?" question became a new rule.
- 5.
Written for people and for AI. AI agents now write a real share of the interface. They follow stated rules well and guess unstated ones badly, so the system is a written spec that's loaded into every coding session. It's the new version of "check the Figma".
What shipped
- 41 primitives
- ~50 decision rules
- ~250 screens covered
- ~110 files migrated
Peak 04 · Incident flowDesign
From an alert to a fix, as four questions
Alert, triage, investigation and resolution, reframed around the questions an on-call engineer actually asks.
The problem
The incident screen is where being wrong costs the most, and it had grown into a wall with no reading order. The person reading it is often on call, half awake, and needs to know what happened and what to do, in that order.
The calls I made
- 1.
Four tabs are four questions, in order. What is this, what caused it, what's the evidence, and what do I do. One scroll, sticky tabs, and the context of the alert stays put on the left.
- 2.
The verdict comes first. The conclusion used to sit below the evidence that produced it. Now a summary card leads, and each of its points jumps to the evidence behind it. Actions moved into one bar, so acting isn't a scavenger hunt.
- 3.
~69 kinds of evidence, and no empty boxes. Metrics, logs, dependencies, capacity, recent deploys, code. Each needs its own card a person can scan, and the rule is that a card with nothing useful in it never renders. Otherwise the screen is a wall of empty sections exactly when it matters most.
- 4.
"Done" isn't "fixed". A command that finished hasn't necessarily fixed anything. So results say outcome unverified, unknown or needs checking when that's the truth, and a fix that keeps recurring says so plainly.
- 5.
Brief me, don't count at me. Triage used to open on four counts: how many events came in. "1,110 events" doesn't tell anyone whether today is normal. The top now says what was handled, what repeated and what still needs a person.
What shipped
- Four question-led tabs
- ~69 evidence card types
- Clear outcome states
- A triage briefing
Peak 05 · OnboardingDesign + Code
A first run that never sends you away
The Setup Center: a guided first run that reads what's really connected and gets a new team to a working product.
The problem
A new team landed on an empty dashboard and couldn't tell "nothing set up" from "nothing wrong". The old checklist was hand-written and never read the real state: it asked you to connect a tool you'd already connected.
The calls I made
- 1.
Read the real state. The Setup Center checks what's actually connected, covers every provider, and holds the rest of the product back until something works.
- 2.
Name panels for what you get. The old list followed our own integration categories, which asked people to care about our taxonomy before they had any reason to. Every panel is now named for the outcome.
- 3.
Nobody leaves setup. Long provider lists shrink to a few tiles and one dropdown, never a link out to the full integrations catalogue. The earlier design sent people there with a banner to come back. The trip was the problem, not the banner.
- 4.
No skip, but you can stop the nagging. A skip button lets people mark things done that aren't. Instead, you can dismiss a reminder without touching the item's state, so the checklist stays honest. And only required items count toward progress, so an optional extra can never drag the bar backwards.
- 5.
Changed our minds, twice. How empty a new account has to be before the product locks to setup was reversed twice after watching real teams use it. The mechanism was easy. The judgement wasn't.
What shipped
- Guided Setup Center
- Outcome-named panels
- Honest progress
- Built and shipped behind a flag
Lower down
The rest of the range
Smaller climbs, but they add up. Most of the product's early shape came from here, in the year I was its only designer.
Foundations and navigation
The original navigationDesign
The first real nav: a grouped icon rail with hover flyouts, so a growing set of features never needs a growing rail. The product still runs on it.
One rule per kind of clickDesign
Opening details meant a drilldown here, a new page there and a popup somewhere else. Named it as a defect and set one rule per interaction.
The assistant moved to the frontDesign + Code
It was reachable but not visible. It now sits first in the rail and is the default landing page: the home screen of an AI operations tool should be a prompt.
Two-level tabsDesign + Code
Pages had grown past 40 flat tabs. Parent pills with a second row of sub-tabs, every tab linkable.
Cost and optimisation
One Optimize pageDesign + Code
Recommendations came from six sources in six shapes and read like six products. Now one surface, one severity language, one way to apply and one way to dismiss.
"Do this first"Design + Code
A list of four hundred findings ranked by nothing is a list nobody works. A short ranked queue sits above the full table, made for acting rather than scanning.
Blast radius at the moment of ApplyDesign + Code
Engineers turn down savings when they can't tell what will break. The safety reading answers "what depends on this?" right where they click, and its label names the action it calls for, not a verdict.
Honest moneyDesign + Code
No confident percentage against a base of zero. Direction lives in the label, not the sign, and tiny amounts read "under $1".
Dashboards and monitoring
Edit in placeDesign + Code
You build a panel against what the dashboard is showing right now. Nothing saves until Save, which makes Discard mean something.
Name it lastDesign + Code
The panel editor asks for a title at the end, because you can only name a panel well once you know what it shows.
A query builder for two kinds of peopleDesign
A guided builder for people who don't write queries and a raw editor for those who do, with switching that never loses your work.
Service maps and logsDesign
Hovering a node on the map tells you something, and log tables you can actually read at real line lengths.
One product, many brands
Branding through tokensDesign + Code
Partners run the product under their own brand. Rather than a forked stylesheet per partner, branding flows through the design system's tokens, so one build serves everyone.
A second set of illustrationsDesign + Code
The mascot shows up in loaders, empty states and the assistant, which is wrong on a partner's site. Every illustrated state got a brand-neutral twin.
Copy that never names usDesign + Code
A hard-coded product name is wrong on every partner site, and nothing catches it. So copy reads the name from branding, and "just fall back to ours" is banned.
Admin and setup
Connecting an accountDesign + Code
The first thing every customer does, and the easiest place to lose them. A stepped flow for Kubernetes, AWS, Azure and GCP, with copyable commands and validation right where it happens.
~70 integrationsDesign + Code
A flat wall of tiles became "what you already have" before "what else you could add".
Sign-in and error pagesDesign + Code
Sign-in that works for whichever mix of methods a team enables, and error pages that say what happened and offer the one action that helps.
Permissions and alertsDesign
A permission matrix that looks the same everywhere it appears, and alert emails that still make sense in an inbox, outside the product.
Patterns everywhere
The listing recipeDesign + Code
Almost every screen is a filtered table with a drilldown, so fixing that one recipe did more than any single screen.
One drilldown ruleDesign + Code
A group expands in place; a single finding opens a side panel. Learn one interaction instead of four.
Empty states that explainDesign + Code
"No data" can't tell "nothing happened" from "nothing connected" from "this is broken". Every empty state says what's empty and why.
How I work there
Habits, not features
I test what I design
I wrote the browser tests for the screens I designed. Writing a test makes you say what a screen is for in a way a mockup never does.
A brief before every change
Who asked, what it unblocks, how we'll know it worked, and what we're choosing not to do. The last two sections are the ones that change designs.
Specs that AI can follow
AI agents now write a good share of the interface, so the design rules are written down where they can read them.
The full list of roles and dates is on my résumé. My side projects are in the work folder.