Eric Wilson
← All work
// CASE STUDY · 0→1 PRODUCT DESIGN

Content Platform S Nodes: from zero

A dense, enterprise-class object-storage system built to be set up and repaired by the customer: no field engineer on site. I designed the experience from a blank page, and built much of the front-end too — from a blank page to shipped product:

0→1
designed and built from a blank page
1st
deployment wizard at the company
customers set it up themselves, no onsite support needed
Live
shipped on time, still evolving
in active development as of July 2026
Enclosure detail — hardware status, the enclosure pictogram, and per-component readings
ENCLOSURE DETAIL — LIVE HARDWARE STATUS, TOP OF PAGE. CLICK TO EXPAND.

A note on these screens. The layouts and flows are the ones I designed. The styling is from the design system the product moved to later, which I worked on with the product design team when the company adopted it. The structure didn't change, only the surface did.

ROLE
Only designer, and front-end developer
TIMELINE
18 months, 2014 to ship in 2015
TEAM
8 engineers, an engineering director, a PM
SCOPE
0→1, from a blank page
STATUS
Shipped on time, still evolving
OVERVIEW

Content Platform S Nodes is an enterprise object-storage system dense enough to pack over a petabyte into a 4U chassis. Redundant server modules, power supplies, and commodity drives built for failure. The goal: make it fully customer-serviceable, so a failed part could be swapped on site without dispatching a Hitachi engineer. I designed that experience — setup through repair — from a blank page, and built much of the front-end that shipped it.

THE PROBLEM

Every failed drive meant a field engineer in a car.

Field support engineers were stationed near our customers, but near could still mean a few hours of driving. For a real failure that trip made sense. For a dead hard drive it didn't, because swapping one is something an administrator can do in a few minutes, as long as they know which drive to pull.

That last part was the whole design problem.

THE DESIGN PROBLEM

Four things the flow had to do, in order.

There are 96 drive slots in a tray. Pull the wrong one and you've made the problem worse than it started. So we didn't design around the user getting it right. We gave them three separate ways to find the correct drive, then checked the work afterward and let them recover if it still went wrong.

01
Choose

Make the user say exactly what they're fixing, with no ambiguity about which physical part they mean.

02
Guide

Point them at the right part three different ways. A pictogram on screen that maps accurately to the physical box, so someone working from a laptop can cross-reference it against the rack in front of them. A printable version of that same pictogram, because some of this hardware sits in dark sites where whoever's doing the work has no screen at all. And beaconing on the machine itself: an ID light on the server, then on the specific drive or slot to be swapped.

03
Validate

Check the swap before anyone calls it done. If the wrong drive came out, the system catches it and walks the user back to fix it and run verification again.

04
Document

Record the whole procedure, start to finish.

THE PICTOGRAM

Ninety-six slots, and you need exactly one of them.

The enclosure view is a map of the actual machine. Top, back, and front, so it matches whichever side of the rack you're standing at. Servers, personality modules, fans and drive slots all sit where they physically sit, numbered the way they're numbered on the unit.

Nine states can show up in that grid, from a healthy data drive to one that's failed to one that's been selected for maintenance. Every one of them carries its own shape as well as its own color. Color never carries the meaning by itself.

We built it that way for two reasons, and both of them were requirements rather than nice-to-haves. Colorblind users had to be able to read every state, and we had people on the team who were colorblind and could tell us directly whether it worked. The sheet also had to survive being printed in black and white, because someone working a dark site is holding a printout and nothing else. Shape carries the full meaning in both cases.

Enclosure 1 view — a map of the physical unit, with every drive slot numbered and color-coded by state
IN COLOR — nine drive states, each with its own shape as well as its own color.
The same enclosure view with all color removed, showing that each state is still distinguishable by shape alone
THE SAME VIEW, COLOR REMOVED — shape carries the full state, so it survives colorblindness and a black-and-white printout equally well.
WHAT I DID

Designed the whole experience, and the vocabulary under it.

I designed every screen and worked the flows with the team, then took it further than most designers do: I shaped the API architecture and implemented most of the front-end that shipped. Setup, node health, and guided repair, all from scratch. Because there was nothing to copy, the real work was inventing the vocabulary: what each screen is, how an action reads, and what a healthy node looks like at a glance.

First-time setup wizard — the five-step progress indicator with Management Network configuration open
DEPLOYMENT WIZARD — the company's first setup wizard, guiding a customer through first-time config. Click to expand.
Add Drives maintenance procedure — guided step flow
GUIDED MAINTENANCE — the Add Drives procedure, one safe step at a time. Click to expand.
Dashboard — capacity, storage usage, and major events
THE DASHBOARD — capacity, usage, and system events at a glance.
RESEARCH ON REAL HARDWARE

We tested on the actual machines, and found something nobody was looking for.

We recorded support engineers running the real procedures on real hardware. These were the experts, the people a customer calls when something has already gone wrong.

Two of them broke a physical part. Separately, and only because of how they removed and reinstalled it.

It didn't change the flow. It became a warning, bold and unmissable, about exactly what to do and why it mattered. The finding also went out as a bulletin to every support engineer, as a caution to customers, and back to the equipment manufacturer to fix at the source.

We went looking for usability problems in an interface and found one in the hardware.

FIRSTS THAT BECAME PATTERNS

Three things this product did before anything else at the company.

A deployment wizard

The first product at the company to walk a customer through initial setup themselves, end to end: no engineer required to bring a petabyte-class node online.

Guided self-maintenance

A first-of-its-kind guided repair flow. The way it sequenced each procedure, one safe step at a time, became a reusable pattern.

Hardware pictograms

Diagrams of the physical unit showing live component status and the detail needed to troubleshoot. The screen mirrors the box sitting in the rack.

I designed every screen — then wrote most of the front-end that shipped them. Being able to build what I draw keeps the design honest.
— A DEVELOPER'S EYE, INSIDE THE DESIGN
THE OUTCOME

Shipped on time. Still shipping.

0→1
Designed and built from a blank page
1st
Deployment wizard at the company
Live
Shipped on time, and in active development as of July 2026

There's no before-and-after number here, because there was no before. The product didn't ship without this service model, so there's nothing to compare it against. What I can tell you is that among Hitachi Data Systems products at the time, this was the one with a reputation for being easy to service.