Phishing Playground
Don't let Arnaldo eat the bait!
Teaching through Interaction
The game is divided into three levels, each focusing on a different phishing technique. Instead of simple reading, the user must physically interact with the device to uncover the truth.
Level 1: URL Spoofing
Users must double-check the address bar. By drawing on the screen, they highlight suspicious URLs that look exactly like trusted sites but have minor character alterations.
Level 2: The Perspective Shift
A text message appears. By rotating the iPad 180 degrees, the environment flips—but the scammer's mistakes stay fixed. Grammatical and spelling errors are revealed as 'un-flipped' text.
Level 3: Character Spoofing
Mystore emails can be tricky. Users must shake the tablet to 'spread' the letters, revealing that what looked like an 'm' was actually an 'r' and 'n' (rn) pretending to be one.
Swift Implementation
The entire game logic was built using Swift. I leveraged the iPad's gyroscope for the rotation mechanics in Level 2 and accelerometer data for the shaking interaction in Level 3.
Tech Stack
- Core Application: Swift (SwiftUI)
- Physics & Interactions: CoreMotion
- Animations: Lottie for After Effects integration
Motion Graphics in After Effects
To make Arnaldo feel alive and expressive, all character animations were hand-crafted in After Effects. These were then exported as Lottie files to ensure smooth playback and small file sizes while maintaining high visual fidelity on the iPad Pro.
The Impact of Shared Knowledge
The final goal of Phishing Playground isn't just to save Arnaldo, but to empower the user to help everyone around them. As the ending animation states: "And the more that people know about this, they will be better protected against scams."