2016 presidential election night maps

November 2016

Roles involved: Design direction and execution

Project link (on client sites): link1, link2

Working on the general election maps is an experience unique to The Associated Press. The final maps were translated into eight languages, used by clients around the globe and generated about 120 million clicks last time I heard.

Working with my colleagues who put tremendous efforts building backend data modules, optimzing client-side load speed, conducting extensive testing more than one month before the election day, I was tasked from the very beginning to think everything visual about the project.

Recycling good components from the design of primary maps and applying them to the use cases of the 2016 general elections, I generated the first draft of mockups and the initial mood board in June. That went through quite a few iterations between then and September.

Later on, I worked with our front-end dev fine-tuning design details including display across devices and element placement under different language locales. I also prepared customizable stylesheets for customers who wanted to apply their own styles to the maps, and handled special requests from them.

Customized illustrations and colors used by La Nación:

Some of the important design decisions made along the way:

• We did non-zoomable SVG maps;
• We set cartogram the default view for the president results map, equal-area map the default view for Senate and Governor results maps, and made the geographic map a configurable option;
• The results of state ballot initiatives are grouped by topics and displayed on a map, too.