Home › Projects › SOS: SEC's industrial-security system

SOS: SEC's industrial-security system

Making stock Material look like SEC.

Security staff at Saudi Electricity Company power stations use SOS to issue gate permits, check entry logs and give inspectors access. It ran on stock Material Design, and each module looked as if a different person had made it. I redesigned modules of it and turned the Material base into a system that looks like SEC.

Client: Saudi Electricity Company (SEC)
Role: UI/UX designer
Scope: Design system and core modules
Status: Shipped

A security supervisor at the gate.

Letting a contractor in, checking who entered last night, giving an inspector access to the right stations. Lots of data, all in Arabic, and no time to guess.

Generic, and drifting apart.

SOS was built on stock Material Design. It worked, but it looked like any other Material app, and each module felt different because a different person had built it.

Clearer screens, one module at a time.

I turned long forms into step-by-step wizards and raw tables into readable cards. Warnings appear at the moment of the mistake: an expired company card is blocked inside the permit flow.

Material's tokens with SEC's type and colours.

I kept Material 3's token names and roles and swapped in SEC's typeface and colours. The developers build in Angular Material, so every design token maps one-to-one to their code. When SEC later rebranded, we changed values, not screens.

Three calls behind the system.

Most of them were about making handoff to the Angular team uneventful.

Use the developers' names

Tokens keep Material 3's role names, so each one maps to a line of Angular Material theme code.

Warn at the moment of the mistake

An expired company card is blocked inside the permit flow, not reported in a message after it.

Change values when the brand changes

When SEC rebranded, colour lived in roles, so we changed values instead of redrawing every screen.

What changed for SEC.

2025 shipped: In use at SEC stations

Permits, gate logs and inspector access run on the redesigned modules.

1:1 to code: Tokens match Angular Material

Each design token keeps its Material 3 role name, so it is one line of theme code. The rebrand was a change of values.

What I owned

Turning Material 3 into SEC's own system
Modules: permits, gate logs, inspector access
Data-heavy screens for supervisors
The rebrand remap, with the design team

The rebrand found my shortcuts.

SOS runs at SEC's stations today. The rebrand showed every place a colour had been set by hand instead of through a token. 'No raw colours in a screen' should have been a rule from the first day.