- Carl Frisell
Want to know the the secret recipe for a successful & fun digital toy for kids? Follow us for a behind the scenes look at the making of Toca Pet Doctor!
First, let’s meet the people who will tell us their stories of what is really going on when making an app. We have Chris – Play Designer, Arvid – Artist, Marko – Programmer, Martin – Animator, Christoffer – 3D Artist, Olle – QA, Molly – Project Manager and Teddy – Trailer Ninja.
Ready? Let’s get started!
CHRIS: “I had a clear vision from the start. I knew I wanted to make an app for the youngest ones. After a period with concepts that aimed higher in age and complexity, like Toca Cars and Toca Mini, I missed the challenge in creating something really simple to grasp, yet emotionally engaging. I was the play designer of Toca Doctor back in 2011 which is one of our most appreciated titles for 2-4 year olds. I thought maybe there were some useful insights from Toca Doctor to bring to this new project.”
A concept is only as good as the execution so Chris begins her journey as Play Designer by meeting with Emil who is our Executive Producer. Together they discuss developing the app from the spark of an idea to a full functioning toy ready to play!
CHRIS: “The first state to developing the app is about research and I do this together with Emil. After going through tons and tons of comments in the App Store (yes, all of you leave us fabulous feedback and I read it all) we fell for the idea of relating the new app to the Toca Doctor concept, but to take it one step further. I wanted to emphasize the emotional relationship between the doctor and the patient, to let kids experience the happiness in helping others. For that to happen I needed to add a bit more drama. The patients should really need you! I also wanted to add a way for the kids to reward the patient after they had been treated, something similar to getting a sticker or lollypop after having a vaccination.”
“We get a lot of requests from kids that want to play with animals. So I decided that the app was going to be veterinarian themed. It made perfect sense that the animals should be pets. The next step of the process is to make a flowchart where I can explain my vision of the play experience clearly. This chart may change throughout the process of making the app but in this case it didn’t. Since Toca Pet Doctor was considered to be some kind of follow up to Toca Doctor, there was already a functioning model for what the app was going to be. We didn’t need pre-production approval since the concept was already approved with Toca Doctor.”
“The next step begins by creating a lot of boards. Mood boards and storyboards are important to describe what’s in my mind to the rest of the team. For example, what do I mean by “emotional”? Is the animal human in some way? Is this happening at a doctor’s office, outside in the garden or in someones home? One of my visions was to inspire kids to continue the play off screen. Maybe the stuffed animal penguin you got for your birthday needed some love and care too”
Creating any sort of project needs to be directed from start to finish. With many members of the team working on different tasks all at the same time it’s important to have someone to keep things in order and keep the team motivated.
MOLLY: “Hi! I’m Molly! On the Pet Doctor team I wear the Project Manager hat, but I rather see myself as a coach, supporter and fan club all rolled into one. My most important task is to never make decisions or point direction, but rather to set the framework to make it is easier for the team to do just that. I provide them with tools and motivation since they will always be the ones making the best decisions for the project. My job is to trust in the team at all points, and help them to see what an amazing job they are doing each and every day. I help to motivate and raise the level of ambition in everything that they do.”
With concept, play mechanics and mood boards in hand the story needs an appearance, a smile and a look. For that we went to our pet loving artist, Arvid, who was able to give Toca Pet Doctor some furry faces.
ARVID: “Finally, it’s my turn to tag along! I’m Arvid and I’m the first one to join the team to kick start the artwork and character design based on Chris’ ideas for the concept. I had a good starting point coming from Toca Doctor. I wanted simplicity in the artwork so we could then add more humor to make the characters more personal.”
CHRIS: “While Arvid started on the visual style I got the animal research going. I asked myself what kind of animals were going to be in the app and the answer was simple. I wanted to use pets and animals with pet-potential! So, how did we define a pet? The question we asked ourselves was if a child could have found this poor animal in the backyard and brought it home. If yes then it could tag along and join us in the project.”
CHRIS: “My vision was that the animals were sick or in trouble but a kid saved them and brought them home to help them out. This is not something that you necessarily understand when playing with the app. But I think it helped us when working on the atmosphere in the waiting room. I wanted to create a place for kids to experience the happiness in helping other people or animals. Through playful manners and an over all giggly feeling I wanted to defuse the seriousness of the illnesses and injuries, and yet let the kids feel the moment of being needed.”
If one artist is good, than more is better! Together the Toca Boca artists converged over lunch, paper and graphite to create the pets.
ARVID: “I started sketching five animals and invited the other Artists at Toca Boca for a sketch lunch to get some ideas flowing. It’s very good for inspiration, input and also to use them as in-house references. Why google and research blogs when you have such talented colleagues in the same room?”
“To continue to prepare for the rest of the team to join I started making moodboards which included references to style and certain details that would be able to communicate the visual look of the app. All of this needed to be done to make sure everyone was on the same page, thinking the same and working towards a mutual visual feeling. The level of humor also needed to be balanced with the realistic look of the pets, by making sure they were not humals (= human behaving animals).”
CHRIS: “While the team was ramping up we started to see the vision as a whole. So I began creating the backgrounds stories for the animals. I was asking questions such as, why were they hurt? Where did they come from? It’s important to create depth and a story so that the artist and animator have a clear vision of who these pets are and what happened to them. After completing the first stage of sketching we run it by a small group of young kids. I always need to ask myself; is the product fun enough? To find that answer it’s important to involve kids since they will be the ones playing. One thing we learned was that the kids really enjoyed a mix of animals rather than choosing one as their favorite.”
Before any line of code can be written each aspect of the app needs to be discussed from how the pets will move to what sorts of sounds may be used.
MARKO: “During pre-production we sat down and discussed what the app was supposed to be able to do and how we could make that happen technically. It took us some time to decide on what animation solution we should use and what Martin, our freelance animator who you will meet later on, would feel comfortable working with too. It wasn’t easy since none of the solutions seemed like a perfect fit. Most of them were showing issues with the amount of animations that we had planned and also the amount of animals. But we simply had to decide on something and go with it, so that’s what we did! Boom and it was done. Just in case you are wondering, the choice fell on Sprite-sheets generated in Texture Packer.”
“But the thing I’m most proud of was our texture compression solution, where we packed pieces of the animals into atlases to save space and separated the RGB & Alpha information into separate textures, to allow for transparency even with ETC on Android, plus the benefit of higher visual fidelity on iOS. Decipher that!”
Huh? I mean, yes! So, Arvid, what were you saying about the design? *scratching head*
ARVID: “In pre-production I set the design of the dog to use as a reference to be able to create the look of the rest of the pets. It took some time to get it right but once that was done it all went smoothly. We tried to finish all the stages of the pets; being ill, the treatment, feeding and sleeping, before moving on to the next one. I made three animals a week, including all stages of the animal and whenever one was done I sent it right over to Martin for him to get started on the animations.”
Once the pet has been created an animator has to bring the drawings to life.
MARTIN: “Hi, I’m Martin! I live on the other side of the country so I do all of my communications with the team online. It’s so great to be able to work on projects together even from this great distance. While you may assume that I wake up and wear my robe all day in front of my computer and order pizza, I actually don’t. I go to my office each morning in a space that I share with 11 other people who do similar work. For Toca Pet Doctor I worked on the animations. In this case, animating the pets. We decided to make the pets more animal like at a very early stage, and not add any human-like animations. You may think I went to the zoo to study animal behaviour for this but I didn’t. Everything came from our own minds and fantasies and it developed nicely over time.”
CHRISTOFFER: “I’m Christoffer and I made all the 3D animations in the app, including some 2D too. I mainly created the mini games while Martin took care of the feeding of the animals and the animations in the waiting room. Together, we bring the artwork to life. What was real problematic in Toca Pet Doctor from the start was being able to fit all the animations into the app. For those of you who don’t know animation; imagine a single map and in that map you’ve got to fit all the single frames with every movement of the animals. For 1 second of gameplay there are 25 picture frames and since all the frames where HD (meaning they were very large files) there was not much space for the animations at all. @!$£#? So we had to change that. There was no way around it.”
ARVID: “Some parts of the animations that we originally planned for had to be removed as we couldn’t fit it all into the app. We had to focus on getting important details animated instead.”
CHRIS: “When in production we have to make sure the app is small enough to download without WiFi, not too slow, and supporting all the devices that we aim to reach. That’s the basics. But it’s also important to make sure that all graphics look great on all screens, the interface is behaving as expected, and that it doesn’t take too long to load each activity, all while making sure that the aesthetic vision and experience is tip top. That’s the Toca Boca quality!”
Once the pets were beginning to get animated and the game starts to become playable, it’s important to allow fellow Toca Boca colleagues and kids to test the app. Enter TestFlight & kids testing.
MARKO: “Testflight is a platform where everyone in the team can try out what we’ve done and to see how far we’ve come. We had a lot of small changes that needed to be done after the first tests on our Testflight builds, such as tweaking the responsiveness of feeding the animals.”
ARVID: “We waited with the first kids test until we were quite far into production – we usually do this right away but not this time. As the interaction design was inspired by Toca Doctor the principles had already been tested. We also wanted to test a large amount of animals – we felt that this would be the strength of the app. Luckily, we were right! The kids liked the animals as a group rather than choosing a favorite or just playing with one”.
CHRIS: “I hand drew sketches of all treatment scenes, starting with five, to try out those concepts and assure us that we were on the right path. We also added dummy sounds to get the app prepared for sound design from the start. Testing the first version of the prototype always makes me a bit nervous. We’ve actually scraped projects at this state, simply because they weren’t fun enough! However, this went great. We visited a class of preschoolers, 3-5 years old, to see if our interaction design was working and what needed to be changed. We went through this phase quite a few times just to get everything perfect! Every time we made an adjustment we had to test it.”
CHRISTOFFER: “I always learn something from the kids testing. This time I had some trouble with the animation of the fleas in the dog’s mini games. It wasn’t clear enough what the kids were going to do so we decided to add a buzz to the flea jar. It definitely did the trick!”
CHRIS: “I was thinking a lot about the interaction design for this app. As it’s aimed towards younger kids I was trying to find the perfect balance between the simple and more challenging levels of interaction. At first I had the two-year-olds in mind way too much. The behaviour principales I’d set up for the app almost made the tasks self-complete. After testing with kids and realizing that, I decided on a few changes that led to a much more satisfying experience for all of the target group. Early kids testing FTW!”
An app without sound would be like a movie without a soundtrack, which is simply unheard of.
CHRIS: “We worked together with a company called Plan 8 to create music and sound effects for the app. Imagine a totally silent app. Not very fun at all! I collected references for the music and
tried to explain what feelings it was supposed to evoke for the user. I imagined something that could help enhance the personalities of the clumsy but funny yet gloomy animals in the waiting room. And when treating an animal the music should turn to something more active and upbeat to get you busy with the important task. I think the tunes we use do their job really well!”
MARKO: “When sounds got produced it was up to me to put them it in where they’re supposed to be in the app.”
When deadlines are met and milestones are achieved what’s next for an app before launch? The fine tuning of course! Or what we call luxury time!
CHRIS: “The whole production process went smooth and we did actually end up having some time left at the very end of production to use. We call this the luxurious-detail-time.”
ARVID: “So with that time we decided to make the flies flying around in the room when feeding certain pets. You’ve got to catch them before giving them to the pets. Also, the clock in the waiting room is accurate and the pets fall asleep when the treatment is completed. These are all details we added on the end which gives the app more depth.”
MARKO: “When all the art is done and the concept is set everyone moves on to new projects, but it’s the programmer that is left, sweating and finalizing every last detail. Sort of like a builder, I place bricks over every hole and weld together every piece that could possibly be an issue for the app. If I were a Toca Builder I’d be Vex the Jumper! To give you an idea of the sorts of things that need to be addressed, we had a problem when the Toca News stamp froze on the screen (that little box on the bottom right hand of the title screen), and this simple thing took me an hour to solve. Also, we had a bug where taping back and forth to and from the ‘For Parents’ text wasn’t working which took me a full day to figure out. It was a pretty long day.”
Our programmers do a great job building the apps, however there are always little bugs that can cause an app crash or not act in the way we want them to so we have to find those issues. It’s sort of a dream job because you need to essentially break the app in any way that you can.
OLLE: “My job is to play as much and as many Toca Boca apps as I possibly can. Play, play, play! I’m actually trying to find bugs & other things that may not be working correctly in the app. Oh, yes. It’s a job! All together I’ve been playing with Toca Pet Doctor everyday for a week. I must say, I know the animals pretty well by now.”
OLLE: “As my job literally depends on finding faulty things, I have a few fun tricks I use, specially used for Pet Doctor. When you’re QA testing you’ve got to come up with weird things that someone may do when playing the app, like throwing food at the pet trying to get it to catch every single piece. I’ve played with them using all my fingers on the screen to see if the app went totally bananas. Something even more weird that I did was trying to hide the fly underneath all the seeds when feeding the pigeon, but somehow it always made it’s way through! Perfectly healthy stubborn fly.”
As we leave the programmer sweating the small details and QA to find every tiny hole we need to create an identity to the app in the form of an app icon and everyones favorite, the intro animation.
ARVID: “Emil and I discussed the icon and promotional art. We brainstormed a lot of ideas and ended up with a few different suggestions for the icon. We tried the canary bird, but felt it wasn’t clear enough. It needed to show a bandage, cast or something similar to represent what the app is all about; hurt, sick and sad animals. On the other hand we wanted to show the positive side of the app, a jolly but hurt pet. This made us think of the rabbit as the perfect face for the icon. It’s very plain yet delivers a clear message with its happy face and green bandage. It’s also white – the color of the hospital. We had a winner.”
Are you one of the people who simply can’t stop watching our intro animations? If so, this part is for you:
CHRISTOFFER: “I worked together with our artists Matilda and Arvid and we all helped on deciding what’s funny and what’s related to the app and brand. We came up with a whole lot of different ideas for Toca Pet Doctor and narrowed them down to two. The first one was a jumping frog who hits its head in the ceiling but the ladybug that’s running up the walls and falling on its back won our votes. Someone said they thought it was a turtle but it’s not it’s a little ladybug.”
So the app is done, the intro animation is perfect and the team is ready to submit the app. Thankfully we have a fearless leader who knows what the team really needs to get the final job done.
MOLLY: “When we get closer to the actual project deadline, no matter how well we have planned our process, things always get a bit hectic. But I must say, I like the last hours of crunch time since it brings the team closer in a special way by everyone putting in the extra work needed to get everything done. During this period it is of course my job to keep the sugar levels up, as is the case with Pet Doctor, bringing the whole team the Swedish pastry ”Semla”. It’s the best way to get the energy needed to get through our last round of QA on a late Tuesday night. And as you can tell by the end result, Semla-bringing is an excellent motivational method :)”
With each launch we create a new trailer so that we can share with all of our fans what cool new toy we’ve been working on. It’s a great way to get everyone excited for launch!
ARVID: “The intro to the trailer was made by myself, our art director Teddy and Christoffer. It felt natural to show the story behind the rabbit as we had decided to use it for the icon as well. I thought showing how it ended up at the pet doctor in the first place would be a great fit.”
CHRISTOFFER: “We continued to brainstorm and discuss and together we came to the conclusion that the rabbit was doing a great job as the face of the app.”
TEDDY: “All of us pictured the rabbit living in a nice environment in a colorful and vibrant backyard. Quite idyllic and clean, green and lush. Arvid began to sketch the garden and it turned out to be great so he created an animatic in flash to guide Christoffer when making animations.”
CHRISTOFFER: “When that was all completed we sent it off to our music guys at Plan 8 with a description so they would be able to add the sound we wanted.”
TEDDY: “The rest of the trailer, with gameplay footage was made by me. I started by recording the iPad screen while playing every little bit of the app. There was a lot of testing and pieces that need to be put together to show the versatility of the app. I chose scenes that were easy to understand without the need for too much context. I worked a lot with the movements of the iPads and I even wrote a script to get a better feeling for the depth in the scene.”
CHRISTOFFER: “There were some last minute changes to the trailer as well. Wherever you work, whatever you do I bet there are always last minute changes. Well the same goes for us. It was no big deal though, we managed. We always do!”
TEDDY: “I remember the day of the announcement. It was Friday night and I exported the trailer four times. You know the feeling when you think you’re done but then you find more and more things you want to change? There were some annoying motion blurs and a weird black line to the frame… I was done around 7:30 in the evening and uploaded it straight onto Youtube for all of you to watch. It’s always a good feeling to show you something that I’m completely satisfied with. Hope you enjoyed it!”
And there you have it! What starts as an idea, turns into a concept, which morphs into a story, and becomes a brand new world full of fun! Each piece of the puzzle is just as important as the next and only when we work together can we create the digital toys that you all know and love. And while it is a job, it’s one that we get to share with great friends who are creative and imaginative.
A big THANK YOU to the Toca Pet Doctor team for allowing us to follow the journey from idea to digital toy. I wonder what fun new world they are dreaming up now….
You’ll just have to wait and see!