Creating a safe experience for kids

I’m a mom, and so is my co-founder Kelli. We’ve got kids of our own and we work in tech, so we’re definitely no strangers to the harm that technology can cause. And yes, we’ve even dealt with our fair share of tech-induced tantrums!

When we started working on the RockstarKids app, the question of harm reduction was at the top of our mind. We know that the American Academy of Pediatrics (AAP) recommends no screen time at all for children until 18 to 24 months (except for video chatting) and says kids ages 2 to 5 should get an hour or less of screen time per day. The World Health Organization (WHO) has similar recommendations. We wanted to make sure any app that we work on followed public health guidelines.

As with any app, we considered the ethics of how it would be used. In our early conversations with the founders, some of the biggest questions we asked were:

• Can parents use this app to abuse or manipulate kids?
• How can we protect kids’ privacy inside the app?
• Are there any ways that people can use the app inappropriately to harm children?

Asking these questions upfront helped us create designs in a way that minimized harm. As we talked through each new feature, we were able to add protections and intentional friction to reduce harmful behavior on the part of bad actors.

UX design for kids in many age groups

The RockstarKids app helps kids ranged anywhere from 3 to 15, but we know that “kids” aren’t a monolith. Usability experts recommend targeting very narrow age groups when designing for kids: young (3–5), mid-range (6–8), and older (9–12) children. Each of these age groups has their own needs, motivations, cognitive skills, physical capabilities, and reading ability. This makes designing for children particularly challenging, because we need to take the youngest group’s abilities into account, but also design in such a way that the older kids don’t perceive it as being for “babies.” Nielsen Norman Group found that kids are hyper-aware of age differences: they will react negatively to content designed for children that were even one school grade below or above their own level.

To balance the needs of many age groups, we used some techniques that were a better fit for younger children (limited vocabulary, limited navigation and content types, heavy use of imagery) and some that were a better fit for older kids (a muted color palette, images that aren’t too “babyish”). We worked to keep the overall experience consistent rather than bouncing around for different age groups. This consistency streamlines the app as a whole, but has the added benefit of reducing development time, cost, and risk when building the MVP version of the app.

This need for balance also extended to UI elements that we chose for the app. We knew we wanted a font with one-story ‘a’s and ‘g’s (also called infant characters) since these are the lowercase shapes preschool and school-age children learn to write. We also wanted a font that wasn’t overly decorative or complex, and one with a larger x-height that is easier for young children to read. At the same time, we needed something that wouldn’t seem too cartoonish for older kids. We selected the popular typeface Poppins to use within the app because it met our need for a child-friendly font. This typeface has a warm and friendly look with rounded counters and simple, generous letter shapes.

Minimizing distractions in a user interface design for kids

One of the biggest differences between designing for kids and designing for adults is the use of color. As adults, if we saw an app with many different competing colors, we might cringe. Apps designed for adults tend to use color in ways that limit distractions for the adult brain, and allow adults to complete tasks as quickly as possible.

Paradoxically, bright colors can help kids to focus on an app and navigate it successfully. While adults tend to use apps to complete a specific tasks, kids are more likely to use apps for entertainment. To give an example, the Sesame Street website looks very garish to me as an adult, but it actually follows children’s usability principles extremely well and is beautifully designed for children. Even though RockstarKids isn’t designed to entertain kids, we kept these principles in mind to hold kids’ attention. We selected a bold (but slightly muted) color palette for use throughout the app to help kids and adults navigate successfully.

One interesting element of the RockstarKids app is that it is somewhat like a virtual version of sticker charts. Kids love sticker charts because they can choose their own stickers, and the founders wanted to bring some of this customization into the app as well. We wanted to add some background images, but didn’t want the background to be visually distracting for kids or pull their focus away from completing tasks. We selected some kid-friendly background images that might feel familiar to games that they use, but slightly muted the images so that they don’t compete with tasks on the screen.