Ukash - Personal Insolvencies

Crushing & Sinking Insolvency is a data visualisation piece developed for Ukash as an in-depth study of thirteen years of insolvency statistics in the UK, and across 174 individual UK locations. It uses a wall as a metaphor to display the crushing rate of insolvency, while also a rising water level to show the amount of new insolvency cases in any given year.

There are a lot of nice subtle touches across the whole piece. The man’s expression changes to panic as the insolvency rate rises, complete with trembling hands on either side! Webkit filters have been used to alter the brightness and contrast of the water video as the level rises.

Getting to implement some HTML5 video into a live project was great, but also brought challenges. Due to the actual video moving up and down on screen to display the different ranges of data, we had to come up with a method of preventing the edges of the video being visible. What you’re seeing is not just an abnormally tall video, but infact a pretty regular aspect ratioed video with a couple of additional elements cleverly placed over the top and bottom edges. These elements use the top and bottommost colours of the video as solid colours fading to zero opacity, and use the same calculation used to move the video, to ensure they always line up correctly.

The piece is fully responsive right down to mobile, and has been tested across a wide range of Android and Apple devices.