I turned a wall of alerts into one picture managers can read
A risk page that shows engineering managers what's failing, and whether anyone is on it.
The product is an AI agent that watches a company's infrastructure and turns raw alerts into signals. Its risk page is where engineering managers get the overview: what is failing, why, and whether anyone is working on it.
I designed it from the first idea to beta, in code: a honeycomb that holds the whole day, and a chat beside it that turns what you see into the next action.
Product Designer
Role
3 designers · 2 developers · 3 QA
Team
6 months · 2026
Timeline
Shipped in beta
Status
Health 7Observability 15Security 17
High 15Medium 16Low 8Unassigned 20Assigned 19
Health 7Observability 15Security 17
High 15Medium 16Low 8Unassigned 20Assigned 19
The honeycomb: one cell per open signal, coloured by risk, with the chips that narrow it. Sample data.
01 / The challenge
A good product, hard to use.
The company was overhauling the product's whole look and feel. The product worked, but people found it hard to use and weren't adopting it. The risk page was text-heavy: every assessment run a wall of text, a rail of signal cards all outlined in red, and nothing that caught the eye.
The opportunity
How could a manager see the whole system at a glance, and reach any signal in three clicks?
Today, 11:44Latest run17 findings
Security assessment of the production account found 24 issues (6 high, 9 medium, 9 low). Overall verdict: needs attention.
Critical exposures: 2 public function URLs, one with account-wide secret access, and a group open on all protocols.
Active indicators: 34 unarchived findings, including privilege escalation on 2 hosts.
Visibility gaps: scanning disabled outside one region; 37 of 54 buckets unencrypted.
Secondary risks: 26 of 27 secrets unrotated, weak password policy, 18 open dependency alerts.
Every finding inside a paragraph
Risk written as numbers in sentences
Nothing catches the eye first
One cell per signal, coloured by risk
Filled means nobody owns it yet
The shape of the day, at a glance
After: see it. One day's findings, as the old page wrote them and as the honeycomb draws them. Sample data.
02 / The direction
Like the tools engineers already use.
With two other designers I explored the direction and the design system for the whole revamp. We took Claude Code, Cursor and Linear as the reference: mono type for headings and identifiers, wide-tracked labels, a near-black surface, and colour kept for risk.
Type · mono for headings and ids17 high-risk signalsCertificate on the payments gateway expires in 6 dayspayments-gw16 Oct 11:44
Labels · wide trackedHigh-risk todayHow can I help?What next
Colour · kept for risk
High
Medium
Low
Filled: no owner · Outlined: owned
Chips
Security 23High 17Unassigned 27
Ownership
UnassignedALOwned
Prompts say what they'll do
Why is checkout noisy?Why
Watch checkout with a taskDo
Type · mono for headings and ids17 high-risk signalsCertificate on the payments gateway expires in 6 dayspayments-gw16 Oct 11:44
Labels · wide trackedHigh-risk todayHow can I help?What next
Colour · kept for risk
High
Medium
Low
Filled: no owner · Outlined: owned
Chips
Security 23High 17Unassigned 27
Ownership
UnassignedALOwned
Prompts say what they'll do
Why is checkout noisy?Why
Watch checkout with a taskDo
The pieces of the new look, each on its own.
03 / Exploration
Seven or eight ways to draw a day.
A heatmap, a pipeline that filters the data down, a pie chart of categories, a radial bar chart that combined the two. They looked good, but none of them scaled as the data grew, and none let you filter or narrow down to one signal.
Heatmap
Filtering pipeline
Pie of categories
Radial bars
HoneycombShipped
Four of the ways I tried, and the one that shipped.
04 / The honeycomb
The whole day, one cell per signal.
Each cell is an open signal, coloured by risk. A filled cell has no owner; an outlined one does. The number is how many raw alerts it groups. Chips for category, risk and ownership dim every cell that doesn't match, so any slice is a click or two away, and any signal three.
39 of 39 signalsPress a chip to narrow
Try it: press a chip, or combine a few. Sample data.
05 / The chat
A picture you can talk to.
Beside the comb sits a chat that reads the page. It opens on the day's high-risk signals, sorted by what needs doing: nobody on them, assign; an owner but not investigated, investigate. Its prompts say what they'll do, and managers can assign work or automate it with an agent task from the same place.
The rule
The chat never shows signals. It answers, and changes what the comb and the list show.
Today's high-risk signals
9Nobody on themAssign
5Owner, not investigatedInvestigate
3Investigated
5Investigated, still alerting
How can I help?
Unowned high-risk signalsShow
Why is checkout noisy this week?Why
Create a task to watch checkoutDo
Investigate the expiring certificateInvestigate
What next
Assign to on-callSee who and what before anything changes
Investigate the oldestThe highest risk that has waited longest
Watch it with a taskAn agent task keeps checking
The chat's pieces: the day sorted into what needs doing, prompts that say what they'll do, and the next steps. Sample data.
06 / The signal row
The same care, down to the row.
The row every list shares got the same treatment: the title first, a quiet mono line for the source and time, an unread dot on the left, a drawn ring for "unassigned", and the comb's hexagon as its risk mark, so people learn one sign for risk.
checkout-api2mcheckout-api error rate is 4.8% and climbing over 90 minutes
AssignIgnore
Metadata first, the title below it in mono
Risk as a tinted tile, a second sign to learn
Assign and Ignore hidden until you hover
Checkout error rate at 4.8% and climbing over 90 minutescheckout-api421:48
Memory rising linearly on the cache primarycache-0322:51
AL
The title first, a quiet mono line under it
The comb's hexagon as the risk mark
The owner, or a drawn ring for unassigned, always visible
After: everything visible. One signal row. Sample data.
07 / Impact
Shipped, and liked.
The risk page shipped in beta, designed and built in code. The product lead and the client liked it: a page that managers can read at a glance, instead of one they have to read through.
08 / Takeaway
Design for the person using it.
“Designing for the end user is crucial when it comes to usability.”
We had a good product that people weren't adopting, because it felt hard to use. What fixed it was understanding the people who use it, and putting myself in their shoes.