Interactive: Case Study

Nickelodeon
Code-it

UX | Design | Dev | Motion

Broadcast Digital Award Nominee

GIVING KIDS THE POWER TO WRITE CODE

Coding is now part of the national curriculum – yet online lessons aren’t always very child-friendly. Nickelodeon approached us to help create something fun and interactive to help get kids coding.

The solution needed to be simple and intuitive, yet complex enough to keep more advanced users engaged, perhaps with just a little support from a parent.

But what’s the best way to fire the imagination of younger kids?

SPONGEBOB TO THE RESCUE

Let’s face it; raw code doesn’t get many children fired up. So, we decided to give kids the power to animate their favourite cartoons within minutes. Using Haxe and HTML5, we created Code-It – an interactive platform with a drag-and-drop interface that allows kids to select classic Nick characters, including the Teenage Mutant Ninja Turtles and the mighty SpongeBob Squarepants.

LEARN THROUGH DOING

The fun, colourful and intuitive interface lets kids get started quickly. Each action is supported by tutorials and glossaries to help children learn while doing. Code-It goes beyond straight education and encourages kids to explore the application and develop their skills with awards, challenges and a bustling coding community. Kids gain awards by completing coding challenges or mastering specific elements of coding.

When kids complete an animation, they can share their work, check out their friend’s animations, and “Like” each other’s efforts. Kids can even choose animations to edit and build something new – and see how the original cartoon was made.

LIFTING THE SQUAREPANTS

We used several in-house skills to create this project:

  • HTML5 wizardry
  • UX design
  • Bright icon design
  • Engaging content
  • Bespoke programming language

WHAT WE DID

HTML5: Animations are created and played back to the user in real time, as they create them using HTML5. This also means that the application can be used on tablet devices.

UX Design: A lot of research went into the planning phase so we could be sure that kids would enjoy learning to code, and to weave in game elements to keep people playing.

Content & design: A lot of research went into the planning phase so we could be sure that kids would enjoy learning to code, and to weave in game elements to keep people playing.

Bespoke programming: The application is built in Haxe and HTML5, but we developed a new simplified coding language in a visual format so kids could use building blocks to create animations. This language / syntax is a blend of Haxe and JavaScript, but with the complexities and idiosyncrasies hidden from view. This approach means that kids can learn the core principles of programming without having to worry about the details.

Code It Awards

RESULTS AND AWARDS

The Nickelodeon team loved the final product and the uptake from users has been fantastic. Nickelodeon has already commissioned us to develop further ideas and scenarios for the Code-It piece.

The piece also caught national attention, picking up a nomination for Best Digital Children’s Content at the Broadcast Digital Awards.

Previous Project Next Project