Fox News Elections

Web Design | Data Visualization | Research | Politics

What I did

Designed the Fox News 2016 and 2020 Presidential Elections website and the 2018 Midterm Election website. These were subdomains off the main Fox News website. Was responsible for creating all page components, all assets including maps and charts and responsible for designing the layout and suggesting functionality.


I received the 2016 elections project in November of 2015. I knew very little about the process and my design deliverables to have a site that could compete with NYTimes and CNN. During this time, the Fox News website was segmented from a design perspective as we were going through major redesigns of the homepage and several sections. Stakeholders requested it to live as a site separate from the rest to be used as a destination for all things elections. From the primaries through the general election, I designed pages for race results, schedules and more. It was the largest project at the time I had ever received. After I completed designs, they were handed off to the development team where I thought my role had stopped.

state results This was used on all state results pages. The upper left corner shows the overall state race result for president. The map includes each county and how they voted. On hover, the lower left results would update to show that county's results.

At the time, my team was new to agile processes. I designed every page of the site based on the sites from previous Fox election sites. Some of my design choices didn't account for different types of data. While front-end development was building the site they began asking questions that I hadn’t thought about and had forgotten to address in my designs. This made me reassess my design choices and improvements that I could implement for the following election.

gubernatorial results Table of results design for the gubernatorial race results. In theory this contained all the elements I wanted for this layout but when sizing down for mobile it caused problems when figuring out the stacking order.

New editorial focuses became clear too late in the season and it was difficult to adapt my designs. I also created one-off components for each page instead of trying to create fewer components that could handle different situations. Looking back, I also didn’t create components using smart scalable dimensions for mobile and desktop.


I began working on the 2018 election pages in January 2017. After the results of the 2016 presidential race, I knew that the midterm elections would take a front row to politics over the next 2 years. We had a new look for the site and we were done with separately styled sites for each section. With the style guide for Fox in place, it was easy to create new components that complemented the style. I designed new maps and refreshed the color pallet to match. Without a presidential race, I was able to focus on the sections for the Senate and the House of Representatives. Additional pages such as state results were designed later.

senate results The 2018 designs were sleeker and matched our new look and feel for the rest of the Fox News site. Each elements' size was thought out for any viewport.

You can divide the MVP of the elections into 3 components: tables, maps and bars. These are the key ways results can be displayed for an elections site. My main focus was making sure that those pieces were designed well. Having a table that was flexible to display different types of information using the y-axis was crucial and made it easier for front-end development to create these components as lean as possible.

gubernatorial results The 2018 table designs are flexible to be used across all congressional races. To test that flexibility, I use long surnames or city names to make sure the design will work on the smallest viewport to support any data we receive. By adding (Other party) after the candidate name in the 4th row, we can see how it would look if a candidate from another party other than the Republican or Democratic party were to be displayed in the race results.

One of the biggest lessons I learned from my 2016 cycle was creating reusable components and using scalable dimensions to create them. Once the team had the main sections of the site established, the decisions became straight forward. Once you know the maximum width of a component for mobile, it is mathematically determined how to create components for larger view ports.

The 2018 elections website can be seen here.


For my 3rd elections cycle, I was more prepared than ever. I upgraded my workflow from designing in Photoshop to Sketch and I truly understand the presidential elections process. The 2020 elections experience expanded upon my 2018 designs which used the same underlying style guide.

Unlike previous years where I spent the bulk of my time reinventing look and feel, this year I was able to add enhancements to pre-existing elections components. I researched and studied historical election situations and scenarios that could occur, to better prepare my designs. Additionally, I created guides that explain each component in all it's states of design and how they function. These guides were helpful to product managers, developers and quality assurance team members.

elections home This is view of the landing page for the 2020 elections site that includes a "bar" and "map" which showcases the most important election information.

My focus for this election was not only to showcase the main election data but to have interesting data visualizations for the super-user. I ideated, designed and prototyped a page we called "Margin of Victory." This page showed up-to-the-minute vote margins between the candidates in all states, and DC. This visualization is meaningful because in recent election years, most states' vote difference is between 1-5%. This shows the user how close the election really was.

margin of victory Margin of Victory in full can be seen here.

Design is in the details. Every design element from the length of a candidate’s name to the splitting of a state’s electoral votes was taken into consideration. Thinking through those decisions and exploring the ripple effects of all possibilities is what made the elections experience successful.

Check out the full 2020 elections experience here.