I designed how a human approves AI work.

I designed how a human approves AI work.

I designed how a human approves AI work.

HQ is the screen where I supervise a small team of AI agents. They research, build and review. I make the call.

HQ is the screen where I supervise a small team of AI agents. They research, build and review. I make the call.

HQ is the screen where I supervise a small team of AI agents. They research, build and review. I make the call.

THE REAL HQ ON MOCK DATA.

The details

The details

MY ROLE

Sole designer, directed build

Sole designer, directed build

TIMELINE

Personal project

Personal project

TOOLS

Figma

Figma

Claude Code (directed)

Claude Code (directed)

HTML/CSS

HTML/CSS

TEAM

Just me

01 APPROVE & UNDO

Know what you’re saying yes to.

Know what you’re saying yes to.

Know what you’re saying yes to.

Agents usually ask with a sentence and an Approve button. People either sign off blind or stop trusting the agent. So every decision in HQ states the exact action, and shows the stake and what a yes sets off when the agent writes them.

01 · PROPOSES

The exact action you’re approving. If the agent didn’t write one, there’s no Approve button, and the card asks for a reply instead.

02 · AT STAKE

What a wrong call costs. It’s optional, and an empty field shows nothing, so HQ never invents a stake.

03 · YES TRIGGERS

What starts the moment you approve.

The TL;DR sits above the decision, so you read before you’re asked to decide.

Five seconds to take it back.

Five seconds to take it back.

Five seconds to take it back.

Approve and delete both come with a 5 s Undo. The bar drains along the bottom of the toast, and with reduced motion the seconds count down as text. When the window closes, the dispatch records who approved it and when.

A decision marked Irreversible goes to the top of Today with a coral tag. Two buttons didn't make it. Stop, because HQ can't stop a running agent and the button would lie. Release, because HQ has no release control to put behind it.

Approved: Retire the old onboarding flow
Approved: Retire the old onboarding flow
Approved: Retire the old onboarding flow

HQ’S TOAST, REBUILT FOR THIS PAGE. SAME 5 SECONDS, THEN THE AUDIT LINE TYPES IN. UNDO WORKS.

02 DESIGN TO BUILD

Same card, two views.

Same card, two views.

Same card, two views.

One card at two distances. Close up, it reads like a design frame, with its size marked. Then the camera pulls back to where it lives in HQ.

DESIGNED BY ME, BUILT BY DIRECTING CLAUDE CODE.

03 DESIGN SYSTEM

Quiet everywhere except the decision.

Quiet everywhere except the decision.

Quiet everywhere except the decision.

HQ runs on a small system: three type families, seven sizes and one accent. The biggest size goes to the decision you're reading, and nowhere else. Each colour means one thing: lilac is an agent at work, amber needs you, coral is blocked or can't be undone.

Every state also gets an icon and a word, so nothing relies on colour alone. Agent names went neutral after review caught them in status colours. The type moved from Figtree to Poppins, Albert Sans and JetBrains Mono.

Type scale

12 · Meta38 min ago
14 · UIWaiting on Builder
16 · BodyPeople halfway through the old flow start again from step one.
18 · CardBuilder
24 · TitleToday
32 · HeadlineHQ
40 · DisplayOne per viewRetire the old onboarding flow

One colour, one meaning

At workLilac: an agent is working.Needs your decisionAmber: it needs you, or something is waiting.IrreversibleCoral: blocked, or it can't be undone.

State icons, actual size

WorkingWaitingRestingQuiet

One phone override

Desktop header: Chat and Dispatches as text buttons, with an amber 3 on Dispatches.
Desktop
Phone header: the same two actions as 48 px circles, with the amber 3 as a count badge.
Phone: 48 px circles

Phone type scale

12 · Meta38m
14 · UIWaiting on Builder
16 · RowTest the guide with five people
18 · SectionToday
24 · DisplayOne per viewRetire the old onboarding flow

One colour, one meaning

At workLilac: an agent is working.Needs your decisionAmber: it needs you, or something is waiting.IrreversibleCoral: blocked, or it can't be undone.

State icons, actual size

WorkingWaitingRestingQuiet

One phone override

Desktop header: Chat and Dispatches as text buttons, with an amber 3 on Dispatches.
Desktop
Phone header: the same two actions as 48 px circles, with the amber 3 as a count badge.
Phone: 48 px circles

Type scale

12 · Meta38 min ago
14 · UIWaiting on Builder
16 · BodyPeople halfway through the old flow start again from step one.
18 · CardBuilder
24 · TitleToday
32 · HeadlineHQ
40 · DisplayOne per viewRetire the old onboarding flow

One colour, one meaning

At workLilac: an agent is working.Needs your decisionAmber: it needs you, or something is waiting.IrreversibleCoral: blocked, or it can't be undone.

State icons, actual size

WorkingWaitingRestingQuiet

One phone override

Desktop header: Chat and Dispatches as text buttons, with an amber 3 on Dispatches.
Desktop
Phone header: the same two actions as 48 px circles, with the amber 3 as a count badge.
Phone: 48 px circles

HQ'S TEAM ROW ON MOCK DATA. WORKING IS AN ORBIT, WAITING AN HOURGLASS, RESTING A DRIFTING ZZZ, QUIET A DOTTED RING.

04 AGENT REVIEW

The builder doesn’t review its own work.

The builder doesn’t review its own work.

The builder doesn’t review its own work.

A separate reviewer agent checks every batch before it ships. It blocked the first three once each and passed the fourth after five fixes. Three of those issues, and their fixes:

Batch 01
Blocked
Issue: A chat status said “on it” when no agent was working.
Fix: The status now says someone is on it only when an agent is.
Batch 02
Blocked
Issue: Today hid items, so a waiting call could slip past.
Fix: Urgent items never fold away now. The rest sit behind Show all.
Batch 04
5 fixes
Issue: Approve showed on a decision with no decision line.
Fix: Approve now appears only when a decision line exists.

One it missed

The phone layout passed review. I still found the team rows cramped, with uneven heights and no hierarchy, so the phone got its own type scale and one row height.

The same team rows at 375 px, before and after.

Passed review
HQ's Team rows on a 375 px phone in the build that passed review: five rows of uneven height, with states and counts wrapping onto extra lines. Mock data.
Now
The same Team rows on a 375 px phone now: five rows of one height, name and state on the first line, the task on the second, counts at the right. Mock data.

One it missed

The phone layout passed review. I still found the team rows cramped, with uneven heights and no hierarchy, so the phone got its own type scale and one row height.

Passed review
HQ's Team rows on a 375 px phone in the build that passed review: five rows of uneven height, with states and counts wrapping onto extra lines. Mock data.
Now
The same Team rows on a 375 px phone now: five rows of one height, name and state on the first line, the task on the second, counts at the right. Mock data.

The same team rows at 375 px, before and after.

One it missed

The phone layout passed review. I still found the team rows cramped, with uneven heights and no hierarchy, so the phone got its own type scale and one row height.

Passed review
HQ's Team rows on a 375 px phone in the build that passed review: five rows of uneven height, with states and counts wrapping onto extra lines. Mock data.
Now
The same Team rows on a 375 px phone now: five rows of one height, name and state on the first line, the task on the second, counts at the right. Mock data.

The same team rows at 375 px, before and after.

05 CONCLUSION

Read first, then decide.

In HQ, Approve only appears once an agent has written the exact action, and any yes can be taken back for five seconds.

Next, I'd run a 20-minute think-aloud with someone who approves agent work, and watch where they slow down before Approve.

Read first, then decide.

In HQ, Approve only appears once an agent has written the exact action, and any yes can be taken back for five seconds.

Next, I'd run a 20-minute think-aloud with someone who approves agent work, and watch where they slow down before Approve.

Read first, then decide.

In HQ, Approve only appears once an agent has written the exact action, and any yes can be taken back for five seconds.

Next, I'd run a 20-minute think-aloud with someone who approves agent work, and watch where they slow down before Approve.

MORE WORK

Alleyesonme.jobs case study preview

Alleyesonme.jobs

Alleyesonme.jobs

Linnea Studios case study preview

Linnea Studios

Linnea Studios

The Hounds case study preview

The Hounds

The Hounds

01

Approve & Undo

02

Design to Build

03

Design System

04

Agent Review

05

Conclusion