At the cusp of what was being dubbed the ‘once-in-a-lifetime election’, we were invited to work on a pretty complex and interesting project by our good mates at Deryn Consulting.
We were asked to create a digital tool ‘the Deryn Seat Projector’ that would allow voters to see how opinion polls can be used to predict which seats may change hands at the General Election.
With the general election around the corner, here is how we tackled creating it in under 2 weeks.
We were given some complex data by Deryn, which contained the results of the 2017 election, this would form the baseline of the predictions. The results contained the vote share percentage for each party for the 40 welsh constituencies. From this, we could calculate which party won the seat for the constituency and how many seats each party won.
By applying the universal national swing we were able to predict how many seats could change hands. The tool allows you to enter your predicted results for each party. This prediction, when deducted from the 2017 baseline, calculates the swing for each party.
The next step was to add the swing to the original results for each party within its constituency. This then allows us to predict the outcome. From this result, we were then able to calculate which party won the seat for each constituency and how many seats each party won.
In order to test out the maths we first started by building a basic prototype which would allow users to input data via a form and present the results in a table format…..
Testing the results from the most recent poll in November, we knew math was correct. From here, we moved onto the design and front end build for the Deryn Seat Projector.
Our aim when designing the Deryn Seat Projector was to create a simple, streamlined user experience. Our main goal was creating a way of visualising which Welsh seats could swing in the upcoming general election. One of the core challenges was creating a way for people to enter the data that felt intuitive. After a few iterations here is the approach we decided on…
Deryn’s atheistic is minimal, with soft & modern colours. As soon as we heard “the more white space the better” we were naturally excited. When researching other political tools we noticed some consistent themes. The majority of them felt excel-like with HTML tables straight out of 2003. Even those familiar with politics struggled to understand and use these tools effectively. The key when designing tools such as this was striking a balance between the visual/interactive elements and the core data.
The front end of the Dery Seat Projector is powered largely by jQuery. This works by loading an initial set of data; the 2017 General Election results for Wales, into the browser upon page load. This initial data set is run through a JS function which looks at each of the 40 parliamentary constituencies in Wales. From there, it identifies the winning party for each and updates two SVGs accordingly.
Each seat on the Senedd graphic is also linked to the constituency map during this process; with each dot representing a specific constituency in Wales.
Finally, both graphics are updated with data attributes that store a breakdown of the vote share that each party received. This data is used to render tooltips that are generated when hovering over (or tapping, in the case of mobile) either a seat or constituency.
The fact that we link the constituencies between the two graphics allows us to create a hover-state which highlights the selected constituency on both graphics simultaneously.
Whilst it wasn’t a requirement for this project to be responsive, we wanted to ensure great user experience for all, no matter the device being used.
Scaling the seat predictor’s UI to mobile was one challenge we faced. Limited screen space meant that both the graphics and the sidebar would lack context when displayed by themselves.
In order to address this, we needed to modify the user-journey on mobile. The solution was to add in the introductory copy and briefly hide the sliders when a user visits the projector for the first time. These changes made the user experience on mobile more effective.
Check out the Seat Predictor.
You are seeing this because you are using a browser that is not supported. The Blue Stag website is built using modern technology and standards. We recommend upgrading your browser with one of the following to properly view our website:Windows
Please note that this is not an exhaustive list of browsers. We also do not intend to recommend a particular manufacturer's browser over another's; only to suggest upgrading to a browser version that is compliant with current standards to give you the best and most secure browsing experience.
There’s a rustle in the Welsh woods that has been whispered about for generations. They believe it to be Blue. They say it’s not sasquatch, but Stag. All that’s been spotted is the odd antler in the overgrowth or hoofprint on the forest floor.
We’ve taken matters into our own hands and set up a series of cameras to try and locate Seb the Stag for ourselves. Brave visitor, can you help us in our quest to unravel the mystery and marvel at the myth?Launch forest cam