The design process behind Toca Boca’s infectious apps

I fell in love with studio Toca Boca long before I had a child of my own.

Since 2010, Toca Boca has created over 30 apps that have been downloaded more than 100 million times in 215 countries. Their digital “toys” are not only bursting with charming characters and whimsical animation, they’re fueled by a progressive philosophy that puts children at the center of their design process.

Practically speaking, that means they don’t use in-app purchases or advertising to sneak in revenue. Their games are also open-ended and gender neutral, emphasizing play for the sake of play.

Toca Dance, their newest app, is a fitting representative for Toca Boca’s ethos. Each character and prop feels like it’s part of a fully realized, touchable world. And it turns out that creating your own dance routines with a rag-tag team of characters is a lot of fun.

Fascinated by their consistently high production values, I asked Toca Boca about their design and animation process. Here’s what Lars-Erik Ronnheden, lead programmer, and Christoffer Svenningsson, 3D artist, had to say.

Toca Boca’s “play-full” design process

During the development of a new product, at what phase does visual design really start to matter? What about animation? When and why is it introduced to the process?

It is usually starts during character conception. It is often rough thumbnails to just sketch out ideas for specific moves or to explore the persona of a specific character.

Mostly in the early stage, it’s about finding out what the limitations might be with your character when it comes to animation.

In Toca Kitchen 2, you prepare and feed food to different characters with different tastes

During the project, it’s common for us to do animation mood boards if there is time for it. This helps nail down the feeling of animation we are going with.

Does Toca Boca have an in-house design and animation team for its apps? Or do you partner with studios and/or freelancers?

We handle most of our design and animation in-house, but sometimes work with outside partners. For example, Emil Berner on our team was the lead artist for Toca Dance but we also worked with the renowned Swedish street artist Finsta on the logotype and artwork to help bring in some authentic street art elements.

The street scene from Toca Dance

This proved very powerful when we added it together with the in-house designers and artists.

How large is your in-house team and what are the roles of the team members?

Since we often have several projects going at once, we work in small teams focused on specific apps.

We have play designers rather than game designers — this is the person who makes sure we are approaching each project from the kids’ perspective throughout the process.

A typical app team at Toca Boca consists of six to eight people total. That includes a play designer, project manager, two developers one artist, and a 3D artist.

It’s worth noting that we have play designers rather than game designers — this is the person who makes sure we are approaching each project from the kids’ perspective throughout the process.

All of the Toca Boca apps I’ve seen seem to live in the same visual universe, despite there being some stylistic variations from app to app. I’m very impressed by the degree of creative direction — Toca Boca has a clear “voice” but it’s not overly proscriptive.

How do you guys achieve that?

Its very important for us to have quality and consistency across all of our products. In order to do that, Toca Boca has a few creative principles to guide what goes into our products and experiences.

Characters from Toca Life: School

For example, we always think about the kids’ perspective — how would they perceive this and how do they look at the world? Toca Boca experiences are also grounded in everyday realities — things shouldn’t be too perfect, there is still dirt in the corners, and there is always a weird, quirky element.

Toca Boca has principles that guides us, but the magic happens when we can be freely creative within that defined space.

It looks like most (all?) of the animation in the more recent Toca Boca apps is done in real-time 3D/CG (rather than real-time 2D). Is that accurate?

What are some of the obstacles that your creative teams have to deal with when designing and animating for real-time playback?

With our latest release, Toca Dance, we designed in 3D but wanted to give the characters a distinct flat-shaded look.

Some of the characters from Toca Dance

Since our apps are mobile only, the development process comes with a set framework and some limitations, which can be a challenge. We design all of our apps to be available on both new and older devices, which leads to some conscious design decisions.

Low-end and older devices limit the number of things we can show on the screen at the same time. To achieve good performance, we often need to be inventive with the hardware at hand — for example develop mobile-friendly shaders and make sure that we don’t send too many draw calls to the GPU.

The low-poly beauty of Toca Nature

In Toca Dance, we’re making use of tools which let us blend between artist-created and user-generated character animations, which required a fair share of iterations before we were happy with the result.

This is something we want to keep exploring in future updates to give the users even more control over the character animations.

Has you ever considered making episodic content around Toca Boca’s pantheon of characters?

Yes, we actually have a content channel within the apps in our Toca Life series called Life Weekly.

Each week, we update the channel with new and unique content based on the Toca Life apps. We also publish the Life Weekly content as well as game play videos and app trailers on our Youtube channel.

About the author

Justin Cone

Together with Carlos El Asmar, Justin co-founded Motionographer, F5 and The Motion Awards. He currently lives in Austin, Texas with is wife, son and fluffball of a dog.
Before taking on Motionographer full-time, Justin worked in various capacities at Psyop, NBC-Universal, Apple, Adobe and SCAD.