Security UX · Behavioral Design

Security UX Concept

I designed a playable concept that lets visitors practice spotting phishing messages.

Playable demo Behavioral interaction Vanilla JS · GSAP · Web Audio
at a glance

30-second read.

What it is

I explored security awareness through a playable interface. Visitors identify suspicious messages and receive scores and feedback. This is a personal design concept, not a deployed training program.

What I explored

I explored how practice and clear feedback can explain a security decision.

Skills and tools

  • Behavioral UX for a domain that usually has none
  • HUD / dashboard motion vocabulary
  • Playable interaction with real-time scoring
  • Web Audio for sensory feedback (no asset files)
Vanilla JS GSAP Web Audio CSS
the argument

Compliance Slideshow → Engaged Defender.

I explored a different format for security awareness: let people practice a decision and see feedback.

before
The slideshow.

A slideshow can explain phishing warning signs. This concept lets visitors try spotting them in sample messages.

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 treated as the operator.

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. A summary appears at the end of the round.

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 inspect the surface — sender, link, language, attachment — directly. The scan-lines and the threat pulse are the visual feedback loop for that inspection.
Honesty check: this is a concept study with a working interactive demo. It is not deployed or in production, and there is no AI behind it — the threat indicators are hand-authored. The demo shows the design, not a platform.
design rationale

Three design decisions.

01
Use the threat's visual language.

The visual language of intrusion — scan-lines, monospace, threat-pulse, HUD readouts — is usually associated with attackers. Putting it on the defender's side makes the surface feel capable rather than passive.

02
Make inspection physical.

Threat indicators aren't shown in a bullet list. They're embedded in the email itself, hover-revealed and hit-flagged. The user clicks the suspicious sender, the suspicious link, and the urgency keywords. Inspecting the message is how the user learns.

03
Reward over compliance.

A score, a streak, and a round summary that names you "Engaged Defender" or "Compromised." Behavior change comes from reward signals, not deadline emails. The HUD scores correctness in the moment, instead of in a quiz at the end.