One of the joys of working at the Guardian is that playfulness is very much “on brand” – so we wanted to approach election results with that same attitude.
Election results pages tend to follow a strict template: maps up top, with a few more explanatory flourishes below. They’re also very ubiquitous – even appearing on Google itself – which makes it hard to differentiate your offering. But we wondered: is there another way we can make results pages more engaging?
During an early brainstorming session for elections, we (the Guardian US interactive team) batted around several ideas, but one idea, thrown out half in jest, really got us excited: what if we could convey the drama of results nights by having avatars of the candidates run out onto the screen and literally claim their territory by coloring in counties and states as they won them?
At the end of the day, people come to news organizations’ elections results pages for just that: results, so clarity was of the highest import. But this idea would allow us to add greater dynamism to our pages, which we hoped would draw in folks who may otherwise not be very interested in the political process. Having the little animated avatars also reinforced an identification of candidates, which was useful in a then-crowded Republican field. (And it also gave super-supporters little mascots to root for!)
Our major concern was that this approach might be viewed as too flippant – or that the animation might obscure the actual information being provided (i.e. the results). But user testing an early prototype allayed our concerns. In fact, testers found the visualization made more sense, because they could see counties coming in one-by-one as candidates “claimed” them. Our testers also reported being much more engaged with the page, which was heartening.
Of course, executing this idea was more difficult than that first brainstorm suggested.
For one thing, it’s really, really hard to do good animations of characters walking, especially when they have to move up and down as well as left and right, and stop in arbitrary locations. Given the time constraint this felt like a fatal flaw in our plan, until the video of Donald Trump riding down an escalator to announce his candidacy reminded us that they didn’t need to walk. The idea quickly evolved to candidates riding around on a scissor lift (we originally wanted to do a cherry picker, but a scissor lift poses fewer mathematical challenges). Coloring in with a crayon gave way to spray-painting, both because it’s easier to implement in a way that looks natural, and because it reminds you of rival graffiti artists tagging their territory.
The pixel artwork really sealed the deal. People loved our little avatars – even Ted Cruz, who is generally not loved. Some candidates were much harder to draw than others (as you might imagine, Donald Trump has more distinguishing features than John Kasich), so we used campaign logos on the scissor lifts to eliminate any ambiguity.
The animations are implemented as a filmstrip of ten frames per candidate, each representing a particular state (idle/talking/excited/painting etc). The app selects the right frame and paints it to a canvas for each turn of the animation loop. We also generated a list of phrases for each candidate, taken from the debates and campaign speeches, which added an extra level of personality – plus a few in-jokes for people who have been paying close attention to the campaigns.
There were some fun but hairy technical challenges. For example, making the motion of the scissor lift look natural meant building a mini physics engine that understood concepts like coefficient of friction so that we could calculate the stopping distance of a moving vehicle without knowing things like velocity or screen size ahead of time, and which could represent the concept of inertia (so that the scissor lift platform lagged the base slightly, making it seem less rigid). We also had to come up with a performant algorithm that could generate a “plan” for traversing a polygon and filling it in, in a way that didn’t look completely unnatural but which also made sense given the mode of transportation. Attention to details like these is the difference between “neat idea” and delighting people. We take our playfulness very seriously!
It 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.
Riffing on this idea, we matched our delegate tracker to include the same little avatars. The tracker is in some ways very traditional – it’s a table – but is nonetheless innovative in its use of a constant color 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.
