Overview
No More Haters is a PWA of three games that teaches 14–25 year-olds to detect hate speech and disinformation. Built with Commit Sans for maldita.es, it turned a “preachy lecture” problem into a measurable behavior change: ~14,000 players in three months, most of them finishing all three games and coming back for more.
My role
Product designer (Commit Sans studio): design strategy, game mechanics, UX/UI, motion, and front-end development.
Team
- Me: product design, motion & front-end
- Silvia Fernández Palomar: art direction, creative direction & illustration
- Carlos Hernández: fullstack
- maldita.es: client
- FAD: partner
- Google.org: funding
Timeline
5 months: July to November 2020
Why we started
maldita.es is Spain’s fact-checking nonprofit. With funding from FAD and Google.org, they wanted to build resilience against hate speech in teenagers and young adults: people who live inside the comment threads and group chats where this stuff actually spreads.
The obvious approaches all fell short. A lecture feels preachy the moment it starts. A workshop doesn’t scale past the room it’s delivered in. And information alone doesn’t build a skill: you can fully agree that hate speech is wrong and still scroll straight past it when it’s dressed up as a joke from a friend. We needed something that taught recognition as a reflex, not a talking point.
How I tackled it
Step #1: Reframe the goal from a topic to a skill
“Media literacy” is too vague to design against. We broke it into three distinct cognitive skills, each one becoming a game: pattern recognition under time pressure, evidence-based reasoning, and situational judgment. That reframe is what made the difference between “an educational website” and something that could actually change behavior.
Step #2: Design the feedback loop with care
With illustrator Silvia Fernández Palomar, I built a modular character system: gender- and ethnically neutral, expressive, age-appropriate, and reusable as component instances. The rule we designed to: positive reinforcement for right answers, constructive feedback for mistakes, never shame. A teenager who feels judged closes the tab and doesn’t come back.
Step #3: Engineer for where it would actually live
The product had to work in schools, with unreliable connectivity, on whatever devices students happened to have. That meant a PWA with service-worker caching for offline use, WebP animation delivery, and WCAG AA contrast with full keyboard navigation. Carlos and I designed and built this end to end.
The solutions
Games, not lectures
Knowing hate speech is bad is not a usable ability. The real moment happens in a split second: a “joke” in a group chat, a comment that feels off but you can’t say why. Most education stops at “this is wrong,” which does nothing for that moment. We needed to train the gut reaction, and the override that catches it when the gut is wrong.
Each game targets one cognitive skill. The Rondo trains pattern recognition under time pressure: players rapidly classify statements as hate speech, misinformation, or valid critique, training the gut reaction and the override. True or False builds evidence-based reasoning: cards with detailed scenarios whose feedback explains why an answer was right or wrong, so players learn to evaluate sources, not memorize. The Quiz tackles situational judgment: animated stories across four real contexts (class, friends, home, Twitter) where players decide how to intervene.
78% completion, 41% return rate. Players finished all three games and came back after their first, proving the games worked as learning tools rather than a novelty.
Neutral characters, never shame
Teenagers are hyper-sensitive to being talked down to and to being misrepresented. Use a stereotype and they’ll reject the whole message. Correct them with a “wrong, that’s bad” and they’ll disengage. The feedback loop was the product, and getting it wrong meant losing the exact people we were trying to reach.
The modular character system let players project their own identities onto the characters, exactly what we wanted. Right answers got positive reinforcement; mistakes got constructive “here’s why” feedback. No shame, no stereotyping, and a system reusable as component instances so it scaled across every screen and scenario without feeling repetitive.
Qualitative signal: teachers reported using it as a discussion starter, and players got better at explaining why something was problematic, not just that it was.
Built for a classroom with no signal
This had to work in schools, not in a demo. That means unreliable connectivity, a mix of desktop and mobile, and low-end Android phones that choke on heavy animations. A beautiful product that doesn’t load in a real classroom fails the same way a lecture does.
A PWA with service-worker caching made it work offline. WebP animation delivery kept things smooth on low-end hardware, and WCAG AA contrast plus keyboard navigation kept it usable for everyone. The 60:40 desktop-to-mobile split validated the classroom hypothesis: this was being used exactly where we designed it to be.
65% smaller animation delivery, 60fps on low-end Android. WebP replaced GIF alternatives, so animations stayed fluid on the phones schools actually have.
Feedback & impact
- ~14,000 users in the first three months, driven by schools, with a 60:40 desktop-to-mobile split that validated the classroom-first design.
- 78% completion and 41% return. The numbers that matter here are the behavioral ones: they tell you the games worked as learning tools, not just as a novelty.
- Behavior change, not vanity metrics. maldita.es saw users get better at explaining why something was problematic, and teachers adopted it as a discussion starter.
And the proof that it landed emotionally:
Questions or want to discuss this kind of work? Email me.