Home

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.

The 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.

plan× 20confident12 srconce it answers, the steps fold away behind a chip
Redrawn by hand; not the real interface.the answer stays the main thing; the working is one tap away

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. 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. 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. 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. 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. 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.

four ways inblanktemplatecodechattriggerstepiftruefalseactionnotifyapprove?dry runrehearse before it goes live
Redrawn by hand; not the real interface.nothing should reach production unrehearsed

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. 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. 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. 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. 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. 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.

recipeslistingmodalformrulesstatus pill or chip?read-only state → pill · picks something → chiptoast, banner or hint?it depends where it livesprimitives+35where drift stops
Redrawn by hand; not the real interface.the rules layer is what actually stops drift

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. 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. 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. 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. 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. 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.

what is it?what caused it?evidencewhat do I do?the verdict, firstnothing in it? never shownticketmute
Redrawn by hand; not the real interface.written for someone reading it at 3am

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. 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. 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. 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. 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. 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.

getting set upnamed for what you get, not our categoriesfour statesdonedetectedin progressto doremind me laterskipno skip button
Redrawn by hand; not the real interface.the trip was the problem, not the banner

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. 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. 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. 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. 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. 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.