John Frieda – Bag a Box

Full front-end build (HTML5, CSS3 and JavaScript) - November 2012

Splash screen

Bag a Box was an extremely successful lucky moment Facebook game built as a single-page app with HTML5 and JavaScript (jQuery, JSON for data and Handlebars for templating), which allowed John Frieda's Facebook fans to win one of 20 designer prizes every day.

As sole front-end developer I had a tight deadline to produce a complex, highly interactive and graphical game to showcase John Frieda's Precision Foam Colour product range, as well as the many great prizes available.

Campaign has finished but access to a development site can be granted.

Prize grid

Each day, between 9am and 9pm, 20 prizes were made available. Each prize has a random expiry date. If you've "bagged" a prize when the timer runs out you win that prize. When a user bags a prize they hold it until another user takes it from them. Each user is given 3 credits per day to bag a prize. More credits can be earned by sharing the app with Facebook friends.

Rolling over a John Frieda® product tile in the prize grid triggers the tile to slide across showing the prize underneath. Clicking the prize slides the entire prize grid to the left and the Bag It screen slides in its place.

Bag it screen

The Bag it screen shows more info about the John Frieda® product, the prize, how many people have attempted to bag it and who is holding the product.

Clicking BAG IT triggers the loading state of the button while processing an AJAX request in the background. Once complete the bar animates downwards and informs the user they've bagged the product. This is followed by a short delay before the Bag it confirmation screen slides down over the top of the Bag it screen.

Confirmation screen

This screen confirms that the product has been bagged and gives the user a chance to share it with their Facebook friends. A custom free text search makes it easy to find friends. Note: Unfortunately due to technical constraints the list of friends is missing on this screenshot.

Clicking Close slides the confirmation screen back up, the Bag it screen slides off and the Prize grid slides in again. The tile of the prize that's just been bagged then slides over and changes state to signify the product has been bagged.