Behind The Times elections dashboard

How the Red Box election dashboard came together in just four weeks

The results page for Witney, David Cameron’s constituency

It’s the first week in April, just a few weeks to go until the 2015 UK General Election. Given that the BBC’s election coverage typically has most bases covered, we already knew we wanted to put together something unique, something different to what had been created for previous elections. We knew there was a wealth of data, writing and imagery we would be able to take advantage of. And, most importantly, we knew we didn’t want to create an interactive map (phew…!).

We put together a shortlist of things we would want from a results night app:

  • See, at all times, the overall results for the country, broken down by party
  • Dig down into the data for individual constituencies
  • Save a small number of constituencies for quick access (most people only care about a few constituencies)
  • See leader constituencies, and those highlighted by the Red Box editorial team
  • A visually interesting and appropriate display of key data points, including the 2010 result, the expected announcement time, plus the candidates running in 2015
  • Relevant writing and photography from the past few months written by The Times, The Sunday Times, and Red Box
  • All of the above should be as accessible on mobile devices, as it would be on desktop
An initial “sketch” of our idea

We did an initial (read: crude) sketch of how we might build the above list, and took the idea to a number of people around the office.

We quickly discovered one feature was missing from our initial list — which ended up being our most crucial feature. The ability for readers to request email notifications for their selected constituencies when the result was announced. These emails would contain a breakdown of that constituencies result by party, a link back to our results dashboard, plus a summary of the overall results as they stood at the time of announcement.


Architecture

Once we had a clear idea of the product we wanted to create, we took some time to figure out how this app would be architectured. We wanted to keep all aspects of the app modular, separating our concerns were possible into the following:

  • An AngularJS frontend, taking feeds of data from various sources.
  • A Node.js app — open sourced at https://github.com/times/PA-election-feed-server — to process live data from Press Association into a JSON readable format.
  • A Laravel backend, supplying any ‘meta data’ for constituencies, such as photography and articles from the past few months. This app uses Sir Trevor JS with some custom blocks for articles and images, exposing JSON for the frontend to read from.
  • A second Laravel app to handle email notification signups, automatically sending them when results were announced.
  • A forked version of datanews/minimaps to produce stylised PNG minimaps for all Westminster Parliamentary Constituencies.

Our team of three developers, myself, Ændrew and Callum each took different components to build from the list above. Our biggest priority was stability, knowing this app and its associated components would get a high number of concurrent users, we made sure the infrastructure existed behind each to ensure we didn’t suffer any downtime. Each component was either load balanced with ElasticBeanstalk, or served its content from a statically hosted S3 bucket. Our email notification app integrated with Amazon’s Simple Email Service, which gave us a great deal of control over managing our emails.

Having taken the first stint of development on the app’s frontend, I put together a simple interactive wireframe in a few hours, using Bootstrap. This turned out to be incredibly useful, not only to help editorial lead Joseph get early approval from editorial staff, but also helped our designer — Esa — hit the ground running as a strong framework for the idea was already in place. Esa was invaluable, helping us refine many of the complex navigation and presentation aspects of the app.

Our first interactive wireframe, we used this to help our design process, and to get it signed off by senior editorial staff as early as possible

As with most of our AngularJS projects, the project started as a generator-angular project via Yeoman (although of late we’re moving towards generator-gulp-angular, because we love gulp.js). The frontend is mobile-first, and where possible, we used CSS transitions to add final touches to interactions and navigation. We wanted to make the app feel as close to a native app as possible, taking advantage of many of the features of HTML5. For example, we used localstorage for a number of features within the app, including saving.

Our initial builds were often slow to load on 3G connections due to the sheer amount of information we were loading. The Chrome Developer Tools’ Network tab helped us identify any bottlenecks, which we were able to quickly resolve.

Our mobile design (left) and desktop design (right)

‘Announced’ labels indicating when results had been announced for each constituencies

Results Night

When it came to results night, none of our apps suffered any down time, all working perfectly in unison. We were able to take the time to add additional functionality, including an indicator to help our readers find constituencies that had been announced.

The dashboard also allowed our Social and Community team to use the automatically generated charts and graphs on social media.


Taking stock

With such a small team and short timeframe, there were, of course, features we did not get to build. We would have loved to make even more of the notification system as we think there is a great deal of value in distributing information in a useful way for events like election results, particularly those that happen overnight. We have looked at services such as Snapchat and WhatsApp as ways to push information via web apps for other projects, rather than using traditional push notifications. Roost is another service we have considered using to send web push notifications for our Safari and Chrome users, something which we have already trialled on the Red Box website.

By the end of the night, almost 100,000 constituencies were viewed, and 7,300 were saved for quick access. We sent over 11,000 notification emails to 58 countries around the world, and over 60% of those emails were read on a mobile device. 75% of those who opened notification emails spent more than 8 seconds reading them. Our most popular constituencies were Thanet South (Nigel Farage) and Sheffield Hallam (Nick Clegg).