Empowering Voters with Intuitive Graphics and Designs on Election Result Pages
2024 (1 month)
Duration
Role
Product Designer
Some CONTEXT
Founded in 1940, NBC News is a leader in broadcast journalism, renowned for delivering reliable and timely news coverage to millions of viewers. As a trusted source for election coverage, NBC News provides comprehensive information on voting outcomes and political analysis.
However, with the upcoming election season, it became clear that a redesign and audit of the results pages were necessary to ensure that users could quickly and easily access critical data.
PROJECT OVERVIEW
I set out to revamp the digital experience for NBC News users by improving the readability and visual emphasis of the election result pages. From refining data presentation to enhancing the overall user experience, every aspect of the redesign was crafted to ensure that NBC News could remain the go-to source for accurate and accessible election results.
With a user-centric approach, the redesigned results pages are better equipped to handle the need for up-to-date visuals and analysis, instilling confidence and trust in users as they follow the latest election updates.
THE PROBLEM
So, why might NBC News need a redesign of its election pages?
The current design of NBC News' election results page lacks clarity and emphasis on the most crucial information—voting results.
Users struggle with readability and quick comprehension due to the design’s minimal focus on highlighting election data.
The challenge is to enhance the presentation of these results, making them more accessible and engaging through a redesigned user experience.
Original Section of Votes Cast in a Specific Region
GUIDING QUESTION
How can we revise the design to ensure that users can quickly and easily understand election outcomes?
01.
Review of Previous Designs & Audit
I reviewed the existing election results page to identify pain points and areas that required enhancement. This step was crucial in understanding the limitations of the current design and setting the direction for improvements.
NBC News Voting Results Template
02.
Designing
After seeing the patterns, I designed different versions of the voting result sections that will improve readability.
Leveraging insights from past designs and branding, I created wireframes to enhance readability and emphasize key data points.
NBC News Poll Results Template
Initial Draft
For the first iteration, I didn't want to go too far from the original template so I decided to just change a few details.
-
Changing the pie chart from a dark green to purple was one of them. Since I knew that when you mix the Democratic blue and Republican red, a nice purple color is created, I decided to choose this magenta purple to showcase a blend of the parties and create no accidental affiliation.
-
The second adjustment was to make the percentages more clear. This was done by bolding the number so that it can be more readable at a quick glance.
Candidates View
03.
Iterating
What if people want to search for a specific county to get quick results?
I decided to use the search component as a mockup and when it is entered, only that result would show so that the user does not get confused with information of the other counties.
County Selected Feature
Final Draft
After working iteratively due to the tight timeline, I quickly incorporated manager feedback to refine the design, ensuring it met user needs and project goals.
-
I found that a clear bar graph is also used to show percentages clearly. Therefore, I added a bar under each percentage and colored it in with the party affiliation for the candidates to add a more visual aspect.
-
My design manager agreed with the solution and we decided to hand it to dev after creating a mobile version showcasing the search and clear visuals for each voting mode for both candidates and various counties.
Added Bar Graphs on Candidates View
FINAL DESIGN
How do the voting mode sections look when incorporated into the NBC News election result pages?
Once the designs were finalized, I prepared detailed design specifications and assets for the development team. I ensured a smooth handoff by providing clear instructions and being available to address any questions or adjustments needed during implementation.
County Elections Results Page - Desktop
County Elections Results Page - Mobile
REFLECTION
What were my main takeaways from this project?
In the end, the redesigned election results page successfully met the project’s primary goal of improving readability and emphasizing key voting data. The design was implemented on time, thanks to the efficient collaboration and rapid iteration process. Early feedback from users and stakeholders indicated that the new design provided a clearer and more engaging way to access election results, aligning with the objectives set at the beginning of the project.In hindsight, while the project was a success, I would consider allocating more time for user testing and exploring additional visual elements to further elevate the user experience.
01
Implementing the News Design System
Through this project, I gained valuable experience in applying NBC News' design system, ensuring consistency and coherence across the platform. This reinforced the importance of adhering to established design guidelines while still innovating within those constraints.
02
The Need for More Visual Graphics
I recognized that while the redesign improved readability, incorporating more visual graphics could further enhance user engagement. Future projects could benefit from a stronger focus on data visualization to make complex information more digestible.
03
Rapid Iteration in a Fast-Paced Environment
Being the sole designer in a week-long sprint highlighted the power of quick iterations. The fast-paced nature of the project demonstrated how rapidly iterating on designs with immediate feedback can lead to effective solutions in a short timeframe. However, it also underscored the importance of maintaining focus and clarity when working under tight deadlines.