Web Design | Data Visualization | Research | Politics
Designed the Fox News 2016 Presidential Election 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.
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.
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.
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.
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 feel that I am more prepared than ever. I have upgraded my workflow from designing in Photoshop to Sketch and I truly understand the presidential elections process. Although I can’t disclose images from the 2020 designs, I have expanded upon my 2018 designs which use the same underlying style guide.
Unlike previous years where I spent the bulk of my time reinventing look and feel, this year I am able to add enhancements to pre-existing elections components. I have been able to research and study historical election situations and scenarios that could occur, to better prepare my designs. Additionally, I have been creating guides that explain each component in all it's states of design and how they function. These guides are helpful to product managers, developers and quality assurance team members.
This is a chart from one of the new 2020 elections pages. It compares the total dollar amount raised for each presidential candidate's campaign.
In Summary, my strategy for the 2020 elections designs is to research first and design second. I will be successful if I can prepare designs for any scenario that should arise during the primary season and the presidential election.
The Candidate Tracker page I designed for the 2020 elections can be found here.