CNN Election Center — Storytelling with data

“How do we empower our users to decide on an Election unlike any that America had seen before?”

Overview

The presidential election in the United States in 2020 was unlike any other in the country's history. Over 152 million Americans voted to elect a new president and federal, state, and local officials across the world. In the midst of a global pandemic, it was critical to provide users with accurate information.

Goals for the Project

The project's ultimate aim was to demonstrate a comparison between candidates, how the country's demographics are shifting, and how a few counties will be in play relative to previous elections. Past coverage had only shown surface-level information that most users were already aware of.

High-level goals:

1. Show a distinct contrast between candidates.
2. Remove bias by presenting data visualizations that allow the user to draw their own conclusions.
3. Provide users with specific facts (historical context) and encourage them to participate in the content and interactions.

Users and Audience

Our users told us their concerns about the election. Who are my elected officials? How do I update my voter information? What is a Caucus? Who's winning the fundraising race? What's changed from 2016 to 2020? What states are in play? How do I view the differences between the candidates?

Target Audience

“Users who are involved in politics and enjoy delving into the world of data visualization.”

User Feedback

Timeline

My Role

I worked as a Senior Product Designer; my overall duties and responsibilities included data visualization, product/visual design, competitor analysis, conceptual ideas, quantitative/qualitative analytics, storytelling, content strategy, and collaboration with the product and engineering team.

My team (Election Center) involved three Sr. Product Designers, Sr. Product Manager, Project Manager, Tech/Engineering Director, three QA Analysts, and a slew of Developers. Our wider team included editorial writers, researchers, content strategists, architects, graphic designers, various stakeholders, and several developers.

Collaboration Tools

During our brainstorming sessions, Miro became the ultimate collaborative method. It allowed Product Managers and Engineers to become more involved and it allowed our team to save time, which was our biggest constraint.

Work Process

After the initial research and brainstorming sessions, it's time to work. A two-week sprint kicks off our project. Products designers are assigned to various tasks by our team (pages, initiatives, etc). Afterward, we have continuous meetings with developers, product/project managers and stakeholders. Here's a short rundown of how it works:

1. Biz/Product Managers write the requirements/acceptance criteria using Jira
2. The project manager sets the Dev/Design meeting to discuss req. We decide who will work on the project (mini-team) and others (legal, editorial, Wolf Blitzer, etc).
3. We break off — Design focuses on the structure with wireframes, mood boards, ideas, visual competitor analysis, feedback from other designers, concepts, etc. During this stage, we may have brainstorming sessions with our Product Manager / Tech Directors to make sure our ideas are even workable. (side-note: It is the worse when you have the greatest idea and you're told because of our servers it is not capable).
4. After two/three days of brainstorming with the team, we usually will have a Stakeholder meeting (Directors, Editorial, etc) to present our best approaches and mockups. Our stakeholders will provide extensive feedback and we followup by email or Slack.
5. This process continues until all parties have signed off for development and code. Development begins and collaboration still occurs with feedback from the Design team. One or two designers are assigned quality assurance before the final approval for release.

Competitor Comparisons

Discovering Insights

Quantum Metric is one of my favorite tools that I've always enjoyed using. I encountered the IHG tool on the UX team and it was very important for our studies. I proposed using the CNN tool, but learned they used a similar service—Fullstory—but it was not implemented in our product Election Center.

I clarified that by using Fullstory, we will be able to discover quantitative and qualitative insights such as annoyance signals (are they even clicking on our interactive maps!?), error messages, and replay sessions, which I could then share with the development/product team.

Other tools used: Google Analytics, Domo Analytics

Ideation

Design objective: Provide users with specific facts (historical context) and encourage them to participate in the content and interactions.

Concept: I wanted to show users how the demographics of a state (Florida, example below) are changing. Since Florida is a swing state, I wanted to demonstrate how demographics are evolving, how the population has changed in previous elections, and encourage users to draw their own conclusions about the likely outcome. I suggested not all states would require a timeline since we know factually how most will play out.

“This will take a huge amount of resources to display on our pages” — CNN Dev/Tech Director

I responded to the amount of resources needed, suggesting that CNN already had this information from previous elections; however, they countered by stating that the App had too many external sources (APIs) in place for this to be feasible.

However, they agreed on my overall idea. We agreed on a scale-back version rather than a timeline. It wasn't feasible to display the four past elections but only 2016.

Result

Design objective: Show a distinct contrast between candidates.

Note. With this particular design, I decided to be more thoughtful. My aim was to contrast the candidates without overcrowding the page with poll results. At first glance, there's a lot to take in.

• AD stakeholders wanted more advertisements on the Poll Exits
• The design, while innovative shorten the page which prevented more ads from being displayed

I worked with the Editorial Team to bring more content to the page that would balance out the advertisements. We scaled down due to time constraints and feedback but added demographic filters and the ability for the user to browse by keywords.

Design objective: Remove bias by presenting data visualizations that allow the user to draw their own conclusions.

Note. My idea was to demonstrate how a state's demographics are shifting, making it a competitive race (historical data). The illustration does not go far enough; it only reveals one aspect. I continued to iterate.

Adding a comparison chart would increase the user's cognitive load, while adding a drop-down menu would force the user to toggle back and forth in the results.

Stakeholder/Design Crit Feedback
A good start, but more demographics are needed. For the user, what story are we trying to tell? I decided and went deeper. I partnered with the Editorial Team on iterations and utilized their input. Concept 2 is fine, but other designers have told me that it's difficult to understand.

On the final result, I collaborated with another designer. Also, stakeholders preferred this direction, it was easier to absorb.

The user could compare two categories using a horizontal bar chart based on the story we were trying to convey. Also, I noticed that our eyes are drawn to the category names first, before moving on to the details. I would have liked to take it a step further to provide historical background.

Additional constraints: time, dev complexity, competing content

Design objective: Provide users with specific facts and encourage them to participate in the content and interactions (Who's Winning)

“You have to design this like…will your grandma understand this at first glance.” – Head of Product (Politics)

The bar chart was ineffective, particularly in the absence of context. The user knew we were making comparisons between the two candidates, but what did it really mean?

In the next version, I removed the bar graph but retained the colors for the candidates, the monthly timeframes, and the color key at the bottom. I also wanted the Editorial Team to contribute more. From a strategy standpoint, I needed them to support the user in framing the story.

Final iteration: Poll text is removed. I collaborated with the Editorial Team with the content strategy and Dev team on some of the components.

I moved the Trump/Biden color key at the top to conserve space, removed 3rd party candidate (heavy political debate!) and reduced the monthly time-stamps because it was advised that the last months were the most important for the polls.

Also, the description of the candidates is removed. I felt users already knew who these two candidates were. End points were added to inform users where the candidates were at present time. I felt this told a fuller story of showing the differences between the candidates.

Below are additional designs that I worked with my team on.

User feedback results

Key Takeaways

Outcomes

CNN reached its largest digital audience in history in 2020 according to Comscore, shattering all records and ranking #1 in every available month to date for global and U.S. unique visitors, wrapping the year with a monthly average of 215 million unique visitors globally (2020 global numbers represent a monthly average of January-November). CNN holds the #1 spot in every key category and is also the only news outlet to rank in the top five of each of those categories, with every other competitor falling out of the top five in either video, mobile, global or overall unique visitors.

Throughout 2020, CNN retained its position as the #1 digital news destination, according to Comscore, and held the #1 ranking for more than 4 consecutive years for U.S. unique visitors, and for more than one year for global unique visitors, by holding the #1 position in every month of 2020 to date in the key categories of global news, U.S. unique visitors, mobile unique visitors, video unique viewers, and millennial unique visitors (November 2020 data is the most current available for global traffic rankings).

In November of 2020, more people searched for the term “CNN” than ever before, expanding the gap between CNN and every other news competitor on the internet. On a single day in the month of November, CNN saw 116 million unique visitors, with 46 million people on a single story, according to Adobe.

Source: CNN Press Room

Learnings

• Get feedback quickly; Our team would have save quite a bit of time if we didn't chase feedback from several stakeholders.
• Collaboration is key. Get several involved early on; not as an option to provide details once work has been approved and shipped.
• Allow designers to make strategic decisions and to have more ownership over the product.
• Account for more time for user research and testing. Research teams should be more involved in the process.

Summary

In general, I'm satisfied with the work I did at the CNN Election Center. Working there taught me that just because not all of my ideas were implemented, it didn't mean they weren't successful; particularly when working under time (and technical) constraints. I really appreciated how our team tried to do great work by being thoughtful and encouraged users to digest what was presented to them.