US
ELECTION
2020
UX / UI
Challenge
My PO presented me with the idea of having a feature in our Mapcreator* tool that could give our clients the ability to visualize real-time Reuters data from the 2020 U.S. election in an interactive map visualization. This solution has reached 6'000'000+ unique visitors on the interactive map visualization.
*SaaS mapping company.
/ My approach
My approach was human-centered. After I did an initial Design Thinking phase with the team, understanding the challenge with User Researches and User Interviews, I went on the creation of the User Flow. Once I understood the goals, I proceeded with the other steps:
/ UX and UI
During the first draft of the UX Flow, I analyzed the three different interactive data visualizations that this project would have. First, a stage where the map would have no data available. Second, the data would be partially displayed. Last, the map would display the results of the 2020 U.S. election.
1 / No data available
The first phase of the interactive U.S. election map had the goal of visualizing the void of election data in a visual that was clean but not boring to look at. With the team, we agreed that it was best to choose an achromatic color for the U.S. fill that should coordinate with the other five main colors of the interactive map design. (→) This was also one of the reasons why the final visualization of this first phase of the map was done at the end of the design project. In the end, we decided to go with a #D9D9D9 for the achromatic color.
2 / Partial data available
The purpose of the second phase of the interactive map for the U.S. elections was to give the feeling of a data in progress. To achieve this goal I used colors, giving differentiation with shades: a full shade for the winning Party and a lighter shade for the leading one. (→) For the color palette, I tested 326 different colors before choosing the final ones.
3 / Results
In the last step, the map showed all the data. (→) For the graphical display of smaller states (e.g. Rhode Island, Connecticut, etc.), our goal was to visually access that data in a stepwise manner. In the first zoom of the map, the colors were the only element that helps the user understand who is winning a State. In the second zoom, there were instead, already available, the postal codes of the states. To the second zoom were added small external rectangles, connected with lines to those states that would be difficult to read at a zoom so far away (or to which, as in the case of DC, it would not be possible to identify). In the third zoom, abbreviations were available. And in the fourth zoom, the full name of the state could be read from the desktop.
/ Some UI frames
As we can see, both the popup and the legend in the mobile view are static. While in the desktop view, the possibility to hover a state with the mouse, gives an extra feature to the map: displaying a dynamic pop up. This came up after a UX issue we had with pop-ups in the map on a mobile device. The mobile device didn't have a good experience with the pop-ups displayed close to where the user was tapping. Therefore, we decided to adopt only a static one in the mobile version.
In the UI mobile frames you can see a first UX flow where the user zooms first to the center and then moves to the right and zooms further to see smaller states. Thus, in the frames, the more the user zooms into the smaller states, the more the external rectangles with the postal code inside disappear. Instead, in the second UX flow, the user clicks on the state of Colorado, which shows the electoral data of counties.
/ Style
/ Pop up
and Legend
(→) Did you notice the explanation of "E.V." on the pop-up? In one image it's inside the pop-up, in another it's just outside? What do you think is the most suitable choice? Let me know in the comments, I would love to know your opinion on it.
/ The election day
Here are some screenshots of the interactive map project during the 2020 US election.
/ A learning process
This project gave me the chance to grow a lot, having the opportunity to research with the team how to communicate election data with the most suitable solution. It was not easy. Some aspects that seemed small turned out to be bigger than we thought. Easy in theory, hard in practice. What happens in the pop up where the leading candidate (according to percentages) is not the winner? Because that could happen (and did happen). In some states that already knew that whoever led the election would not be the candidate who would receive the electoral votes. They are called "safe states" because a candidate has enough support to be considered the winner in a specific state. So, we had to create a design that would work for that scenario as well. Thus, we decided to prioritize our list of candidates first on the amount of EVs that are won, and only then on the votes.
As for every project, feedback from users have shown to be extremely useful. As an example, what is the best location for the static pop up? Left or right? The answer is: it depends. We received feedback from a broadcast customer who needed the pop up on the bottom left. And it made sense. Think about their television set. They probably would have needed the bottom right corner free to check the state of Florida when they were discussing and making predictions.
It was exciting and inspiring to work on this project. I'm glad I had the opportunity to cooperate in the outcome.
