Designing Results: The 2018 Midterms in Web Design
Election season is always an exciting time for us news nerds here at Upstatement, and the midterms felt extra important given the current political climate. We also had a professional investment this year — we had been designing, coding, and prepping PBS NewsHour’s interactive midterm election results package for months. We worked with Andrew Garcia Phillips of Chartball and the team at PBS to build a visualization to use on their website as well as live on-air.
On Tuesday night as the results rolled in, we sat around the TV pushing hotfixes, taking screenshots, and looking at what everyone else was doing. We thought this might be a great time to share some of the trends and observations we saw across the web.
Architecture of the Front Page
Tracking election results naturally leads with data, and most homepages dedicated a big chunk of real estate to rich infographics. We saw many variations on how to weave an editorial story through bold headlines, colorful charts, big numbers, and live blogs.
The New York Times worked to integrate their articles and data in their layout to create a cohesive story, but it felt harder for us to find what we were looking for. On the other hand, The Guardian separated the data and headlines in a way that felt striking and clear.
Visualizing Power Shift
“How is power changing?” seemed to be the most important question of the night, and many sites highlighted this in smart ways. Our favorite examples used simple numbers to clearly call out the losses and gains the Senate and House.
Other graphics went into more details that were fun to look at but harder to understand.
Anticipating User Needs
Over the course of election night, readers come to a news site with very different mindsets. Early on, they look for predictions and answers to basic questions like which seats are up for election. Later, they want to track results as they come in. The next morning, they look for an outcome and analysis.
Some pages like The Washington Post transformed in creative ways to prioritize video when the results are sparse and interactive graphics when there was more data. Before races were called, the New York Times used their primary spot to show readers what time the polls would close.
Working with PBS NewsHour
We are excited to have collaborated with the PBS NewsHour and Chartball to design and develop an editorial system for digital election results — both online and on TV. We met with PBS journalists, product thinkers, and engineers in Washington D.C. to learn about their editorial focus and sketch ideas. We decided to promote the award-winning video coverage, simplify the chaotic results with clear graphics, and use filters to tell deeper stories.
The Balance of Power interactive visualized results for the NewsHour website and on-air segments. On the home page, the dots act as a thermometer to sense the direction of the results. Many viewers said they kept this view open over the course of the night.
Deeper in, users can see which seats flipped, find districts voted for Trump or Obama, and sort by high vs. low income areas. The Margin of Victory chart told interesting stories about how Republicans were winning more of the tight races.
Huge thanks to the talented team at NewsHour—Vanessa Dennis, Travis Daub, Stephan Rohde, and Brennan Butler. Their editorial wisdom, smart decisions, and product expertise helped shape work that we are proud of and that received great viewer feedback.
Looking for more? See how Upstatement designed PBS NewsHour’s bold new website.
