NBC News Elections 2014

Managing deadlines and expectations while pulling off something exciting and new.

From stress to success

In the news industry? Well, let’s just say that election coverage is a Very Big Deal™.

I worked on the midterm and Presidential elections for NBCNews.com from 2006 through 2012, covering historic results and creating engaging presentations with teams of talented folks along the way. In 2014, I noticed that the crew creating our elections site was falling behind schedule and needed help to hit their deadline, so I asked to be allowed to join them.

With limited resources and up against a tight, immovable deadline, I helped the team deliver an innovative, user-centric experience that pushed past industry standards and challenged commonly held assumptions of what election coverage needed to be.

We’ve got problems…

In online coverage during an election, there’s something you’re bound to find: maps, maps and more maps! They have their advantages and there are lots of valid reasons to use maps for data visualization, but there are two main problems that I see with using them…

Problem one: maps are a pretty bad way to display this data.

Don’t believe me? Look at the results below from the New York Times from 2014. They all look like blowout wins, but each was decided by less than 5% of the vote. Maps hide lots of information, and since geography and population don’t correlate there’s often an element to the visualization that’s misleading. Why do that to users?

Problem two: maps require lots of development time and troubleshooting.

When you’re lacking on time and resources that’s not ideal. We had to make some difficult decisions to find a balance between a minimum viable product and an ideal product deliverable, and then we had to get to work to bring that to life. Why add stress to your team and extra expense to your budget?

…I’m a problem solver!

I knew that maps would be a headache, so I came up with an alternative: charts. They’re clean, simple and intelligible. The audience knows how to read them. Seems like an easy win, right? It was.

Idea to execution

I sketched my idea: a stacked column chart with a centered x-axis with the top two candidates’ votes shown head to head. People liked it, so I built a prototype to let them feel it. People liked that, so we pitched it.

The higher ups at NBC News liked it, and it became our answer. Even better? We built it so that the data fed the tablet and mobile views. Cross-breakpoint deliciousness, served up in a package that helped users see the results more clearly.

A clearer picture

Remember the New York Times results maps from earlier? Take a look below at a side-by-side comparison of the charts we used and the NYT map of the Oregon Gubernatorial race results from 2014.

So much territory is red on the map that it seems like Republican candidate Dennis Richardson should have won handily, but a quick look at the chart shows just how Democrat Kitzhaber became Governor: he absolutely clobbered Richardson in Multnomah County, the most populous county in Oregon by far. That single county’s 120,000+ vote differential carried him to victory, a story that’s hidden in the map.

As for the results from the other maps above, our charts more clearly show just how close the Colorado Senate election was, how Sam Brownback supplemented small victories in the most populous counties with lots of narrow wins in rural counties to become the Governor of Kansas and how Bruce Rauner became Governor of Illinois by employing a similar death-by-a-thousand-rural-counties strategy against Pat Quinn to overcome Quinn’s huge wins in Chicago and Cook County suburbs.

Understanding at a quick glance

The results charts we created made blowout victories like the Wyoming Senate race and the House race in Alabama’s 6th District immediately apparent, and they showed how close the Senate races in Louisiana and North Carolina were while allowing users to explore the data to find other layers to the story.

My idea married data visualization and interactive storytelling to bring the election results to our audience in a simpler and more straightforward fashion. In short, it was better for the users and better for our team.

The process

There was lots to do, and fortunately I’m good at lots of things. Here are some of the ways ways I helped make the project a success.

Overview

I combined my UX/UI expertise with my skills in project management, content strategy, web development and collaboration to help my team create a unique, user-first election results experience.

New look and feel

I designed and developed a new user interface for the display of data on individual race results pages. Out with the maps and all of their headache… in with the charts and a clean, user-friendly data visualization.

Information architecture

I created an inventory of all of the content elements that would be necessary for each state overview and the House, Senate and Gubernatorial races across the country. I also helped to create a strategy for the overview and individual race pages.

Project management

Pressure and tight deadlines require clear, regular communication and well-defined objectives. We used Agile principles to keep us fast, flexible and working together to achieve big goals.

Leadership

As the member of the team with the most experience in elections development and design, I took over de facto lead of the front-end visualization to allow my teammates to focus on the work.

Tracking what to do

Each state has different races, and all of the moving pieces are difficult to track. I created Basecamp to-do lists for each race within each state and linked them with their associated tasks in GitHub.