Over the twelve-plus years we have worked with Mattel, localization of their product sites for international markets has become second nature to us. We’ve helped present brands like Barbie®, Hot Wheels®, Monster High®, Ever After High™, Polly Pocket™, and BOOMco™ to a world audience. Kicking off the start of the 2015 spring season, we dove into the mindset of their target audience, and started developing HTML5 and mobile-friendly games for site users to enjoy.
The Challenge (AKA The Problem)
Designing interactive games around the Polly Pocket™ brand that captivated girls aged 4-6 was the challenge. Through organization and coordination with the design team, we were able to develop graphics and game play logic that would not only be responsive, but also intuitive enough for young children to grasp and appreciate. Through the use of Trello Task Management Board, a group of three developers were able to simplistically compile their notes, and swiftly manage individual tasks. With all of the game’s assets requiring planning prior to implementation, thorough organization was imperative and essential for the success of the launch.
Initial Steps: Designing a Modern, Responsive Game
When designing and developing games to support an already-established brand, it is imperative to stick to a style guide, to ensure similar color schemes, and an overall corresponding premise. In a suite of mini-games including; “Spice’s Pet Party”, “Crazy Candy Carnival”, and “Glitterizer”, users are able to immerse themselves in interactive videos, content, and characters that capture the Polly Pocket™ brand image. While each of the games had it’s own set of challenges, collaboration between developers and project stakeholders allowed the issues to be addressed upfront and in a timely manner.
To be able to create scenes throughout the games in a simpler way, the team created a template that consisted of an inner and outer box that allowed a place for artwork to be placed. It represented the boundary of where graphics would be seen on both desktop and mobile devices. We also discovered that tiling the background, rather than using one large image, made adding graphics to the games more efficient. Occasionally one of the game’s assets, such as the bounce castle, had to be broken down into individual parts and then layered proportionally, in order to achieve the desired animation effect (balloon movement from side-to-side and diminishing in foreground and background).
We used a pre-existing game engine called Phaser which provides a platform for the development of HTML5/mobile games. We then specified a gridded area to use for the production of illustration assets shown below.
Sketching and Bringing Assets to Life
Establishing a finalized drawing, and eventual image, of people or inanimate objects takes time, and of course, multiple sketches. So, sketch is what did. The first step in any drawing is obvious, you must first put a pencil to paper, with the hope of forming a rough image, at best. The pencil-scribbled game assets eventually become more refined to the point we used tracing paper to transfer the finalized images into the software.
 |
 |
Adding Color and Light
Once in the software, it was time for refinement, color and light. With the help of Adobe Illustrator, we added lines and primary shapes to the scanned images. The Gradient Mesh and Pen tools became our best of friends and gave us the power of styling to ensure brand consistency. When it came time to bring the images to life, we used Photoshop Timeline panel to turn various poses into sprite animations.
 |
 |
 |
 |
What We’ve Learned
This took more time that we thought it would! But, it was well worth it when we reached the final product. Also, it is imperative to have strong communication between designer, animator and developer to ensure what was imagined becomes a reality. Check out the results here.