Landing Page
Evidence Board with Chatbot
Case with hidden clues
Report Filing
How to use AI safely
Closed Case Archive

The Detective Agency

A noir-styled digital literacy game that turns seniors into scam-fighting detectives.

Inspiration

Seniors are one of the most targeted groups for digital scams—ranging from phishing emails to fake tech support and “grandparent” scams. Yet most educational tools aimed at helping them are dry, overly technical, or patronizing.

We asked a simple question:
What if learning to spot scams felt like solving a mystery instead of sitting through a lecture?

By reframing seniors as capable detectives rather than vulnerable users, we transform learning into something empowering, engaging, and memorable.

What It Does

The Detective Agency is a browser-based interactive experience where users:

Enter a noir-style detective office
Receive a case briefing
Investigate realistic digital evidence
Identify scam indicators
Submit a final deduction

Cases Included

Tutorial — Learn how the system works
Grandparent Scam — Suspicious SMS from a “family member”
Phishing Email — Fake bank alert
Tech Support Scam — Popup + live AI scammer interrogation
Phone Navigation — Practice finding/reporting suspicious messages

AI Features

The Informant
Ask questions anytime. It guides without giving away answers.
Scammer Interrogation
Users question a live AI scammer and watch its logic fall apart.
AI Commendations
After solving a case, users receive personalized praise based on what they noticed.

Accessibility and Voice

Full text-to-speech narration for all content
Voice input support for users who struggle with typing
Large text, high contrast, and simple navigation
Works on desktop, tablet, and mobile

No login. No installation. Just open and play.

Training Lab

Users can also learn:

How to connect to Wi-Fi
How to use AI safely
How to video call
How to compare real vs fake emails
How to ask health questions responsibly

Includes an AI tutor and a simulated phone interface.

How We Built It

Next.js 14
React 18
TypeScript
Tailwind CSS
Framer Motion
Google Gemini
ElevenLabs
Web Speech API
Vercel
localStorage

Content is JSON-driven, allowing new cases to be added easily.

System Architecture

The Detective Agency is a fully browser-based application designed for zero friction and maximum accessibility. Users interact through a simple interface that connects directly to an AI-powered system, with no login or installation required.

All game logic, case content, and progress tracking are handled on the frontend, while Google Gemini powers dynamic interactions such as the Informant assistant, scammer roleplay, and AI-generated commendations. Voice features are layered on top to support both input and narration.

┌───────────────────────────────────────────────────────────────┐
│                        User Layer                             │
│                                                               │
│   ┌───────────────┐   ┌───────────────┐   ┌───────────────┐   │
│   │ Desktop       │   │ Tablet        │   │ Mobile        │   │
│   │ Browser       │   │ Browser       │   │ Browser       │   │
│   └───────────────┘   └───────────────┘   └───────────────┘   │
└───────────────────────────────────────────────────────────────┘
                               │
                               ▼
┌───────────────────────────────────────────────────────────────┐
│                      Frontend Layer                           │
│                         (Vercel)                              │
│                                                               │
│                   ┌────────────────────────┐                  │
│                   │ Next.js 14 App Router  │                  │
│                   │ React 18 + TypeScript  │                  │
│                   │ Tailwind CSS           │                  │
│                   │ Framer Motion          │                  │
│                   │ - Case Viewer          │                  │
│                   │ - Training Lab         │                  │
│                   │ - Phone Simulator      │                  │
│                   │ - Archive System       │                  │
│                   └────────────────────────┘                  │
└───────────────────────────────────────────────────────────────┘
                               │
                   ┌───────────┴───────────┐
                   ▼                       ▼
┌─────────────────────────────┐   ┌─────────────────────────────┐
│        Content Layer        │   │         AI Layer            │
│                             │   │     (Google Gemini)        │
│ ┌─────────────────────────┐ │   │                             │
│ │ JSON Case Files         │ │   │ ┌─────────────────────────┐ │
│ │ - Evidence Items        │ │   │ │ Informant Assistant     │ │
│ │ - Scam Indicators       │ │   │ │ In-case Q&A             │ │
│ │ - Correct Deductions    │ │   │ └─────────────────────────┘ │
│ └─────────────────────────┘ │   │                             │
│                             │   │ ┌─────────────────────────┐ │
│ ┌─────────────────────────┐ │   │ │ Scammer Roleplay Agent  │ │
│ │ Lab Scenarios           │ │   │ │ Live Interrogation      │ │
│ │ - Tutorials             │ │   │ └─────────────────────────┘ │
│ │ - AI Lessons            │ │   │                             │
│ └─────────────────────────┘ │   │ ┌─────────────────────────┐ │
│                             │   │ │ Commendation Generator  │ │
│                             │   │ │ Personalized Feedback   │ │
│                             │   │ └─────────────────────────┘ │
└─────────────────────────────┘   └─────────────────────────────┘
                   │
                   ▼
┌───────────────────────────────────────────────────────────────┐
│                       Voice Layer                             │
│                                                               │
│        ┌──────────────────────┐   ┌───────────────────────┐   │
│        │ ElevenLabs TTS       │   │ Web Speech API        │   │
│        │ - Narration          │   │ - Voice Input         │   │
│        │ - Case Briefings     │   │ - Microphone Control  │   │
│        └──────────────────────┘   └───────────────────────┘   │
└───────────────────────────────────────────────────────────────┘
                               │
                               ▼
┌───────────────────────────────────────────────────────────────┐
│                     Local Storage Layer                       │
│                                                               │
│                   ┌────────────────────────┐                  │
│                   │ Browser localStorage   │                  │
│                   │ - Solved Cases         │                  │
│                   │ - Progress Tracking    │                  │
│                   │ - No Login Required    │                  │
│                   └────────────────────────┘                  │
└───────────────────────────────────────────────────────────────┘