Learn more
INDUSTRIAL DEFENDER, UNITED STATES
Industrial Defender launched a product for CIP-015, a new NERC standard for watching the inside of an OT network. They needed a page for it. We designed it, from the 3D to the animations.
THE PROBLEM
They already had a page about CIP-015. The message, the purpose and the selling point had to stay. The order of the sections did not.
THE TEAM
Akka Studio, plus the client side.
STRATEGY
We ran the relationship and the calls, and turned them into the brief.
CLIENT
Feedback on the design came over Slack.
BUILD
We built it in Webflow.
DESIGN
The page, the 3D, the animations.
WHAT STAYED
The message, the purpose and the brand orange.
Brand orange
#FF5E13
Brand black
#13120E
WHAT CHANGED
The section order, the type, and the whole visual language.
TYPE
Switzer and Geist Mono
STRUCTURE
Hero, steps, roles, data, the requirement table, proof, quote, call to action, footer
REFERENCE
sui.io for the scroll, armadin.com as a neighbour in the field
BACKGROUND
Dark first, white after the client's feedback
BEFORE IT SETTLED
Three hero concepts, Instrument, Split ledger and Circle, and five layout variants. All of them run on the same 3D: a PLC that pulls back into a whole substation, with the anomaly in the brand orange.
001/
Flight through the substation
The camera moves through a wireframe substation and the anomaly lights up in orange.
002/
Technical schematic
The whole plant flattened into one drawing, read the way an engineer reads a schematic.
003/
Network and signal arc
Devices as vertical marks on a grid, the signal arcing between them.
004/
Concept A, Instrument
The headline beside the 3D on a light ground.
005/
Concept C, Circle
Headline centred, a dial turning underneath it.
FIVE LIVE BUILDS, SCROLL ( + )
FIVE LIVE BUILDS, SWIPE ( + )
The hero
The headline says what the product does. Behind it the substation is real 3D running in the browser, not a picture.
Scope, detect, prioritize, evaluate, retain, protect. Each one draws itself as you scroll. We made three visual variants of this before it settled.
Once the way an operator disposes of it, once as the evidence record an auditor opens.
The OT engineer, the security analyst and the compliance manager, with an animated illustration each.
The Purdue model. Level one is where the data has to come from, so the section says so and shows the layers.
R1.1 to R3, each one answered by something they can show.
What changed, what it means, and how it was handled.
A field of substations underneath it.
THE ASSETS
PLC
Programmable logic controller
Valve
With actuator
Transmitter
Pressure
Switch
Network
Contactor
Power
Rail
DIN
For the homepage
We made ten proposals in Figma and picked two directions. Both went to the client with the 3D animated on a staging link, and a mockup of the homepage so they could see it in place. The client is choosing.
Option A
Ready for CIP-015, centred, with the call to action under it
Option B
NERC CIP-015 set large over the field of substations
Instagram, Meta, YouTube
Play ( + )
See inside the controller
12 s, dark
Play ( + )
Anomaly detected
12 s, dark
