DEVICE/PLATFORMS Desktop Computer/Website | TOOLS Photoshop + After Effects + HTML 5 + CSS + JIRA
TEAM Leny Evangelista (Art Director) + Herson Lariosa (Key Designer) + Ray-an Yuson (Animator) + Abraham Våzquez (Senior Developer)
Space the final Froot-tier…
In conjunction with Kellogg’s Canada television commercials promoting their Froot Loops Brand of cereals TotallyHer Canada created a online rich-media game overlay that aligned with the same Space Theme of the 30 second TVCs’ that ran on all their Parenting & Kid’s sites.
What’s in a Game?
Due to the tight turnaround time we used an existing “Catch” game engine and modified to go with the specific gameplay and functionality discussed with internally and with the client. The overall main objective of the game was to catch as many objects in this case “Froot Loops” within a given time period while avoiding obstacles in this case “Meteors/Asteroids” in order not to get penalized in this case “decreased time”.
Static Mocks
Below are the static mocks representing each of the major key frames of the user’s experience.
- 300x250 Ad Unit is where the overlay spawned from. Went with a 300x250 because the majority of the Parents especially the Kid sites have that specific ad slot available.
- Preloader Due to the amount of animation and game elements we created a pre-loader that played while the primary assets loaded in the background.
- Directions Screen to illustrate how to play the game we relied heavily on images and less text considering the attention span of most online users.
- Initial Game Play illustrated the key “general” elements present during the gameplay such as the client branding, timer, scoreboard and sound controls.
- Miss “Hit” Game Play illustrated what occurred when a user hit a obstacle.
- End Screen illustrated what elements appeared once time ran out. We included the user‘s final score, video player that displayed the 30 second TVC along with call to actions to replay the game or go learn more about Kellogg‘s Froot Loop cereal.
