Night & Day Studios is a mobile app company based in Portland, Oregon with over 70 apps produced. Founded in 2008 by Nat Sims and Erin Rackelman, their first app, Peekaboo Barn, was released at the dawn of the App Store. These friendly farm animals have gone on to be played over 50 million times. Their main focus has been children’s educational apps, developing new proprietary content, and also working with licensors to bring many childhood classics to the mobile world for the first time, such as Eric Carle’s The Very Hungry Caterpillar and Richard Scarry’s Busytown. Yummiloo Rainbow Power is a collaborative project between Night & Day and yummico, a new children’s media company. Kate Kiehl from Night & Day Studios tells the story.
Initial meetings between our team at Night & Day Studios and our partners at yummico started in February 2012. It was immediately clear that our two companies were a wonderfully complimentary match. At Night & Day, with over five years of app development under our belts, we have talented creatives and programers who have a wealth of knowledge about development and game concepting. yummico is a new children’s media company with TV and film industry veterans, including Traci Paige Johnson, creator of the beloved, groundbreaking preschool television series Blue’s Clues and co-creator of SuperWhy, and Caroline Baron, award-winning producer of acclaimed feature films, including the Oscar-nominated Capote and Monsoon Wedding. United by the common goal of delivering delightful and educational media with a home-grown aesthetic, the collaborative project of the Yummiloo Rainbow Power app was a natural partnership.
Playing Smart, Eating Smart
An initial pre-production period between Night & Day Creative Director Brianne Baker, Senior Programmer Justin Hawkwood and the yummico team formed the direction the project would take. First and foremost, Yummiloo Rainbow Power was to be focused on nutrition education and the theme of healthy eating for children ages 2-7 with a target focus of 3-5 year-olds. For parents, often getting little ones to eat their fruits and veggies can be nothing short of a miracle. Our hope was that by creating adorable characters known as the Yum Yums and their world of Yummiloo, we would assist in cultivating young, adventurous, healthy eaters.
In designing the Yummiloo Rainbow Power game play, the goal was to provide a fun and engaging experience while also helping kids develop food identification skills and healthy eating habits. The game play was envisioned as follows: after being introduced to the Yum Yums, users would be instructed to gather fruits and vegetables by dragging them into the corresponding colored bucket to help fuel the Rainbow Machine. Children would also be provided with a compost bin for spoiled foods, making room for more fresh foods to grow once the rotten ones are removed. Once all five colored carts were filled with food, the Rainbow Machine would begin to run on full power, unleashing the carnival rides and a Yum Yum party. The celebratory end of the game would reinforce the importance of ‘eating a rainbow,’ educating kids about how eating a mix of bright, vibrant colored foods helps their bodies grow. In addition, the app would encourage fine motor skills development, color recognition, and recognition of different fruits and vegetables.
Jumping the Hurdles
Production began in earnest in June 2012 ,as we embarked on the challenge of bringing the Yum Yums and the world of Yummiloo to life. Given the complexity of what we were aiming to accomplish, we were weary of getting tied into Corona as the language, so we chose to build the app in native iOS. To maximize user experience and the ability to interact with the app, we began development right from the beginning in Xcode. One thing that quickly became clear was that the initial conception of having additional games at the carnival was more ambitious than what was realistic for the scope of the project. Scaling back to a fun animated video celebration at the game’s end allowed us to stay within budget and launch in the time-frame we were aiming for.
The biggest hurdle that our developers overcame was switching back and forth frequently between video and interactive app content. Throughout the course of launching the app and reaching the final carnival celebration, the switches occur over ten times. The most common issues we faced when switching back and forth were the appearance of a black screen, the video speeding up and issues with the coloration not matching between the video files and the images used for interactive play.
We found solutions to each of our issues. To solve the problem of the black screen and rapid video play, the developer started the video play earlier, but essentially made it invisible with a very quick fade in. The issues with color shifts between the compressed video and image files required a different approach. Our lead developer built a simple application in which you could run a test of the compressed video and interactive image file to check the color consistency. After a significant amount of trial and error and manually color shifting individual files, we had developed a formula that worked consistently each time to produce color matches between the two files.
As the development process continued, the complexities of all moving parts with the in app grew as well, namely: the growth and rotting of fruits and vegetables, rain falling, clouds forming and parting, compost, food buckets, and the Rainbow Machine filling, as well as different Yum Yum characters movements. Out of these many layers, Yummiloo Rainbow Power emerged as a beautiful blend of video, programmatic animation, animation utilizing sprite sheets and frame animation.
Learning from Children
As adults designing apps for end users who are much smaller and younger than ourselves, one of the most fascinating aspects of our process is when the time comes to dive into user testing. Upon getting the app into the hands of little ones, several important pieces of feedback emerged. Having the two different play modes (tap vs. drag) made the app accessible to a more broad age range of users. Based upon user testing, it was decided that drag mode would be the default setting, as that fit best with our main target ages’ motor abilities. Including tap mode as an alternate option also allowed younger children to enjoy the game. There was a significant amount of testing conducted to determine the right amount of sound that should be included in the app. With the potential for a great deal of voice over, we approached testing this in an additive fashion where we slowly incorporated more sound layers to see how children reacted. As a result, we were able to see what they understood without instruction, as well as the aspects that benefited from more verbal explanation.
One surprise we encountered when testing beta versions of the app was how kids reacted to the introductory video. Many of them wanted to watch it over and over again — and as a result, we ended up adding a button to the home screen so the video can be played again without restarting the app. Because of the learning element that results from filling the Rainbow Machine and its function as a metaphor for healthy eating, we did not add an option to play the ending carnival video unless the game is played all the way through. As a result, the child’s focus and effort to fill the buckets with each color of fruits and vegetables is rewarded at the end, while also reinforcing the overarching idea of the importance of eating healthy foods from all colors of the rainbow.
Unleash the Yum Yums!
Yummiloo Rainbow Power was submitted to Apple in February 2013 and launched on March 20th, 2013 in celebration of the first day of spring. Within the first day, it was ranked in the top 50 US App Store Education app downloads and was selected by Apple as a New & Noteworthy or Hot Pick for seven consecutive weeks upon launch. The reception from educators, parents, bloggers, and children themselves has been equally positive. The experience of collaborating with the yummico team on this project was an honor and the process of creating the app was a rainbow-filled joy!
Yummiloo Rainbow Power is available on the App Store for iPhone, iPad and iPod Touch. Night & Day Studios has several new app releases planned for this fall.
Comments
