2024 MSN Elections Hub
Situation
In 2024, MSN set out to deliver trusted coverage of pivotal elections in the United States and India. With reach across Windows, Edge, and the MSN news pages, the challenge was to inform millions of users with valuable content throughout the period leading up to and during the elections. This content would include:
Voter registration detail information
Live streams of events such as the party conventions and political debates
Timely, relevant and unbiased ‘Editorial Picks’ premium news
Real-time elections results for the House, Senate and Presidential races
As UX Design Lead for the MSN Content Ecosystem & Growth team, I owned the end-to-end product design experience across these entry-points.
Task
The goal was to design a high-impact elections hub that delivered immediate value to users while strengthening platform credibility and traffic. Election timelines happen quickly and there are often many moving parts and shifting storylines. As Design Lead, my task included:
Aligning on timelines and priorities alongside Leadership and Editorial partners.
Reviewing competitor experiences and brainstorming ideas early on with Product Management through daily Figjam sessions.
Assessing feasibility in discussions with Engineering throughout to maximize impact of explored concepts.
Partnering with elections experts within the Microsoft org, who had deep insights into the logic and rules of each countries’ unique election intricacies. These expert advisors would provide insights into the unique significance of races, parties, coalitions and representation expectations from a broadcast point of view.
Coordinating with the Bing UX team, who had been designing a complimentary elections experience for their own platform. Through this alignment, we were able to accommodate a user flow to direct visitors from our elections hub to the Bing experience, maximizing user engagement.
Scaling of the platform was an important consideration since the elections hub platform on MSN would need to be designed to support future democratic elections, regardless of nation.
Action
🇮🇳 India Election, April-June 2024
Our team had begun with the India Elections, which had taken place between April-June of 2024. The challenge of the India Elections was that there are National and State parties involved in races throughout the entirety of the election season. In some cases, the parties merge to create larger coalitions.
Given the 2 month window to execute the end-to-end, it was decided alongside our elections experts that the most impactful and important race to represent live on the elections hub was the National race.
There are dozens of National parties in India, many of which have 0 seat representation in Parliament. There are only 6 recognized parties and only 4 that have a significant impact politically. Working with the content experts, I decided that for the purposes of clarity and simplicity, the main 4 parties would each be represented with a bar graph that would fill as their seat count was tallied. The inclusion of an ‘Other’ bar chart below the main parties could then represent the cumulative total from the parties of lesser significance, showing a more even race. This not only simplified the results parsing for users, but also made pulling results from the API more straightforward for our Engineering team, which was a welcome solution given the tight timeline.
The election day took place on June 4th, and would required designs of multiple scenarios to represent the adaptive results. Here are the phases that I was required to design:
Pre-Results (June 01), consisting of a count-down clock badge, a pre-election headline and placeholder representation for all parties.
Results-Start (June 04), consisting of a ‘Seats counted’ indicator, a live ‘Last updated’ badge, a ‘Vote counting in progress’ headline and all represented parties set to a seat count=0.
Results-Continued (June 04), consisting of a rising seat count/change, which would adapt based on the live data collected through the API.
Results-Final (June 04+), consisting of a ‘Declared winner’ badge inline with the representative party, as well as a concluded ‘Last updated’ time stamp.
🇺🇸 US Election, July-November 2024
Following the India Elections, the focus turned to the US Election season which began ramping up in July 2024. One key difference between the two elections, is that rather than simply show the results for the US Elections, the goal would be to draw and retain users throughout the cycle, ramping up to the final race.
Live Stream/Blog
In coordination with my PM, we had mapped a set of dates between July and November that would feature unique and timely content such as live video streams and live blogs. This content was licensed in partnership with key business affiliates to our platform, including ABC News, CNN and USA Today. Working in alignment with my PM and Engineering, my proposals needed to balance the specific requirements from affiliate brands, constraints from the content API integration and clear, value-forward consumption. These events included the:
Party Conventions (Democratic/Republican)
Presidential Debates (First, Second)
National Voter Registration Day
Premium Content
Our content partnerships would be a major driver of users and retention throughout the election cycle. Unbiased, high-quality, editorialized content would be a value draw for users and uphold Microsoft’s necessary position as a neutral distributor of critical information in a polarized political environment. I worked with Engineering and our Content Experts to propose an ‘Editorial Picks’ content carousel, pinned to the top of the hub and featuring editorially selected premium content.
Election Results
Similarly to the India Elections, the results for the US Elections would be represented through a horizontal bar tally. This simplified the work for our Engineering team, and was considered by our Elections Expert to be the clearest visual to the wider public. Since this was only a two-party race, red and blue were used to represent each party. The API that we used for the count was from the Associated Press, so to guide users to understand the results and provide transparency I added a string conveying that ‘AP has called X of 538 (270 votes to win)’.
The election day took place on November 5th, and would required designs of multiple scenarios to represent the adaptive results. Here are the phases that I was required to design:
Pre-Results (November 03), consisting of a count-down clock badge, a pre-election headline ‘Results begin November 5’ and placeholder representation for both parties.
Results-Start (November 05), consisting of a ‘Votes Counted’ indicator, a live ‘Last updated’ badge, an ‘In Progress’ status indicator, a ‘Election results’ headline and both represented parties set to a seat count=0.
Results-Continued (November 05), consisting of a rising seat count/change, which would adapt based on the live data collected through the API.
Results-Final (November 05+), consisting of a party-themed ‘Election Called’ badge and checkmark to help make the winner visually and thematically clear.
Results
The MSN Elections Hub achieved record-breaking engagement during the 2024 elections:
960M+ total content clicks
52M+ unique user engagements
2.46M+ active unique users on the US Elections hub
3.5M+ Bing search queries driven by MSN partnerships
150K+ increase in topic follows for “US Elections”
Beyond the metrics, the hub strengthened platform credibility and user trust which was a key branding goal from leadership. The outcome was driven not only by thoughtful design execution, but also by close collaboration with cross-functional teams, consultation with election experts, and rigorous research. This experience showed that impactful design leadership requires systems thinking and strategic partnership, not just interface design.
Team
Design Leads: Paul Methot (MSN), Kelly Lamar (Bing)
Product Managers: Daniel Ho (Lead), Antonina Chapor (Business Relations), Joanna Sinclair (Content Expert)
Engineering: Jenelle Yonkman, Akshatha Patil, Ahmed Mohamed, Sabry Ragab, Anant Jain, Chris Zhang