How Toca Boca designed the characters, UX and gameplay for Toca Dance

The idea of creating a dance-based app has been around ever since we started Toca Boca. Now, thanks to our amazing team including lead Artist Emil Berner, we have finally made one: Toca Dance.

We try to come up with original ideas that can be used as tools to be creative with. Dancing is an interesting form of creativity, as you use your own body to express your mood and feelings. We couldn't find any cool dance apps where you got to create your own dance in any of the app stores, so we decided to create one.

In March 2015, we created our first prototype (below). Toca Dance started quite simply as a loop. In this simple prototype, you saw a triangle at the bottom, and when you touched a hand or a foot, you’d record move data for that specific limb. We made this character for Toca Ragdoll, an app that we prototyped but eventually decided to scrap.

Based on this prototype, we decided that Toca Dance would be a sequencer for getting characters to enact a series of dance moves - and that a video would be the output from the experience. This is how we saw the process of using it:

  • Dress up your characters
  • Teach them moves
  • Perform and record on stage
  • Output a video

By August 2015 , the app was starting to take shape. At this point, the app was only a one-room experience: you would drag the characters up from sort of a pavement and place them anywhere you want, such as on a cardboard-box-style dance surface. That’s where you added their moves. You could move the body, move the limbs, and have the characters perform all the moves.

At this stage all the characters had different moves, but in our playtesting with kids we learned this was confusing to them. The takeaway for us was that it was a little bit unfocused: that kids didn’t necessarily know what to do because you could basically do everything at the same time. The app didn’t communicate itself how you should play with it or what the context was — we needed to make the concept of it being a dance-creation and -sequencing app stronger.

In September 2015 we had a bit of a reboot, updating our vision of what the experience of using the app should be like. We decided that we should focus on the humor. We also wanted it to have more of a homemade feel — not too professional or too glittery, and certainly not like American Idol.

For this we found inspiration in the work of Michel Gondry, especially his music video for Daft Punk's Around The World (below).

To give as stronger idea of the 'purpose' of the app, we also added a backstory. A club had opened up in town where dance performances were happening in school or community-type building.

To reduce confusion about how you use the app, we decided to have a more of a linear flow instead of being able to do everything at once. We divided the experience up into separate rooms, where each room would have its own focus:

  • Room 1/Posters: Select characters
  • Room 2/Costume closet: Style characters
  • Room 3/Practice room: Choreograph the moves
  • Room 4/Stage: Choose effects, perform and record video

I was a bit hesitant to introduce the linear flow because – compared to the previous version – it felt a bit slower to move between the rooms and change characters. But the more we worked with it, the more it became clear that it's an easy way for each specific room to communicate how you would use that room.

After realising this, I became happy with the linear flow and I hope that, in the end, we figured out the best way to make this experience more understandable and tangible for kids.

Other changes we made to the app as we developed and tested it included:

Synchronised dancing: Instead having all the dancers doing different dances, they all would dance the same dance. This eventually led us to having an instructor as an additional character and all of the main characters mimicking the instructor.

Horizontal movements: We introduced horizontal movements so you could then move the characters sideways. But to be able to do that, we compromised on the ability to move the feet around. Down the line we’ll see if we can make a combination of controlling the feet and doing horizontal movements.

Reworked GUI: We reworked the GUI, especially on thestage. There, instead of touching the characters, you control the effects.

Wardrobe: All characters can wear the same clothes if you decide to put them on over their original clothing. I think that was a good suggestion from the team for how to make the characters customizable in a quick way, instead of modeling all the different clothing. We were able to create a lot of assets that all the characters can use instead of being forced to limit the amount of outfits. That was an important decision, as it allowed us to add many customisation possibilities without taking too much time to for the user to apply.

Character design for Toca Dance

For Toca Dance, we collaborated with Swedish graffiti artist Finsta and composer Håkan Lidbo. Finsta was a part of creating the look and feel of the app by designing the logo, the backdrops and the character posters.

One important aspect of why these characters look like they do is that we decided that they should all have a strong silhouette so you could identify them without even seeing the colors. That explains some of why we have very particular head shapes or hairdos for these characters. We’ll add more characters in future updates.

Håkan Lidbo composed all the songs for the app. What is great is that the songs all have the same tempo, so if you switch songs your dance still works. The album covers were designed by our very own Toca Boca artists, and there are more songs to come during the spring.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...