The "Your Voice Your Vote" 2020 is ABC News' full election coverage. Providing the latest news, analysis, and videos on the 2020 Election. We designed and implemented many new features as well as redesigned many existing features to provide users the best experience possible during one of the most important nights of the year.
This was the largest project our team worked on beginning from Winter 2019 through Winter 2020. The project had resulted in the highest traffic nights in ABC News history. Garnering 36% more visitors than prior election years and 40MM unique visitors.
Video Shown: Election Map 2020
OVERVIEW
The project was split into two main scopes: the election map and the election index page. We designed for responsiveness and accessibility, for web mobile, tablet, and desktop devices.
For this project, we created a new suite of map products for national, state, and local, county and exit polls, race rating tables, a curated key races to watch experience, state-level results pages, and a live blog for web and mobile. The feature set was showcased in a home page takeover experience during the primaries and caucuses, general election, and election night for the 2020 Election.
Team
Design:
• 2 Dedicated Designers (me - UI)
• 2 Designers from other teams
Product
Engineering
Tools
Sketch
Abstract
Duration
8 months+
Election Index Page
The purpose of this page is to provide users a high-level overview of what's been happening and what is happening with the current election. The page displays many features across video and infographics such as ABC News Live video player, Universal Balance of Power (National Election Results), live updates on election projections, FiveThirtyEight brand forecast module, a live blog, and of course, the Election 2020 map.
Our approach to this project was to identify, compare, and iterate the designs. We identified what was working well from the previous Elections and how we can improve upon those experiences. We did a competitor analysis on what our competitors were doing and how we can stand apart from them. We iterated and innovated on existing and new features for our product.
KEY MODULES
Election Map
The map modules and map page were a significant portion of the project.
We took the experience of the Interactive Election map we designed earlier in the year and implemented more features on it for the Election.
Feel free to check out more information on this specific product over at my Maps project page.
Key Presidential Races
Pairing with the Live Election Map, we wanted users to know which are the important states of the Presidential Election to keep an eye on.
To do so, we designed a module to pair it up with the map and displayed it on the Election Index page.
The module will take the same hover UI card designs and will visualize the top 3 key races of the Election.
Universal Balance of Power
The Universal Balance of Power module is also known as the National Election Results.
This specific module displays the current reported electoral votes for both parties and tips in favor of the party with the higher vote count.
The module is designed for all devices from mobile, tablet, and desktop.
Recent Election Projections
This module allows users to see projections and results updates quickly.
The design is minimal with the necessary information displayed.
We also designed a scenario for when states have not yet started projections.
This module is used for Universal (all elections), Presidential only, Senate only, Governor only, and House only.
Explicit Follow
Leading up to the day of the Election and during the Election was important for our users. We wanted our users to be able to stay up-to-date with new updates.
We designed a follow module that allows users to follow specific stories and/or topics.
We've updated the design to reflect our new ABCNews design system with new buttons, type ramps, and etc.
STATE PAGES
State Results Page
The next step of our process was to design a state results page template to reflect each state's election.
On this page, users are able to see the results of all the elections that were ongoing in their state or selected state that they wish.
Towards the top of the page would be a video documenting the election followed by links that users can select to take them to the exact result without the need to scroll. We added this feature since some states had many elections going on and each state has many districts.
The results are ordered by the Presidential, Senate, House, Governor, and then the National Map.
Each section will show a map, focused on the specific election, and the parties running, and the results.
On desktop, users will also be able to see the colored bars to represent the parties and visualize which is leading. On mobile, we drop this feature to compact the information displayed on a smaller screen.
If interested, feel free to check out the live product below!