Paddlepop Dinoterra

Paddlepop Dinoterra - Responsive screensPaddlepop is a milk-based frozen dairy snack made by Streets and sold in Asia and Australia by Unilever. Popular with ages from 8-12, the brand’s digital campaign in 2012 laid the groundwork for cross-channel storytelling, using an entertainment portal filled with an online gaming league and cartoon episodes to extend engagement. The idea this year was to build on that – dialling up immersion in the online platform games and improving cohesion in the gaming league with each game release.

Taking reference from this year’s animated stories’ theme, Dinoterra, players were now able to collect virtual dinosaur pets for competing in dinosaur-themed games. They were also able to use currency collected in each game to purchase pet accessories. These accessories enhanced their pets’ abilities, giving them the edge they needed to stay competitive in the league.

Challenges

While developing the art direction for the portal and its games’ interfaces, the main challenge was maintaining a balance between an interface design that was stimulating for kids that age and making it easy to read/scan – Bright vivid colours vs.eye fatigue? Skeuomorphic vs simple interfaces? Single vs. cluttered focus? Here are the screens.

Paddlepop Dinoterra home screen

UI for homepage.

Dino Park

UI for the virtual pet store.

Dino pets info details page

UI for the virtual pet’s attributes.

Dialog screens

UI for dialog boxes.

Game selection screens

UI for game selection screens.

Landing screens for all 3 games

Landing screens for all 3 games.

Game selection screen for the tablet

Game selection screen for the tablet.

Dino Selection screen for the games

UI for character selection screen in the games.

Game UIs

UI for dialog boxes in games.

As the lighting and shadows were common in the designs, which meant lots of transparency, lesser grids and higher file sizes, it was necessary to ensure that the final product, optimized, closely matched the visual mockups. A design-to-development guide was created to minimize assumptions and effort made by developers, and to reduce development time.