← All work
Secureworks · Red Cloak
Secureworks · 2018 · with Slalom

Security analysts had to go looking for trouble

Red Cloak watches every computer on a company's network. The old portal made analysts fill out a form before they saw anything. I redesigned it around a live 3D map of the network, so trouble shows up on its own and the analyst clicks straight into it.

UX lead at Slalom. Research, comps, production design, and the design system.45 files: concepts, comps, build screenshots, design system
The problem

Red Cloak records everything a computer does: programs, network traffic, DNS lookups, file changes. The old portal made you dig for all of it.

/Every click was a full page load.
/Search was a page of form fields you filled out before you saw a single result.
/You could only have one investigation open at a time.
/An incident responder and a CISO wanted completely different answers from the same screen.
/Some customers had their own hunt teams. Others just wanted to be told what to fix.
Redrawn in 2026 from the 2018 comps, build screenshots, and design system. The 3D network view is drawn from my description of the shipped product, since no capture of it survived. Hostnames and events are test data.
01

The network is the home screen

Every computer is a circle. Its ring shows what's been found on it: green is clean, amber is a warning, red is critical. Lines show traffic between computers and get thicker as more data moves. A compromised path turns red, so you see where something is spreading before you read a single row.

networkPick a host and its findings and connections open on the right.
02

Dashboards each customer builds

One dashboard couldn't serve a CISO and a hunt team. So every number lives in a widget, and each customer picks the widgets they care about. Critical, warning, and clean read the same way in every widget, and every count links straight to a filtered search.

dashboardThe shipped build, in the dark theme. Zero results get their own empty state.
03

Adding a widget takes one panel

Pick a chart type, see a live preview with real data, set the data and time range, and add it. The dashboard stays visible underneath, so you're building against what's already there.

widget builderType on the left, preview in the middle, settings on the right.
04

A design system developers could copy

Roboto on a rem scale, a six-color graph palette, three light and three dark backgrounds, and icons given as the exact markup. I wrote specs for the custom widgets state by state, including how clustered events pick their color. The build shipped in the dark theme.

design systemTokens, type scale, and the severity rules.
What made it work
/

A live map where trouble shows up without searching for it.

/

Severity looks and works the same in every widget.

/

Light and dark themes set as tokens. The dark one shipped.

/

Widget specs written state by state, so developers didn't have to guess.

/

An empty state drawn on purpose.

Outcome

It shipped, and analysts moved off the old portal.

/Analysts got from "that looks wrong" to an open investigation without leaving the screen.
/Customers built dashboards for their own teams instead of asking for custom reports.
/The dark theme and design system carried into the next phase of the product.