Being a Toca Builder: Creating Construction Play on Touchscreen Devices

by Björn Jeffery
November 7, 2013
Toca Builders

Photo courtesy of Toca Boca

Since the beginning of Toca Boca, we’ve always tried to invent new ways of playing with screens. Some come very naturally—like creative play—where the touchscreen device gives kids super powers for their creations. Other areas are a little more abstract and take some more thinking. In this more challenging category, we have Toca Builders, which addresses construction play. How can we use a flat 2D touchscreen to help kids create and play with models and patterns?

From an adult’s perspective, pure construction can often be quite linear. First you need to decide what you want to build, then you need to plan the process, figure out how to combine techniques to get there, and then finish the project. For kids, the process of “constructing” is not necessarily structured in such an orderly fashion. Construction play can encompass a lot of exploring and experimenting, and doesn’t need to be a linear process with a predetermined outcome. On the contrary, the ability to build freely can provide a more creative challenge as opposed to following an engineering ditto. The journey is the destination, as they say.

In order to create a digital toy that enables this kind of creative freedom, we wanted to make sure that the app was not in the way of this journey. It needed to facilitate and inspire as opposed to frustrate and limit. A key challenge was the user interface. It serves two purposes in this case: first it needs to enable kids to do what they are intending to do, and it needs to be easy to understand. We wanted to avoid Photoshop-esque menus or abstract icons representing tools that may mean something for adults but nothing for kids. Secondly—since the app is so open ended—we could also use the interface as some scaffolding in terms of showing what could be done in the app. It is a big 3D world where anything could be built, but where should the kids start? Let the interface serve as some inspiration! To spark an idea that might not have been there when they opened the app. This is an unusual choice, as most of you who use software on a daily basis know. The menus in Microsoft Outlook don’t exactly inspire you to write great emails.

toca builder

Image courtesy of Toca Boca

The team solved this challenge by essentially removing the user interface from a traditional perspective. Instead, they created characters for each specific construction technique. The app has Cooper the Ball, who paints the ground by rolling around on a ball covered in paint; Vex the Jumper builds vertically and Blox the Hammer builds horizontally and can remove blocks too. There are six characters altogether.

Now it may sound counter-intuitive to have characters as an interface, but the fact is that this works surprisingly well for our young builders. Instead of thinking about which buttons to press in order to create a certain effect, kids can identify themselves with certain characters and the construction powers they have. If they want to repaint a structure, they don’t have to look through a menu to find the “repainting button” but instead, remember that Jum Jum the Painter can shoot paint from a long distance to make something a different color. In essence, the player becomes each character for brief periods of time and by that, the question of how to create something is suddenly solved. The app removes the abstraction that a traditional menu would introduce and moves straight into identification instead.

The characters also serve as some scaffolding within the app, in that you can explore and have fun with each character without explicitly trying to build something. Playing with the characters in a free form way provides a starting point and can inspire an idea of something to create. Or for that matter—just keep playing without a specific intention. The point of the app is to have fun first and foremost, and the notion of constructing something specific should never stand in the way. For this reason, there are no explicit challenges to solve or high scores for building certain things. In this sense, it is similar to LEGO—you can have plans to build something very specific, but it is just as fun to just play with it in any way you like. This stays true to our philosophy of making toys and not games.

Additional scaffolding and inspiration comes through the randomized pre-built worlds that appear in the app from time to time. These pre-constructed worlds can serve as a playground to have fun with, as the first blocks to add to, or just as something exciting and pretty to look at. It also adds the element of surprise, which is always fun.

The version of Toca Builders that is in the App Store today is the third prototype that the team made. In many ways, making the app was a journey without a clear destination too. The original title was Toca Inventions; the team gradually iterated from that point forward, finally leading up to the product that you can play with today. From the beginning, we knew that it was going to be about construction, and we knew that it had to be fun. After that it was trying to facilitate the fun and getting the app out of the way so kids can create. Designing our six little Builders to help out with this process is one of the more elegant design choices we’ve made, I think.

The team behind Toca Builders was:

Mårten Brüggemann – Play Designer
Emil Berner – Art Director
Erik Olsson – Developer
Emil Ovemar – Producer

 

Bjorn JeffreyBjörn Jeffery is the CEO and Co-Founder of Toca Boca, a play studio that makes digital toys for touchscreen devices. Since 2011, it has released 17 digital toy apps that are played in more than 150 countries. The apps carry consistently high ratings on the App Store and have totaled more than 32 million downloads to date. Toca Boca is a part of The Bonnier Group, one of Europe’s largest media groups with interests in books, newspapers, magazines, television, internet and film. Mr. Jeffery is currently based in San Francisco at the company’s U.S. headquarters.

Tags: , , , , ,

Related blog posts


All blog posts