The Co-operative Revolution

The Co-operative Revolution is a graphic novel – published by the Co-operative – to celebrate the history of the Co-operative movement that began in east Lancashire in 1844.

In collaboration with Rapp UK, and Illustrator Polyp, my role on this project was to produce a digital version of the novel, to be featured on the Co-operative website.

Business Gateway Pre-roll

This non-interactive advertising piece was produced for Business Gateway in December 2012 and featured as a pre-roll commercial on 4od and other video on demand platforms.

Working with creative agency Whitespace, illustrator Johanna Basford, and photographer Jakub Iwanicki, my role was to ‘stitch’ together the time-lapsed footage and create the animated elements of the piece.

Bank Of Dave

This one page website tells the story of Bank of Dave, a Burnley businessman’s effort to set up his own financial institution.

Commissioned by Channel 4, the site was built to promote the documentary of the same name, aired in July 2012.

The website is a one-page scrolling site, navigable via mouse wheel and arrow keys.

It was made in collaboration with Whitespace Edinburgh.

Great Scots

This game was commissioned by Scotland.org, to be featured on their website as part of Scotland Week 2012.

Great Scots is a fun game that gives players a chance to test their knowledge of famous Scottish inventors.

Collaborating with Edinburgh agency Whitespace, my role was to carry out the build phase of the game, which included a variety of interactive programming and animation tasks.

The game was implemented using Adobe Flash.

Javascript Rich Media Widgets

As part of their forward thinking web strategy, the NHS commissioned these interactive widgets to replace Flash based versions which were now starting to show their age.

In collaboration with Antbits, I produced these non-Flash versions of the widgets, using HTML, XML, CSS, Javascript and jQuery, designed to be viewable on the increasing number of devices which cannot view Flash content.

Flash widgets for the web have a natural (and well established) workflow, which enable them to be built and embedded by a designer, independent from the web page around them.

This presented a new challenge, as we had to establish a similarly natural way to embed Javascript widgets which allow them to be deployed and updated quickly (separate from the often long lead times that can be required for “everyday” web development tasks).

The widgets have now been built in such a way that they can be “embedded” anywhere on a page using just a few lines of code, similar to the way we would embed Flash content.

They can be reused and customised using parameters, all from the same codebase.
NHS were extremely pleased with their first ever rich media web content to be built with web standards, and are planning to commission several more in the future.

Online Drinks Checker

A follow up to the Supermeals Recipe planner, this web app was commissioned by NHS Change4Life as part of a nation-wide campaign to encourage more responsible drinking habits.

As with the Supermeals application, this was created in collaboration with Essex-based agency Antbits, and I was responsible for development of the application’s rich user interface, and integration with server-side functionality.

The app provides an easy way to enter alcohol consumption, returning information about units consumed, the calorie content of the drinks, and the money the user could be saving.

Based on this information, the app offers health tips that are tailored to the consumption habits of the user, and lets them email this advice to their own address or that of a friend.

Supermeals Recipe Planner

This web app was at the forefront of a British NHS nation-wide healthy eating campaign in early 2012. The full campaign was promoted across a range of channels, including TV and national press, and received a high profile launch on New Years Day 2012.

In collaboration with Essex-based agency Antbits, I was responsible for development of the application’s rich user interface, and integration with server-side functionality.

The primary aim of the web app is to simplify meal planning, by automatically suggesting seven days of meals.

For each meal, images, recipes and nutritional values are provided. Meals can be swapped if required.

When the user is happy with their suggestions, they can download all the recipes as a PDF (which also includes a full shopping list).

A secondary function is a recipe finder – the user can search the recipe database, based on meal type, or their own search terms. Again, they can download each recipe as a PDF.

Outcomes

The application was extremely successful, picking up massive user numbers (no doubt helped by the high profile advertising campaign), and providing Antbits with their most successful ever NHS tool.

All this despite scrutiny from certain areas of the national press, criticising the campaign for its “nanny state” connotations.

The Daily Mail were, naturally enough, outraged by the whole thing. They probably helped drive a large percentage of the traffic, though, since they prominently featured a large screenshot of the web app in their coverage. Thanks, The Daily Mail!

Address to a Haggis

This piece was commissioned by Scotland.org, to be featured on their website as part of the 2012 Burns Night celebrations.

A work of user-generated animation, the app gave users a chance to upload their own face and see themselves reciting the famous Robert Burns poem, “Address to a Haggis”.

Working with the Whitespace design team, I was faced* with the task of bringing the storyboard for the poetry sequence to life, as well as the development of the facial upload interface itself.

To add to that, the project had be turned around in little over a week to get the finished piece out in time for the Burns Night celebrations.

The interactive animation was created using Adobe Flash, (currently the only feasible technology with which this kind of functionality can be achieved) making heavy use of the inverse kinematics tools to animated the puppets in the poetry sequence.

A deliberately lo-fi art style was used, which thankfully didn’t require complex lip synching. I decided the best approach for this was to move the mouth dynamically, using code to analyse the sound wave and move the jaw accordingly.

*Pun not intended

Sustainable Business Showreel

Lloyds Supporting UK Business is an online tool from Lloyds Business Banking, providing support and advice to small business and start-up companies.

The client was keen to promote a new sustainability suite on the site, aimed at assisting businesses with their sustainability policy. This showreel demonstrates how easy the tool is use and the benefits it can offer.

Since this is a passive piece, using no interactive elements, it was developed fully using Photoshop and After Effects.

Screenshots were taken from the tool itself and cut up into layers. These layers were imported into After Effects and composited together to simulate the tool’s interaction sequences. It was important to keep the showreel fast moving and interesting to keep the viewer’s interest.

The showreel was well received when it was integrated onto the sustainability website, and was also taken on the road and used as part of the display on several trade show appearances.

Skillball Challenge

Learndirect Scotland were in search of a way to increase their customer engagement and promote their offering to businesses. ”Skillball Challenge” was designed as a way to show the fun to be had while using skill in the workplace.

The game would feature fast-paced, addictive gameplay, tempting players back to try to beat their score and get featured on the high score table.

I worked with a specialised illustrator to design the game interface, and then set about building the project using Flash.

The game required me to build an Actionscript physics engine that would model the tossing and rebounding of the paper balls around the basket. The Flash application also collected player data through a form, using Local Storage to remember players details.

The game was a great success, leaving the client pleased, and seeing great rates of interaction.

Donkeymail

Scottish Hydro Electric is the UK’s largest generator of renewable electricity.

The company wanted to increase their customer engagement, and promote the savings offered by switching to their service. “Donkeymail” was conceived as a fun way to encourage customers to pass on the message to their friends through a customised message, “spoken” by a customisable talking donkey.

My Flash skills were tested on this one, with the project requiring the integration of synthesised speech. Working with a dot net specialist, we sourced and prototyped a voice solution which allowed us to generate audio on-the-fly that was then loaded into Flash when requested.

Flash was also used for the custom avatar interface, and the lip-synching on the talking Donkey.

Donkeymail was a victim of it’s own success – the traffic on the site was so great that at one point the voice server crashed under the weight of requests.

The site was a hit with the client, the customers, as well as our own family and friends.

The cult status was confirmed when it picked up the DADI award, for Best Interactive, Entertainment Website or Campaign.

“Heavy Petal Band”

WTF is this madness?

This is a piece I created for an Edinburgh art event in September 2011.

I used the opportunity to experiment with animation (in particular stop-motion and time-lapse), video editing, and projection mapping.

Projection Mapping – that’s always done on buildings right?

Buildings are commonly used in projection mapping, but the technique can be applied to any objects or spaces.

My set-up was quite simple, projecting onto a wall of frames, with a row of books underneath.

Did you create the images yourself?

All the imagery you see in the pieces was created from my own photography – about 300 photographs per piece.

The photos were taken and then stitched together to create the animated objects. These objects were then manipulated digitally, to be synced with the audio track.

Was there any programming involved?

There was no programming needed for the main part of the piece, but the light projected onto the books below the frames is live sound spectrum data from the audio track.

This data was processed and turned into a visualisation using Flash.

“Landscape With Cranes”

WTF is this madness?

This is a piece I created for an Edinburgh art event in September 2011.

I used the opportunity to experiment with animation (in particular stop-motion and time-lapse), video editing, and projection mapping.

Projection Mapping – that’s always done on buildings right?

Buildings are commonly used in projection mapping, but the technique can be applied to any objects or spaces.

My set-up was quite simple, projecting onto a wall of frames, with a row of books underneath.

Did you create the images yourself?

All the imagery you see in the pieces was created from my own photography – about 300 photographs per piece.

The photos were taken and then stitched together to create the animated objects. These objects were then manipulated digitally, to be synced with the audio track.

Was there any programming involved?

There was no programming needed for the main part of the piece, but the light projected onto the books below the frames is live sound spectrum data from the audio track.

This data was processed and turned into a visualisation using Flash.

“Let’s Get Fizzical”

WTF is this madness?

This is a piece I created for an Edinburgh art event in September 2011.

I used the opportunity to experiment with animation (in particular stop-motion and time-lapse), video editing, and projection mapping.

Projection Mapping – that’s always done on buildings right?

Buildings are commonly used in projection mapping, but the technique can be applied to any objects or spaces.

My set-up was quite simple, projecting onto a wall of frames, with a row of books underneath.

Did you create the images yourself?

All the imagery you see in the pieces was created from my own photography – about 300 photographs per piece.

The photos were taken and then stitched together to create the animated objects. These objects were then manipulated digitally, to be synced with the audio track.

Was there any programming involved?

There was no programming needed for the main part of the piece, but the light projected onto the books below the frames is live sound spectrum data from the audio track.

This data was processed and turned into a visualisation using Flash.