Inspiration
Every year, Americans over 60 lose more than $3 billion to online scams. The tragedy isn't just financial - it's the erosion of confidence that follows. Seniors who fall victim often withdraw from digital life entirely, losing access to banking, healthcare, family connections, and independence.
Most scam awareness resources are passive - pamphlets, warning lists, articles. They tell seniors what scams look like in theory. But theory doesn't prepare you for a fake Wells Fargo login page that looks pixel-perfect, or an IRS phone call script delivered with professional authority. We wanted to build something that puts people inside the scam in a safe environment, so the next time they encounter it in real life, their gut already knows.
What it does
Aegis is a digital scam awareness simulator with three phases:
Learn - Eight illustrated tactic cards explain the most dangerous scam techniques in plain language, each paired with an annotated visual mockup showing exactly where the deception lives.
Challenges - Fifteen interactive simulations across three difficulty tiers. Easy simulations have one or two visible red flags. Medium simulations look nearly legitimate. Hard simulations are styled to be nearly indistinguishable from real services - fake PayPal emails, Wells Fargo fraud alerts, Apple ID verification pages, Medicare phone calls, and crypto investment pitches.
Results - A full score breakdown by difficulty tier and scam category, plus a one-click PDF export users can download and share with family members.
Aegis also includes an accessibility mode powered by tremor detection. It monitors mouse movement patterns and automatically enlarges tap targets and text when shaking is detected - designed specifically for seniors with limited motor control.
How we built it
- React 18 + Vite for the frontend, with component-level state for scene navigation
- Framer Motion for page transitions and animated simulation annotations
- Tailwind CSS with a custom dark cybersecurity design system built around an electric cyan accent palette
- jsPDF for client-side PDF report generation
- General Sans via Fontshare for typography
- Eight hand-crafted simulation components each styled to match real brand interfaces
- Custom
useTremorhook using mouse velocity and direction-reversal detection to trigger accessibility mode
Challenges we ran into
The hardest design problem was making simulations realistic enough to be educational without making them so obvious they're useless. Early versions gave away the scam in the briefing text or made the red flags too visible. We rewrote the simulation content multiple times to hit the right balance - especially at the Hard tier, where the goal is to genuinely challenge the user.
Accessibility mode was also non-trivial. Building a tremor detector sensitive enough to help without triggering on normal mouse movement required careful threshold tuning.
Accomplishments that we're proud of
- The Hard-tier simulations are genuinely difficult to spot, even for people who consider themselves tech-savvy
- The tremor detection accessibility system works passively with no user input required
- The PDF export generates a professional shareable report entirely client-side with no backend
- The full design system - every color, component, and animation - was built from scratch with seniors in mind
What we learned
Designing for seniors forced us to rethink assumptions we didn't know we had. Font size, contrast, tap target size, and cognitive load all matter far more than we initially accounted for. The most dangerous scams aren't the obvious ones - the hardest simulations to design were the ones that feel completely normal until you notice one small detail.
What's next for Aegis
- Expand to mobile so seniors can practice on the devices they actually use most
- Add voice-based phone call simulations using text-to-speech
- A family dashboard where adult children can see their parent's results and weak spots
- Localization into Spanish and other languages to reach more communities
- Partner with senior centers and libraries to run Aegis as a structured workshop
Built With
- css
- fontshare
- framer
- html
- javascript
- jspdf
- lucide
- motion
- react
- tailwind
- vite
Log in or sign up for Devpost to join the conversation.