UX Engineer

Security UX Concept

A security awareness training surface redesigned to borrow the visual language of the threat itself — HUD UI, scan lines, threat pulse, a playable “spot the phish” round. Motion, empty states, and behavioral interaction design applied to a compliance use case.

concept study playable demo vanilla JS · GSAP · Web Audio
the argument

Compliance Slideshow → Engaged Defender.

Security awareness training is a category-shaped problem. Real money, real stakes, and a $B+ industry built on the assumption that boring is somehow virtuous. Here's what that gets you, and what it could get you instead.

before
The slideshow.

Stock illustrations. A blue header. Bullet lists about "best practices." A quiz at the end. Click through. Mark complete. Forget by Tuesday. The user is positioned as a liability to be managed.

Module 4: Recognizing Phishing

This module will teach you to identify common phishing techniques used by malicious actors.

Learning Objectives:

• Identify suspicious sender addresses
• Recognize urgency-based social engineering
• Report suspected phishing to IT

CONTINUE →
after
The HUD.

A live inbox. Clickable threat indicators. Real-time scoring. Visual feedback that matches the stakes — scan-lines, threat pulse, intrusion alerts. The user is positioned as the operator. Defense made to feel earned.

THREAT QUEUE — INBOX

5 messages flagged for inspection.

2 confirmed phishing · 1 social engineering attempt · 2 benign.

Tap suspicious indicators. Pulse pattern reveals threat severity.

[ ENTER QUEUE ]
the demo · playable

Spot the phish.

Five inbound messages. Two are phishing. Tap the suspicious words, links, or addresses to flag them. Then either REPORT the message or TRUST it. Catch the threats. Keep the legit mail. End-of-round summary at the close.

Score
0
Round
1 / 5
Threats Caught
0
Misses
0
⌖
select a message
to begin inspection
Design move: the user isn't memorizing a checklist. They're reading the surface — sender, link, language, attachment — the way an operator reads a console. The scan-lines and the threat pulse aren't decoration; they're the visual feedback loop that makes the inspection feel like the work it is.
Honesty check: this is a concept study with a working interactive demo. Not deployed, not in production, no AI behind the scenes — the threat indicators are hand-authored. The demo proves the design, not the platform.
design rationale

Three decisions, one read.

01
Borrow the threat's wardrobe.

The visual language of intrusion — scan-lines, monospace, threat-pulse, HUD readouts — gets associated with attackers. Use it on the defender's side and the surface starts to feel powerful instead of victimized. Same vocabulary, flipped polarity.

02
Make inspection physical.

Threat indicators aren't shown in a bullet list — they're embedded in the email itself, hover-revealed, hit-flagged. The user clicks the suspicious sender, the suspicious link, the urgency keywords. The act of looking is the act of learning.

03
Reward over compliance.

A score, a streak, a round summary that names you "Engaged Defender" or "Compromised." Behavior change comes from reward signals, not deadline emails. The HUD makes correctness feel earned in the moment, not retroactively assessed in a quiz.

PALETTE