Applicant(s)

Size of team/newsroom:large

Categories:

Description

One of the joys of working at the Guardian is that playfulness is very much “on brand.” We knew election results and delegate trackers would be everywhere this year (mostly using the same AP data), but we wondered: how can we provide our readers with a more engaging – and even fun – experience during the 2016 primaries?
For the results pages, we came up with the idea of having little candidate avatars run around, literally claiming their territory by spray-painting over each other's wins per county (see more details in the "innovation" section below). The delegate tracker design evolved out of these early decisions for primary night results, ensuring that our entire suite of election graphics feel as though they belong together. The delegate tracker is also a central hub for all of the results pages, which we grouped by date.
Data source: Associated Press for both election results and delegate counts

What makes this project innovative? What was its impact?

Part of the innovation in this project is within the idea itself; the pixel art candidates drove a wider following and deeper reader engagement than we might have expected with more conventional results. But behind the fun, playful exterior of the results pages lies a serious idea: given that elections are essentially a story about people fighting over territory, can a visual representation of that idea add clarity (as well as drama and humor) to the information we’re presenting? Our user testing (and eventually, reader feedback) demonstrated that it absolutely does.
This was also an opportunity to experiment with new capabilities of the web platform – such as desktop notifications for key updates, allowing readers to keep the results page open in a background tab without missing anything – and innovative approaches to social media. Interactives don’t work on off-platform environments such as Facebook and Twitter, where much of our target audience spend their time. Instead, we co-ordinated with our social team and created a tool for instantly generating purpose-built GIFs that contain useful and timely information, but also entice readers to the live results page with a preview of what they can expect.
Meanwhile, our delegate tracker is in some ways very traditional – it’s a table – but is nonetheless innovative in its use of a constant colour scale, which achieves a high level of information density and readability without hiding the raw numbers. It’s very easy to see at a glance which races had the most significant impact on the overall delegate count, who won each state, and which races were close versus which were landslides – things that are much harder with the more common forms of delegate tracker. It’s also a format that works exceptionally well on mobile.

Technologies used for this project:

The delegate tracker and results pages are both built using Ractive.js, our open source UI library. The delegate tracker also uses parts of D3, and the admin tool for the social team to generate GIFs uses the GIF.js library.
Rendering the pixel art candidates involves a mish-mash of techniques – spritesheets, procedural artwork, multiple layered canvases, CSS transforms synced to a small physics engine and so on. No libraries exist to simplify the process of building something this bespoke in a way that is as performant on mobile as we need it to be, so the rendering logic is hand-rolled. We also devised a combination of algorithms for traversing a shape in a way that looks natural for someone riding a scissor lift.
For results pages, the data comes from the Associated Press, and is updated every 30 seconds. We use a polling mechanism rather than something push-based (e.g. websockets) as it makes it possible to achieve ludicrous scale without having operations staff on hand. We created a node.js application that grabs relevant data from the AP’s elections API, removes unnecessary or duplicated data (to reduce the number of bytes clients are required to download), and syncs it to S3. Similarly, for the delegate tracker, we poll AP data using a node.js app running on EC2.
Desktop notifications are implemented using the HTML Web Notifications API.
The phrases appearing in the candidates’ speech bubbles live in a Google Spreadsheet which is fetched and included in the application when it gets redeployed.