A Gamified iPad App Teaching Online Safety to Kids

Bitty teaches kids to play smart and stay safe

ROLE

Product Designer

EXPERTISE

Product Design, Illustration

Date

May 2024

A Gamified iPad App Teaching Online Safety to Kids

Bitty teaches kids to play smart and stay safe

ROLE

Product Designer

Product Designer

Date

May 2024

01

Overview

Children today are more online than ever, but not necessarily safer.

According to Ofcom’s 2024 Media Use Report, over 96% of UK children aged 5–7 regularly access the internet. Yet most lack the skills to spot threats like phishing, weak passwords, and data misuse. Meanwhile, identity fraud costs families millions each year and leaves children vulnerable long-term. Parents worry. Tools exist. But few are built for kids or with them.

Bitty is a gamified iPad app that helps children aged 7–11 build safe online habits through short, story-driven missions, colourful illustrations, and a cheeky raccoon mascot. Built with kids in mind, and privacy by design.

02

Role

Team: 1 PM, 2 Engineers, 1 Cybersecurity Expert, 1 Educator, 1 Designer (me) *This was a volunteer-led initiative aimed at promoting digital safety for children.

Duration: 6 months

Tools: Figma, Maze, Miro, Procreate, TestFlight

03

Research & Direction

We began with foundational user research to define our approach: What’s the best format, tone, and delivery method to teach cybersecurity to 7–11 year olds?

Methods: Drawing workshops, moderated play testing, parent interviews, secondary research

Key Findings:

  • 93% of kids preferred interactive games over text-based quizzes

  • Children’s attention span was 5–7 minutes per task

  • Story-driven tasks improved recall and enjoyment

  • Parents disliked “edutainment” that felt like homework

  • Parents preferred tools with no ads, trackers, or manipulative design

  • iPads were easier for children to navigate than smartphones or PCs (Secondary: Ofcom Report)

Outcome: We chose to build a gamified iPad app with short, story-based missions and rewards, designed with Privacy by Design principles and parent peace of mind.

User Personas for Child (left) and Parent (right)

User Personas for Child (left) and Parent (right)

Empathy Maps for Child (left) and Parent (right)

Empathy Maps for Child (left) and Parent (right)

Key Insights from User Research

Key Insights from User Research

04

Prototyping & Refinement

This is where the personality of the product (Bitz, mascot, worlds) emerges.

Once we had the direction, we started building and testing early concepts. We validated features like the Bitz point system, worlds, mission maps, streaks, and our mascot “Bitty” through iterative prototypes.

Methods: Maze tests, Figma prototypes, moderated sessions with 10 kids

Key Learnings:

  • Kids loved collecting “Bitz”

  • Leaderboards with funny names (e.g. “CyberComet”) sparked excitement

  • Audio cues and mascot narration worked better than written instructions

  • Progress bars, badges, and mission maps created clear feedback loops

  • Customisable avatars were dropped in favour of fun aliases

  • Parents appreciated passive updates and learning prompts

Outcome: We leaned fully into gamification and character-led storytelling, inspired by Duolingo’s micro learning structure.

Bitty as a companion not decoration.

Bitty as a companion not decoration.

Gamification as a tool. Elements and game structure.

Gamification as a tool. Elements and game structure.

Wireframes to organise Onboarding, Home Hub, Worlds and Missions

Wireframes to organise Onboarding, Home Hub, Worlds and Missions

Bitty’s colour system balances playful gamification with serious safety.

Bitty’s colour system balances playful gamification with serious safety.

Typography Goals: Maximise readability, reduce eye strain, keep tone friendly and modern.

Typography Goals: Maximise readability, reduce eye strain, keep tone friendly and modern.

UI Buttons for Bitty

UI Buttons for Bitty

Interactive Components. Simplified for display, variants and states have been omitted for compact presentation.

Interactive Components. Simplified for display, variants and states have been omitted for compact presentation.

Themed worlds create context and help kids anchor abstract concepts visually.

Themed worlds create context and help kids anchor abstract concepts visually.

Simple, soft icons support navigation and reinforce learning cues.

Simple, soft icons support navigation and reinforce learning cues.

Kids earn Bitz, badges, and stickers to reinforce progress. It's fun without pressure.

Kids earn Bitz, badges, and stickers to reinforce progress. It's fun without pressure.

Bitty the Raccoon guides, cheers, and teaches, adding emotion to every interaction.

Bitty the Raccoon guides, cheers, and teaches, adding emotion to every interaction.

05

Design Execution

Design Execution

Design Execution

The final experience was designed with a simple visual hierarchy, dark mode UI, large touch targets, and vibrant illustrations.

Users explore “worlds” like Password Planet and Phish Lagoon, earning Bitz, badges, and streaks as they complete mini-missions. A parent dashboard shows progress without invading privacy.

App Walktrough

App Walktrough

06

Measured Impact

Measured Impact

Measured Impact

After 6 months of development, we launched a pilot with 16 families to understand how Bitty impacted learning outcomes.

Our goal was to understand how well Bitty helped children retain core cybersecurity concepts like phishing awareness, password strength, and privacy basics.

While our sample size was limited, the results were promising and pointed to measurable learning gains, especially in scenarios that involved visuals, repetition, and gamified feedback.

Phishing Awareness

Before: Only 31% of kids could spot a fake message on their own

After: 69% correctly identified phishing attempts in the post-play inbox activity

Password Strength

Before: Most children created passwords like “cat123” or used names

After: 63% incorporated a combination of uppercase, numbers, and symbols

Information Sharing

Before: Nearly half said they’d share their real name in a game

After: 81% chose to use a funny alias like “CyberRex47” in a Bitty role play activity

Parental Confidence

83% of parents said they felt their child had become more aware of online risks

75% found Bitty’s learning prompts sparked meaningful conversations at home

07

What We Missed / What's Next

One big insight we missed early: kids want to learn together. Siblings wanted to share progress. Friends wanted to compare badges. Parents asked about classroom versions.

Children frequently asked:

  • “Can I see what my brother got?”

  • “Do other kids have the same badge?”

  • “Can I play this with my friend?”

Parents echoed this, wishing for co-play or even teacher dashboards for classroom use. These insights are shaping our next design iteration to include multi-profile support, shared progress challenges, and light classroom integration.

How can
I help you?

Made with

🍫

stefanies.ch

©

2025

How can
I help you?

Made with

🍫

stefanies.ch

©

2025

How can
I help you?

Made with

🍫

stefanies.ch

©

2025