The Associated Press runs a commercial website where users can customize and embed election visualizations into their own news websites. These customers include both international and domestic news organizations, such as NPR, Yahoo!Japan, and CBS.
To prepare for the 2024 election season, I led the redesign of the Election Graphics platform in the fall of 2023. I learned from initial user interviews that redesigning the Layout Editor for creating and editing visualizations was the most important project to tackle.
Team
1 developer, 1 PM, 1 product owner, 5 interactive graphics developers
Digital news managers found the existing process for creating visualizations within AP’s Election Graphics platform to be cumbersome and time-consuming, especially when they’re already under a constant time-crunch during election season.
The site required them to drag-and-drop each visualization into the Layout Editor, but when they’re creating dozens of visualizations for all 50 states, this has very high physical interaction costs.
“I’m creating hundreds of visualizations for primaries and general elections – and it’s just me doing it all.”
“It’s so tedious to drag-and-drop each visualization. And you have to drop it in just the right angle.”
My primary research objective was to understand how users actually create visualizations and uncover any frustrations that diminishes customer satisfaction.
Our main users were digital content managers working at news organizations, usually in charge of creating election visualizations for all U.S. regions – and often working by themselves or in a small team.
To learn how users create visualizations and understand their frustrations, I interviewed 5 key customers: NPR, Fox, Seattle Times, the New Yorker, and CBS. I uncovered the following insights:
Low discoverability of a core business strength. Users didn’t know about most of our available visualizations in the first place. One of AP’s key business strengths is the variety of interactive election graphics that brings election news coverage to life. However, even our power users were mainly just using 2 out of 10+ visualization types.
High mental and physical interaction costs. Dragging-and-dropping hundreds of visualizations during election season was mentally and physically tedious.
To solve for making visualizations easier to find, I conducted a heuristic evaluation of the Layout Editor screen, focusing on the left action panel. The 2 main usability issues were:
I went through multiple design iterations to solve the main issue of how drag-and-drop creates high interaction costs, when users are often creating hundreds of visualizations during election season.
Final Solution: I realized that drag-and-drop still had its benefits, but I needed to provide an alternative for situations when users were creating high-volume visualizations. Therefore, for my final design solution, users can choose to still drag-and-drop or simply click on an available visualization to move it directly into the artboard.
The second part of the interaction was being able to resize visualizations within the artboard. I was guided by the technical constraints which only allowed for half- or full-sized visualizations, and there were already controls for “move,” “edit,” and “delete” when users placed or hovered over graphics in the artboard.
My final design added a control for “Expand” for half-sized visualizations; if the visualization was full-sized, the control changes into “Shrink.” This addition allowed for users to quickly change the visualization sizing without having to drag-and-drop again.
I tested the prototype with 5 target users to uncover the following insights for my next iterations.
Prioritize features that fit the users’ mental model. I thought that users preferred searching to narrow down to the visualizations needed. However, I discovered that users actually wanted to discover based off of multiple known criteria to set a hard boundary. To fit the users’ mental model, I prioritized filters for a hard elimination and made search secondary if the results needed to be further honed down.
Local > Global changes for ease of control. Users can change “Visualization Options” for any individual visualization, or apply global changes within their settings. My initial guideline was that any global change would supersede local changes. However, I learned through testing that users expected a prioritization of local over global changes.
The solution I came up with was redesigning the left action panel for a more intuitive experience that allows for quicker discovery of visualizations.
The new designs provided the option to simply click, or users can still choose to drag-and-drop, to place a visualization into the layout editor art board. I also added another interaction option where users can quickly “Shrink” visualizations to half-width or “Expand” to full-width.
The Layout Editor redesign received extremely positive feedback from our digital news managers. Although site analytics are still pending the 2024 election season, I had two different groups of users go through example usage prompts before and after the Layout Editor redesign. After the redesign, time spent creating a layout decreased by 29% and user satisfaction metrics increased by 43%.
“This will save me so much time this election season and drastically improve my workflow.”
“I didn’t even know so many visualizations existed! I’ll be using more variety so that we can stand out.”
%201.png){kind=small}
.jpg)
