taitzdesign.com ← All work
Case Study · Secureworks · 2018

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.

Client
Secureworks
Role
UX lead at Slalom. Research, comps, production design, and the design system.
Work
Research, Workflows, Design direction
network

Pick a host and its findings and connections open on the right.

01 · 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.
02 · The network is the home screen

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.

03 · Dashboards each customer builds

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.
04 · Adding a widget takes one panel

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.
05 · A design system developers could copy

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.
06 · 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.
07 · What Happened

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.