PBS Sid the Science Kid: A play date with Sid

CREATIVE DIRECTION, SITE ARCHITECTURE, GAME DESIGN

sid_foodBackstory

The Jim Henson Company partnered with PBS to produce Sid the Science Kid. The main character, preschooler Sid, has a big personality and bigger questions. In each episode, he asks a compelling Why? — Why are my shoes shrinking? Why do bananas go bad?

Henson wanted a site that would keep pace with the show’s punchy delivery and curriculum.

What I did

DISCOVERY

To nail down a content plan, I followed three trails.

  1. The script. I internalized scripts to understand the show’s format, settings, and characters. The deep dive made it possible to envision an experiential interface (instead of a standard games index).
  2. The audience. Designed for pre-readers, I wanted to drop kids directly into the action. On site open, there is no generic “Choose a game” audio. Instead, Sid exclaims, “You’re here! Let’s play!” Then an event (hide-and-seek, a scavenger hunt, a butterfly chase) randomly launches. The result is instant immersion.
  3. The secondary audience. I wanted parents to co-own the curriculum. So I authored offline activities to extend each game. For example, Gabriela’s Balancing Act is linked to an offline scavenger hunt for household levers.

The unique strategy was noted.

From the very moment the front page loads, there are digital doors to open, and intelligent audio commentary from the characters that encourages kids to click around, explore, and delve deeper into the site. This design gives young visitors a chance to want to (emphasis very important here) play games and use digital tools that teach them about weather, music, bugs, the human body, antibodies, and, most especially, the devolution of a moldy sandwich over the span of 15 days.”
—Fran Wilde, Parents’ Choice

SITE ARCHITECTURE

I designed the experience to feel like a play date with Sid. Downplaying the menu, I used audio and animation as carrots to prompt exploration. In the wireframe below, kids can walk in Sid’s shoes.

I arranged games into three locales: home, playground, and school. This way:

  • kids would feel like they had an all-access pass to Sid’s world
  • I could feature all characters (as each made sense in at least one locale)
homepage

This wireframe of the home page shows the playground structure: a key show prop. On site open, characters swing open the structure’s doors to tell a joke or initiate a game of hide-and-seek. We reused joke audio from the show — just one of many ways we produced a rich, yet cost-efficient, experience.

homepage_scroll

Kids could tap Sid’s red shoes to walk around the playground. We planted collectibles (bugs, coins, leaves, etc.) for kids to pick up and examine. New objects were planted per visit.

The educational tools, disguised as well-thought-out, age-appropriate games, are impressive, interesting, and beautifully rendered. Sid the Science Kid is a ‘must-do’ for families with kids aged 4-6.”
—Fran Wilde, Parents’ Choice

GAME DESIGN: MYSTERY LUNCHBOX

Sid finds a lunchbox and tries to figure out whose it is. The science is the punchline: “The mold is eating the sandwich! This lunchbox must belong to the mold.”

While simple in design (read *cheap*), the activity was alluringly gross and scientifically spot-on. The commentary is pure Sid. But it’s not throwaway. He doesn’t describe the sandwich as ‘icky.’ Instead, he describes the visible properties of the sandwich — like a scientist.

  • Day 1: The cucumbers are wrinkly.
  • Day 5: The sandwich has little black dots on it. Like pepper!
  • Day 15: The sandwich is 2 weeks old. And it already has more hair than baby Zeke!
sandwich

The wireframe shows the basic elements: a slider (to move back and forward in time), the sandwich, a magnifier tool.

sid_mold

We photographed the sandwich from fresh to icky. The producer (and sandwich maker) chose the best ingredients to showcase mold. While we photographed it for 20 days, we realized that significant changes were only visible in 15. Very little changed from days 15 to 20. So I edited the game script accordingly.

GAME DESIGN: BALANCING ACT

There’s a lever suspended from the playground tree. The goal of the game is to add or remove objects from the lever to balance it.

  • As the ‘weights’ are alive (birds and cocoons), the lever constantly shifts. This makes the game unpredictable and replayable.
  • The game folds in physical and life sciences. A butterfly might hatch from a suspended cocoon (d1-d8), lightening one side of the lever. A bird might eat seed, lightening the feeder.

PBS described the concept as “beautiful”.

This wireframe shows a ‘key’ for object types and snap-to positions. Each object (a1, b1, etc.) has an associated ‘tip’ value.

 

sid_balance

 

GAME DESIGN: MORE WIREFRAMES

 

Results

FableVision’s work on Sid the Science Kid is over the moon. I would venture to say it’s the best website for preschoolers out there!”
—Halle Stanford, SVP of Children’s Entertainment, The Jim Henson Company

KUDOS

  • 2010 KidScreen Best Companion Website
  • Parents’ Choice Award