May 26, 2011

About the client

We were recently approached by Vector Limited to produce a website promoting their Auckland based Safety in Schools programme in conjunction with the upcoming Walking with Dinosaurs – The Arena Spectacular show.  Vector had already commissioned a character called “Safe T. Rex” who would be the star of the site, reflecting both angles of the promotion.  This project immediately proved to be an exciting one when the brief  handed to Mogul included coming up with a number of concepts for games for the site.

Challenges & solutions

The site needed to provide some sort of fun activity for (mainly) primary school aged children as well as providing a number of methods for capturing user data to facilitate online competitions being run from the site.  While there are only 4 pages on the site, two of them needed to be highly interactive.

The home page

The home page had to be really eye-catching, simple and to-the point.  It also needed to include two separate forms for competitions – one for teachers and another for children and their parents.  Unfortunately from a design point of view these two requirements completely oppose one another!

To assist, we injected a bit of Javascript love via our favourite library, jQuery.  Both web forms are hidden until the user selects which competition they wish to enter, then the relevant form fades in to view.  Once the user submits either form, the data is checked using jQuery based field validation before the forms are both hidden again and three call to action buttons appear to get access to the rest of the site.

From a slightly more technical point of view, we’ve implemented the jQuery Ajax .load() method to pass the validated data from the forms to a mailing script which emails the entrants details directly to Vector.

The game

The Pièce de résistance – and certainly the most dev fun I’ve had in a long time – is the Dress Safe T. Rex in his safety gear game.  This is not the first time we’ve used  jQueryUI to assist with a website GUI, but it’s certainly the most obvious and outside-of-the-square implementation we’ve ever done!

We’ve used jQueryUI elements called draggables and droppables that allow elements of clothing to be dragged and locked into place on a dress-up dino.  As each correct item of clothing is placed on the character, a score card reflects the current correct number of items he’s wearing.  Should one of the more fun (ergo less safe) items be dropped on the dino, a nag message fades in for a few seconds, courtesy once again of jQuery.  Those users paying attention will also the notice the Safety Tips at the bottom of the page change for each successive correct placement.

Once Safe T. Rex is dressed and “Safe from the dangers of electricity”, the user is presented with a form to enter the draw to win a double pass to the show.  This form created it’s own set of issues from a CSS point of view. In an effort to keep pushing the boundaries, the fields use alpha transparency utilising CSS3 based RGBA background colour declaration. Due to a known issue, our flat fallback background colour was ignored by IE7, meaning the fields turned white… with white text.  It took quite some time (and a few screenshots from the client) to see where the issue was.  Submitting the form fires off another jQuery .load() action which writes the data to a CSV file for later use.

Result

This jQuery intensive site has enabled us to provide all of the functionality required by the client and to make it fun for children (at least according to our test users, the Miller and Faulknor-Murrell children).  Perhaps more critical from a development point of view, it’s allowed us to keep to the four original pages without having to worry about generating potentially out-of-context  success landing pages.

It’s certainly been a really fun project to work on.  Any opportunity I get to flex my interactive UI-building muscles is good by me, and I’m certainly looking forward to more development and creative challenges for Mogul in the future.