Enhancing the Election Night Homepage Experience
Screenshots of NBC News' homepage on November 5, 2024
Overview
The challenge: Provide quick and complete election information on a busy homepage. Election night requires us to analyze data thoroughly, present it in detail, and provide continuous, insightful updates on a very visible platform.
The opportunity: we saw this as an opportunity to bring in lots of users, make the election results fun and informative, and make the homepage the go-to spot for all things election.
My role and timeline
I was the main Product Designer for all the embeds on homepage, with some guidance from my manager, and some collaboration with the homepage Product Designer.
Timeline: 2-3 week design phase
Development: Around 2 months for implementation
Development: Around 2 months for implementation
How might we...
Present a high volume of election data in a clear and engaging manner while maintaining user engagement on our homepage throughout the election cycle?
Research: competitive analysis of homepage election coverage
We analyzed homepage election data presentation strategies of major news outlets during the 2020 and 2022 elections.
The NY Times' homepage (Nov 2020)
CNN's homepage (Nov 2020)
Bloomberg's homepage (Nov 2020)
CBS New's homepage (Nov 2020)
Politico's homepage (Nov 2020)
Our Solution: a user-centric homepage design for real-time election updates
We implemented key features to provide a dynamic and informative homepage experience:
• At-a-Glance Results: Displaying easily digestible, high-level results, such as the Presidential race winner and the balance of power in the Senate and House.
• National Snapshot: Providing a comprehensive overview of national results through an interactive map.
• Real-Time Updates: Ensuring a sense of "liveness" by implementing continuous updates as votes were tallied.
• Key Race Highlights: Delivering focused updates on nationally significant races.
• At-a-Glance Results: Displaying easily digestible, high-level results, such as the Presidential race winner and the balance of power in the Senate and House.
• National Snapshot: Providing a comprehensive overview of national results through an interactive map.
• Real-Time Updates: Ensuring a sense of "liveness" by implementing continuous updates as votes were tallied.
• Key Race Highlights: Delivering focused updates on nationally significant races.
Turning user needs into homepage features:
• At-a-Glance Results: Balance of Power (BoP) bars for the Presidency, Senate, and House.
• National Snapshot: An embedded national map displaying real-time race results.
• Real-Time Updates: Implementing dynamic data updating for all election-related modules.
• Key Race Highlights: A dedicated 'Scoreboard' module for tracking curated key races.
• National Snapshot: An embedded national map displaying real-time race results.
• Real-Time Updates: Implementing dynamic data updating for all election-related modules.
• Key Race Highlights: A dedicated 'Scoreboard' module for tracking curated key races.
Balance of Power visualization
To address user interests, we added Balance of Power bars for a clear view of key election results.
Zero state
With results
Winner call
We added live updates to all our data visuals to make information flow feel more real-time.
Given the limited space on mobile screens, we made it easy to switch between the President and Congress views.
Visual Overview: National election map
To give users a quick look at the national election, we added a live map showing real-time results across the country.
President tab; zero state
Senate tab; zero state
House tab; zero state
President tab; winner state
Senate tab; winner state
House tab; with data state
Real-Time Insights: the 'Latest Results' embed
Added the 'Latest Results' embed to the homepage with election updates for President, Senate, Governor, and key ballot measures.
Curated Coverage: the 'Key Races' scoreboard
We created a 'Scoreboard' embed to track races of national interest. It gave updates on selected 'Key Races' chosen by our editorial team.
Zero state
Some results
Winner calls
Enhancing the Real-Time Feel: Countdown, Live Blog, and Live Video
We added a countdown clock, a live blog for updates, and a live video stream of NBC News to make the homepage more lively and feel more up-to-the-minute.
More than 48 hours: Date state
More than 48 hours: Days away state
Less than 48 hours: Days & hours
Less than 48 hours: Hours & minutes
Less than an hour: Minutes & seconds
Poll closed state
Live Blog
Live video embed
Elections Design System
This project also included contributing to and pulling from a design system that was new and being constantly updated. Here's a sneak peak at our elections component library:
NBC News' Elections Component Library (1 of 3)
NBC News' Elections Component Library (2 of 3)
NBC News' Elections Component Library (3 of 3)
And here’s how they all looked on election night...
Election day at noon
Election night, 6pm
Election night, 7:30pm
Election night, 8:00pm
Election night, 9:00pm
Election night, midnight
Election night, 2am
Morning after election day
Outcome: Record-breaking engagement
Our homepage election experience resulted in NBC News breaking its traffic records, achieving the highest single night traffic, surpassing the levels of the 2020 election. Source: Digiday
According to Press Gazette, NBCNews.com ranked as the top website in traffic in over half of the United States during election night. Source: PressGazette
Conclusion
NBC News' Editorial and Leadership expressed high satisfaction with the homepage design. Real-time results presentation effectively maximized user engagement and drove traffic throughout the site.
Some of the features may still be live here: https://www.nbcnews.com/politics/2024-presidential-election
Here is a slide deck of this case study