Transparency Matters

The importance of transparency in the fight against corruption #TransparencyMatters


Transparency International UK approached us with a brief to design and build a microsite that could communicate what lobbying is, and which groups and organisations are responsible for lobbying the Government in the UK.

Interactive infographics would help bring to life the data collected by the TI UK team and the messaging was carefully crafted to explain simply, why lobbying (though not all the time) can have a negative influence on the Government.

We would also invite the public for submissions asking why #TransparencyMatters to them – letting us show real-world examples why this isn’t just something that stops with the Government and business – and that the effects of lobbying are felt by us all on a daily basis.

tm_info1 tm_info2

With the key infographics we show how a large proportion of meetings with Government Ministers involved corporations, later on listing which companies and organisations are responsible for the majority of meetings over a set period of time. Finally showing how each part of the UK is taking key steps towards controlling or exposing lobbying.

Whilst this project was taking on a very large subject, impossible to cover entirely with one microsite, we feel we struck a successful balance of top-line messaging and detail through good design and interactivity.

Practical and useful interactive graphics are more than just a fancy illustration. For the #TransparencyMatters project the infographics are created and exported as SVGs, from then on we’re able to animate their constituent parts and attach interactivity to them.

There’s lots of advantages to using SVG, the vector format means generally file size is kept down and the quality of the graphic remains high regardless of the resolution of the user’s screen – everything looks super-sharp on those fancy Apple retina screens!

However, the most exciting thing about SVG is that the format allows us to access and amend some or all of the graphic either on the server – allowing dynamic updates of text, numbers for instance – or in the users’ browser, as animation or interaction.

Once the graphic is saved out as an SVG, generally it’s then embedded, or rendered as part of the page meaning it’s accessible as part of the DOM like any other HTML element. Basic animation, fades in or out, hover effects can then be handled by Javascript (even more simply with JQuery), or an SVG animation library like Snap.svg can be sued for more complex animation or interaction.

Nowadays, there’s seldom a project goes by where we don’t use SVG in some way or another 😉

Visit site