Lifebuoy Hero Academy

Home page of the live site.

Home page of the live site.

Lifebuoy runs a successful children’s hand-washing education program in developing countries that literally saves lives, but it’s hard to scale — volunteers can only commit so much time — and traditional teaching materials leave too room for human elements to greatly affect the success rate.

We developed an online education platform designed to create lasting behavioral change, available to any child with access to a computer, whether in school (where the program is encouraged by teachers) or at home. More than just a digital version of the brand’s existing “School Of 5” booklets and comics, the new Hero Academy website is a self-contained course with interactive games, video content, and a personalized profile/scoresheet for each child.

I joined the project to design games for the very young audience (4-5 years), and to supervise content editing and the development of e-learning modules.

Game Development Partner: BreakDesign

Hero Academy Website

Visual map of the Hero Academy

The 21-day education program is visualized as a series of classes in a school for superheroes.

Parents' pages

Parental participation and support are key to a successful behavioral change program, and this page keeps them informed of a child’s progress.

Child's view of the program

This is typically what a child sees as they go through each day’s three activity sections.

Game Concepts

Game 1 sketch

My initial sketch for Game Concept #1: A game where you had to defend your food from germs.

Game 1 Beta

The first version of Game 1 developed for client review.

Game 1 Final

The final version of Game 1.


Game 3 sketch

Initial sketch for Game Concept #3: Guiding Sparkle, the flying heroine, through a challenging maze of germs. The Lifebuoy power-up grants her temporary invulnerability.

Game 3 beta

The first version of Game 3 developed for client review.

Game 3 final

Final version of Game 3.


Game 2 sketch

Initial sketch for Game Concept #2: A rhythm-action, shape matching game as one of the main characters leaves a bathroom (where he should have washed his hands).

Game 2 beta

First build of Game #2, with changes to the concept, but retaining the shape-matching mechanics.

Game 4 sketch

Initial sketch for the final game: A Space Invaders-style showdown against the villain (who literally looks like a turd).

Game 4 beta

Early build of the final game, which was eventually shelved due to changes in the program structure.