DUration
May – June 2024
Role
Primary Product Designer,
QA Testing
Team
2 Designers, 1 Product Manager,
1 Program Manager, 7 Engineers
Requirement
The national map needs to be redesigned to accurately cover the Presidential election.
Opportunity
Elections have historically driven scale, but most users are not engaged. A smaller group accounts for a disproportionate share of engagement.
The national results pages have historically driven the most unique visitors and time spent on CNN’s Election Center. After the 2020 election, we analyzed user behavior —visits, page views, and time spent— to determine our user segments.
While Dabblers and Seekers make up the majority of CNN Election users, they do not spend a lot of time on CNN. Enthusiasts and Wonks, on the other hand, while there are so little of them, they spend a lot of time on CNN.
Solutions
Transform CNN Elections' reach into an engaged user base through improved mobile-first, contextualized experiences.
Native Gestures
Zoom and Pan
Easier to tap into small states with smaller touch targets, especially on mobile, where 70% of our audience is
Insights at the National, State, and County Level
Who's leading, who's won, who's flipped a state
Distinguished winner treatments
Filter by Key Races & Remaining Races
Show where the story is
Which states might determine who will win the election
Poll Closing Times
When to know to check back in
Where the race currently stands
Focus on a specific area
Accurate Allocation of Electoral College Votes
Fun fact: Nebraska and Maine are the only states that allocate their electoral votes proportionally.
Contextual information
Easily Browse through Election Results
Scannable hover states
Research
Our small, engaged audience finds that the national map most impacts their satisfaction, while our casual users remain indifferent about the map.
Our Politically casual audience needs guidance
HMW simplify election data and guide users on what to look for?
Key metrics
We aim to achieve over 11.5 minutes of average time spent per unique visitor.
Iterations & Collaborations
Final timeline
Most of my time was dedicated to QA testing.
I partnered with my Engineering Lead to create detailed tickets and weekly development plans, while also supporting the engineering team with QA testing and design-related queries.
Execution & Quality Assurance
4 Main Improvements
First time user experience
The side buttons were not very visible to the user, which risked low engagement.
Adding a tool-tip to the FTUE made the buttons more visible.
Nebraska and Maine Electoral College Votes
Initially showed vote allocation by congressional districts, but it was still confusing.
Showing total number of votes each candidate received was easier to understand.
Auto-scroll
The bottom sheet overlay tends to hide the national map.
The screen auto-scrolls on mobile to keep the map at the top of the viewport.
Highlight the Selection
Descoped due to time constraints.
It can be difficult to distinguish which state/county is selected.
Tapping a state or county highlights it in full color, while the rest of the map greys out.
Final Designs
Key achievements
The Presidential national map was the #1 page on Election Day with 6.4 million unique visitors and 15.7 minutes spent, exceeding our 11.5 minute goal.
Future iterations
I'd love to revisit some concepts that were out of scope due to time constraints. These could significantly enhance the user experience and provide value to both users and the business. Some ideas that I think could be worth exploring:
Utilizing the bottom sheet for recirculation, additional context/insights, or potential revenue opportunities
Adding search functionality or recommended searches
Introducing a cartogram easier visual representation
Highlighting key counties to watch
LEARNINGS
Do not be afraid to work out in the open, not in the shadows. The importance of collaboration and quality testing, and how essential trust is in your team to ensure success in the design-development process.
Do not hesitate to ask questions, especially if you are a newcomer. As embarrassing as it may seem, it is how you gain expertise and become a subject matter expert over time.