We were approached by London design agency, Alphabetical Studio, who had received an exciting and challenging brief from their client, BHF.
BHF wanted to bring their kids club character, Artie Beat, to life and enable their members to interact and explore Artie’s world. The brief was to develop an interactive and engaging website and a HTML5 game, which would work across all mobile and desktop devices.
Alphabetical Studio designed the initial concept for the website interface, providing a challenging full screen navigation system. We used HTML5 and CSS3 animations, to create a mobile friendly, yet interactive navigation system, including animated introductions to each of Artie’s friends.
The animations were created in Flash, but exported using the HTML5 animation setting, to enable them to work on all HTML5 enabled devices. Set to loop at random intervals, the animations keep the site dynamic.
The transitions between pages where created to be smooth and quick, using AJAX to load new content without reloading the whole page. Using a carefully structured site, we also ensured the content was all search-engine friendly, to make sure the site is indexed by search engines.
One of the main aspects of the project was to create a HTML5 game, which will work across all devices and bring the Artie world to life, whilst getting a positive, healthy message across to kids.
We explored several ideas around the concept of encouraging kids to be active and spend time outside. We settled on a hide-and-seek game with Artie friends, using an innovative use of the scroll wheel on desktop and swipe on touch devices to navigate Artie around the game searching for friends. We also added a quick drag-n-drop game to show to prepare a health packed-lunch before heading out to play.
We worked with Tom Angell to create the sound track to provide audio clues to help players understand the game concept and bring the world alive.