What this project is
This was a capstone project I built during my cybersecurity program — a training tool designed to teach phishing awareness to Port of Seattle internship candidates.
The idea: instead of a slide deck telling people "phishing is bad," walk them through an actual simulated phishing attempt. Let them get tricked. Then show them exactly what they missed and why it worked. Finish with a quiz to lock in the concepts.
These were real people who were being considered for real internship positions at a major port authority. The stakes were genuine, which made designing the experience feel more serious than most side projects I've worked on.
How I built it
The site is a React SPA with a multi-step flow. Here's how the experience works:
The debrief section was the most thoughtful part to design. I used a component that highlights specific parts of the phishing email — hover over the sender address and it shows why the domain is suspicious; hover over the urgency text and it explains the psychological tactic being used. Interactive, not just a wall of text.
The calibration problem: The hardest design decision was figuring out how convincing to make the fake login page. Too obvious, and you're not testing anything. Too convincing, and it becomes ethically murky — people genuinely think they've compromised their credentials. I landed on: visually convincing, but with a deliberately mismatched domain in the URL bar that a cautious person would catch.
No backend needed — all state lives in React. The "did they fall for it?" flag is just useState. The quiz answers are validated client-side. The goal was education, not data collection. Keeping it stateless meant easier deployment and no data privacy concerns.
What's under the hood
What I took away from this
Building effective security training is a UX problem as much as it is a content problem. The information matters, but if the delivery is dry, people tune out. The simulation format worked because it created a real moment of "oh I would have clicked that" — that emotional response is what makes the lesson stick.
The reveal timing matters enormously. Show it too soon and people feel cheated. Show it too late and the discomfort sits without resolution. I iterated on the reveal flow several times — the version that worked best gave people about 10 seconds on the fake login page before the debrief triggered automatically if they hadn't already "submitted."
Working in a context with real users (not just test users) changes how you approach edge cases. What if someone with a slow connection misses the URL bar detail? What if they're on mobile where the domain is truncated? These are not theoretical concerns when you're deploying for an actual organization. It pushed me to test on more device configurations than I usually would.
The Port of Seattle context also taught me something about trust. When you build a tool that deliberately deceives users — even for their benefit — you have a responsibility to be transparent about what happened and why. The debrief section wasn't an afterthought; it was the whole point.