Learning through play

Learning through play is essential in how a child can learn to make sense of the world around them. In a world becoming more and more focused on digital mediums, how can this have an impact on the children of the next generation?

THE PROBLEM
Children frequently use digital devices that have been designed for adults. While there are lots of stand-alone experiences, games and content aimed at children, they still live in the platforms designed for us. Google wanted to dramatically improve the educational experience of children that are on these platforms by creating an OS for Kids.

RAPID VALIDATION

Building an OS is no small task. It's made up of lots of independent moments tied together through consistency in the experience and the design. Google came to us with lots of research around one of those independent ideas, an idea they had for a rewards system within the OS. They asked us to spend six sprints building a proof of concept that could be used to validate a hypothesis; Creating a customisable avatar that accompanies the children throughout their experience will help drive engagement.

BUILDING ON THE RESEARCH
Google had spent lots of time researching into what children would find enjoyable in an OS. One thing that consistently tested well was a customisable character that the user could dress up. The idea of the rewards system in the OS was that children would complete tasks such as watching educational videos, reading blog posts about topics that interested them or playing games and this would award them points. These points could then we used to unlock items, digital swag if you will, that their avatar could wear. This avatar would be animated and full of life so that when a user tapped on it, attached a new item of clothing or gave it an item they would get feedback through the movement of the avatar.

PICKING THE RIGHT TECH
We needed to choose the right technology that would allow designers to be the driving force behind the avatar creation and animation while also allowing engineers to work in a way that would scale. We decided to go with Spine, a 2D skeletal game animation software that allowed a designer to create an animation once, and use that to power multiple avatars.

GETTING TO KNOW THE ROPES
As Spine was a brand new tool to me, I needed to learn fast. Being the naturally curious person that I am I played with the tool, figuring out how to use its unintuitive UI, getting to grips with the huge variety of export settings, but eventually, things started to click. I was starting to understand the power of this tool but more importantly how it would fit into the workflow of a team that I wouldn't be part of. The plan after the six sprints we were working on was that we would hand over not just our working files, but also educate an internal team at Google on our ways of working.

THE WORKFLOW
I ended up creating an asset creation workflow that went a little something like this: First, the base of the character would be created in illustrator, this had to be created in all skin tones to be inclusive. Secondly, a collection of clothing was created with a system put in place to ensure that all clothing was of equal size and shape at its base but still allowed for each asset to feel different and unique. Then lastly was the special items that caused our avatar to change its animation state; a jetpack would make it fly, vehicles so it could drive around, hoverboards to glide through on. All of these special objects would require unique animations to bring them to life.

BRINGING IT TO LIFE
Animation in Spine is done by attaching images to bones, then animating the bones. This worked perfectly with our plan for the prototype as we intended to use the attachment feature within Spine to swap the outfit of the avatar with different items and clothing. Animations could be reused for characters that looked different, and this would save us hours in comparison to traditional frame-by-frame animation.

POTATO & HELLO MONDAY
Potato & Google worked with Hello Monday during this project who bought some serious animation chops to the party. My role in this trifecta of teams was to be a bridge between the animators at Hello Monday and the engineering team at Potato. A large part of this was a three-day workshop in New York where 5 animators, the 2 main clients and myself came up with the key animations we were going to create for our avatar. As you can imagine, having a group of creative thinkers in a room can generate a lot of ideas, but my intention for the workshop was to help the team create a system that allowed us to leverage the bone animation features of Spine. Having a core set of key animation that could be used across multiple scenarios would not just create a unified experience, but would also us save time and effort on creating unique animations for special items or situations.

WHAT'S YOUR FAVOURITE COLOUR?

Kids always have a favourite colour. We quickly realised that we would need to create assets in many colours to ensure we didn't miss out a child's favourite. I looked into how we could reuse the PNG assets we were already creating and tint them using code. This would mean that designers would only have to create a single t-shirt, jacket or shoe and be able to place it in any colour in the prototype. I created a UI that would allow users to pick the colour of certain items on their avatar. It came to light that this concept was even tricky for our internal team to understand so I created diagrams and documentation to explain how designers could create assets that allowed them to be tinted any colour.

ITERATION, ITERATION, ITERATION

Each sprint we were entering the uncharted ground. We always led with a hypothesis and continuously tested our prototype with users. This allowed the team to learn rapidly and continuously improve. One learning I had from this process was that the quicker you can get your idea into the hands of a user, the faster you will learn about all the assumptions you have made. Nothing helped me understand what users wanted more than putting my half baked ideas in front of them and asking them to tell me what they thought about it. With this type of project being so new to me, it was invaluable to be able to get feedback directly from users in the early stages of a product idea.

THE RESULT

At the end of the six sprints, we were so much further ahead than the client anticipated at the beginning of the project. We had a fully validated and working prototype living on Google3 which had 14 key animations and a workflow that allowed designers to add new assets to a Spine animation and export in a way that would be pulled through into the prototype. The prototype was sent off for internal dogfooding to furthermore validate the end to end experience and influence where the project would go next.

To see the final implementation of this project go here