Unmask the corrupt

How UK property launders the wealth of the global corrupt



umtc_home

Transparency International is an organisation looking to end corruption in government, business and civil society around the world. The UK chapter of TI wanted to create a site to support their campaign and help raise awareness of money laundering through high-end property and the negative effects of the activity both in the UK and abroad.

The job of the site was quite simple – tell people that money laundering is happening here on our doorstep, and show them how they can do something about it. Distilling the potentially complicated process of money laundering, through property, down into a succinct and engaging ‘story’ was the challenge. We set out to create a visually engaging and interactive site that had the appropriate level of detail so as to whet the appetite of users, but not get bogged down in detail and cloud the bigger picture.

The core concept was that users could ‘follow the money’ seeing how money from abroad was siphoned off and ‘cleaned’ through offshore havens before being passed along the chain and eventually ‘invested’ in high-value property.

An interactive map and graphic were also created to demonstrate the hot-spots in the capital where foreign money was focused. The site featured a strong call to action for users to sign the petition and donate to the cause as well as a ‘further reading’ section where they could learn more about the ways money is laundered and download the report published as part of the campaign.

umtc_intro

umtc_infographic

Animation and parallax effects used on the site were made possible by the awesome Skrollr plugin meaning complicated animation could be easily controlled by the user’s own scrolling action. ‘Scroll-jacking’ gets a bit of a bashing in some circles because it interferes with the user interaction conventions but like everything, it has to be considered in context and interaction was a key part to this project so we think it has a place and adds value.

The biggest challenge with this site was ensuring that the design and messaging hierarchy was kept intact regardless of the device. It was important that the message we were delivering would always be clear and easily digested, so a baseline measure of success was if someone could briefly skim through whilst on a bus on their way to work and still get a good understanding – it was performing well.

Page size was also an issue because of our baseline scenario. Knowing that the site would be shared via social media we knew it would be consumed by people on the go. Keeping the size down but still having a visually rich design lead us to using SVGs heavily throughout. Because Skrollr can access individual elements within an SVG we had great control over the animation whilst keeping the markup clean. For example, the buildings fading away as the paper plane flies overhead could have been created with multiple graphics but with a single inline SVG and Skrollr, we avoided many lines of CSS with absolute positioned elements.

Similarly, the interactive map and infographics utilise SVGs pulled in via AJAX with some very simple JQuery sprinkled on at the end for good measure.

visit site