Loading
Imagem principal do projeto Detetives Digitais

Product Design & AI Engineering | Projeto próprio

Detetives Digitais

Year

2026

Role

Product Designer & AI Engineer

Duration

End-to-end · 8 vertical slices

Team

Solo

Tools

Next.js · Gemini API · GSAP · PWA / IndexedDB

View Project

The problem

Brazilian children are among the most connected in the world, yet live in a country that became a showcase for WhatsApp, SMS and Pix scams. Surveys like TIC Kids Online Brasil expose the gap: very high access, low critical skills. Brazil's BNCC curriculum made digital literacy a required competency, but teachers lack the time and engaging material to teach it.

My role

Product Designer & AI Engineer, solo: shaping, design system, code, AI integration and deploy, from zero to live.

The outcome

A playable two-sided product, live: the teacher generates a mission with real AI, the student plays in airplane mode, and the teacher sees where the class stumbled — then generates reinforcement from it.

Overview

An ed-tech product that brings a platform's entire thesis together in a single flow: the teacher describes a pedagogical goal in natural language, AI (Gemini) generates a gamified digital-literacy mission aligned to Brazil's BNCC curriculum, the teacher reviews and approves, the guardian consents without exposing the child's data, the student plays offline as a PWA, and results sync and turn into insight. A two-voice design system dresses the same base for the teacher (sober) and the student (playful), without ever switching products.

The Problem

Brazilian children grow up hyperconnected, but in a hostile environment. Brazil is among the countries most hit by digital scams, and WhatsApp, SMS and Pix fraud reaches the family phone every day — often the very phone a child is using. Surveys like TIC Kids Online Brasil (Cetic.br) show the same gap year after year: very high access, low critical skills. The child knows how to use the app, but never learned to distrust it.

Brazil's BNCC curriculum responded by making digital literacy a required competency, but pushed the burden onto the teacher — already overloaded, with no time, no ready-made material and no technical repertoire to turn 'teach how to spot a scam' into an activity that holds a primary-school class. On top of that, many public schools live with unstable or nonexistent internet, which rules out most online tools, and LGPD and the ECA (child statute) demand heightened protection for minors' data. The need is enormous, and existing tools are either generic, or depend on connectivity, or treat the child as a database record.

The landing tells the thesis in one line: AI prepares, the teacher approves, the class learns — even offline.
The landing tells the thesis in one line: AI prepares, the teacher approves, the class learns — even offline.

The thesis in one flow

The answer is a single flow connecting both sides of the product: the teacher describes the goal, AI generates the mission, the student plays offline, and the teacher sees the result. It's the entire thesis of a digital-literacy platform in one journey. And the theme is also the content: a mission in a 'is this message safe? scam hunt' format, where the child evaluates real SMS, WhatsApp and email messages and decides what's a scam and what's safe — practicing, through play, exactly the distrust research points to as the missing skill.

Product Decisions

01
Conversation, not a form

The teacher describes the lesson in natural language — as they'd tell a colleague — instead of filling twelve fields. The class level is the only setting.

02
Human-in-the-loop

AI proposes; the teacher decides. Nothing reaches the student without review: edit the text, change the level and, if the AI mislabels, flip scam/safe with one tap.

03
Zero-PII becomes mechanic

Instead of asking for the child's name, the game asks for a detective codename. The LGPD requirement stopped being friction and became part of the play.

The conversational briefing: the pedagogical goal enters in natural language, with 'AI thinking' states that reduce the anxiety of waiting.
The conversational briefing: the pedagogical goal enters in natural language, with 'AI thinking' states that reduce the anxiety of waiting.

The teacher has the final word

Gemini returns a complete mission as structured JSON — messages, clues, feedback and BNCC alignment — but the design treats AI as a copilot, not autopilot. The review screen lets the teacher edit each message, regenerate by level and, the gesture that matters most, flip the AI's classification with one tap when they disagree. It's the difference between 'the AI did it for you' and 'the AI did it with you'.

On the other side of the screen: the student

Truly offline

The student side is a genuine offline-first PWA, not a marketing promise. Each answer is written to the device (IndexedDB) before any network call, so feedback never depends on connectivity; when the internet returns, a queue syncs itself with the backend. Tested in airplane mode: the child plays the whole mission unplugged, earns points, finishes — and never sees a spinner. A service worker caches the app shell so the mission opens even with no signal.

The loop closes: the teacher sees where the class stumbled, by codename (zero PII). The message that fooled the most becomes the next lesson's starting point.
The loop closes: the teacher sees where the class stumbled, by codename (zero PII). The message that fooled the most becomes the next lesson's starting point.

One design system, two voices

The teacher needs calm and credibility; the student, energy and warmth. Instead of two systems, a single one with shared semantic tokens and per-voice remapping: a CSS scope swaps color, corner radius and typography, and the components don't change. The teacher's voice references Notion (warm neutrals, violet as the only accent); the student's references Miro (canary yellow, sticky-note pastels, black pill). The same Safe/Scam keeps its color semantics on both sides, because the semantics are shared — only the value changes. The landing stages this metamorphosis mid-scroll: the teacher's serious tool melts into the student's play.

The metamorphosis on the landing: the same semantic tokens, remapped values — the teacher's tool becomes the student's play.
The metamorphosis on the landing: the same semantic tokens, remapped values — the teacher's tool becomes the student's play.

The master stroke: reinforcement from results

The final slice is what turns a generator into a real copilot: instead of only generating cold, the AI reacts to the class's performance. In the dashboard, each message the class missed most gets a reinforcement button; one click assembles the context (goal, BNCC, concepts the class didn't grasp, senders to avoid) and generates a new mission focused precisely on the weak spots — which lands in the same teacher review flow, without auto-publishing and without collecting PII. The pedagogical loop stops being a straight line and becomes a cycle. Reuse, not fork: a second entry point feeding the pipeline that already existed.

8vertical slices, from briefing to AI reinforcement
0children's personal data collected (LGPD by default)
100%of the mission playable offline, syncs later

Outcome

A live end-to-end product that runs the entire thesis: from pedagogical intent in natural language to the insight that feeds the next lesson, with real AI (Gemini), real offline (a PWA with a sync queue) and zero children's PII. Every screen carries a UX decision anchored in the reality of Brazilian schools: why conversation over a form for a time-starved teacher, how to show the AI thinking without anxiety, how to tell a child with no internet 'saved, will sync', how to turn the LGPD requirement into part of the play. It's proof that one person can research, design and build an educational product from end to end.