An interactive tool to let anyone take the reins at the Treasury

April 2024
3 min read
by Esa Matinvesi

Being in charge of any nation’s finances is a tough job. And being the UK’s Chancellor is one of those positions where no matter what decisions you make, there are bound to be a lot of criticisms. Fiscal policy decisions have a huge societal impact and are often a complicated balancing act. It’s not exactly a zero sum game.

But what would happen if you did look at it from a ‘game’ perspective? What could someone  learn from being the decision maker themselves? What kind of relationships between different policy decisions could someone uncover?

These were some of the questions we started to ask when the Institute for Fiscal Studies (IFS) and Nesta approached us with a brief to build a tool that would visualise the data behind some of the key financial decisions the UK Chancellor has to make. Needless to say, we were immediately up for the challenge!

To kickstart the project we organised an ‘empathy workshop’: together with IFS and Nesta, we delved into the diverse landscape of potential users and their unique needs, motivations and interactions with the tool in order to design an experience that would be both informative and engaging.

During this exploration, three distinct user personas emerged: people working in media, people in political advisory roles, and people teaching economics. The two former personas in particular play pivotal roles in shaping informed public discourse and policy decisions. 

As a result, we honed our thinking towards these key users, seeking to ensure that the tool aligned with their needs and workflows. Aware that covering every possible policy in one tool would not be realistic for this project, we agreed early on that it was important for users to be able to add their own measures, in addition to the preset policies.

We used the findings of the workshop to iterate wireframe options to pin down the exact features/functions of the tool and its structure. From the start it was clear that it needed to feel quite dashboard-like – not an easy task, particularly when it comes to small mobile screens. In order to make best use of the client’s budget (no pun intended), we researched component and chart libraries that could help us avoid building every element from scratch.

IFS had created a lot of complex formulas and calculations to underpin this tool. We converted their data to code and set up a testing document with their researchers so we could see how things worked: for example, if changing inputs would result in the expected totals and subtotals. These test documents were complex enough, but we knew we were just seeing the tip of the iceberg in terms of the extraordinary efforts of the IFS researchers to build these formulas.

We decided to use React, an open-source front-end JavaScript library, to handle all the interactions between areas of the tool. If a user changes something in one place, React is extremely good in being able to have other areas say “I care about that type of change, tell me when it happens”. That meant, for example, that we could produce live changes to individual charts and the overall ‘deficit bar’, based on users’ actions. We also used the MUI component library to handle these user inputs. This also ensured that we were starting with UX interactions that were heavily tested for functionality, accessibility and performance, giving us a strong foundation to build from.

In terms of high-fidelity design, one of the main points to address was how to create something that worked in conjunction with both IFS’s and Nesta’s existing brand identities yet could give the tool its own look and feel. We opted for a minimal and stripped-back look that puts the content in the foreground and balances complexity and clarity.

Since going live, the tool has generated significant social media buzz, media coverage and uptake within Westminster circles. Given that this is an election year, we’re particularly excited to have played a part in helping the IFS and Nesta develop this important resource for policymakers, journalists and the wider public. If you want to give being Chancellor a shot, head to:  

Interested in finding out more or got a similar project in mind? We’d love to talk. Get in touch at [email protected].

Esa is the Head of web design at Soapbox. He is based in Finland.

Like what you see? Let’s work together

Get in touch