.png)
NPS 4+/5
(ease of use)
6+ Millions of unique visitors
Retention +20%
Interactive map view feature to show the US live election data on desktops, TVs, mobile devices, and iPads.
Mobile prototypeDesktop prototypeTV prototypeIframe prototype
How can broadcast newsrooms view live data from the U.S. election?
My PO presented me with the idea of having a feature in our Mapcreator* tool that could give our clients the ability to view real-time Reuters data from the 2020 U.S. election in an interactive map view.
*SaaS mapping company.
Solution 💡
I decided to challenge myself on this problem by creating the U.S. Elections 2020 interactive map where pop-ups displayed live data by prioritizing with a colored line the party that was leading. This way, newsrooms could use the design to support their live data story by understanding the data in seconds.
In the design I created, the TV show host and online newspapers could read the live data through pop-ups that displayed county and county data. The data would need to be displayed clearly to give the presenter the ability to interpret the data within seconds. This ensured that the interaction covered all usability requirements.
KPI Metrics Results 📈
This solution achieved 6'000'000+ unique visitors on the interactive map view. In addition, positive feedback from users. We got +20% retention for the project. And new users interested in Mapcreator product from the promotion of this project. Revenue +0.88% in less than 1 year.
Discovery
We started the design process from a user need, which is understanding the live data of the American elections during election days. To study this user need, I started my user research by doing competitor research and interviewing users to understand how American elections work.
I investigated an old interactive map project for the U.S. elections, and on UsabilityHub I did some surveys in the U.S. to gather information about the election process. In this way, I was able to create the Empathy Map, which allowed me to narrow down what typical users say, do, might think, or feel during election days.
Define
Our user research showed what the priorities are in an interactive map about the US election. Pop-ups, party colors, electoral votes, and easy-to-read data proved helpful in understanding election data. And the interactive map has three important stages to pay attention to. The map with no data, the map with partial data, and the map with the entire country elected.
From the research, we got interesting insights from users who told me that in some U.S. elections, parties with fewer popular votes won the election. This insight prompted me to research this topic. I saw that a party could win the Electoral College but lose the popular vote. That happened in 2016, 2000, and three times in the 1800s. Therefore, this research further validates the problem that graphical content, such as maps in my case, can benefit in interpreting data with the help of pop-ups showing how many electoral votes each country gives to parties. In this situation, an alternative solution to the usual map of the United States would have been a cartogram where areas shown altered so that it is clear how many voters there are for each county. Unfortunately, creating this map was beyond the time constraints for the project, so we had to opt for the projection of the National Atlas of the United States.
Hypothesis 🤔
My hypothesis was: Can we design a pop-up where U.S. election data shows population votes and electoral votes giving a visual priority to the party that would win over the percentage of votes or?
Test 📝
I decided to proceed with the high-fidelity prototype only in case the pop-up was understandable 4/5 in the NPS by asking users if they would consider the map data easy to read.
From tasks flows
to UI Design 💪
For UI Design, I started with researching competitors by testing their products. That, along with the insights gained, allowed me to create the final Content Creator Task Flow, which helped me with the Sketches, Wireframes, UI, and Interactive Prototypes.
UI Design Testing
and Interactive Prototypes 👩🏻💻
Here's the part I liked best: during the first draft of the UX Flow, I analyzed the three different interactive data visualizations this project would have. First, a phase where the map would have no data available. Second, the data would be partially displayed. Finally, the map would show the results of the 2020 US election.
No data available / first stage
The first phase of the U.S. interactive election map had the goal of showing the void of election data in a design 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 had to 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. Here's a mockup of the high-fidelity prototype I created.
Partial data available / second stage
The purpose of the second phase of the interactive map for the American elections was to give the feeling of ongoing data. To achieve this goal, I used colors, giving differentiation with shades: a full shade for the winning party and a lighter shade for the one in the lead. (→) For the color palette, I tested plenty of different colors before choosing the final ones.
Final result / third stage
In the last step, the map showed all the data. (→) For the graphical display of smaller states (es. 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. On the second zoom, there were instead, already available, the states' zip codes. At the second zoom, small outer rectangles were added, connected by lines to those states that would be difficult to read at such a far zoom (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 pop-up and the legend in the mobile view are static. While in the desktop view the ability to switch a state with the mouse, gives an extra feature to the map: the display of a dynamic popup. That came up after a UX issue we had with pop-ups on the map on a mobile device. The mobile device didn't have a good experience with pop-ups displayed near where the user was tapping. Therefore, we decided to adopt only a static one in the mobile version. In the mobile UI frames, you can see an initial UX flow where the user zooms first to the center and then moves to the right and zooms further to see the smaller states. Thus, in the frames, the more the user zooms into the smaller states, the more the outer rectangles with the zip code inside disappear. Instead, in the second UX stream, the user clicks on the state of Colorado, which shows the electoral data for the 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. Which do you think is the most appropriate choice? Let me know. I would love to know your opinion on this.
The election's 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 was 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.
Eventually, we also offered our clients the ability to view the U.S. elections through another map representation: Tilegram
It was exciting and inspiring to work on this project. I'm glad I had the opportunity to cooperate in the outcome.
Thanks for watching. To discuss more the project, let's have a talk.