The idea was straightforward: visualize alliances and rivalries in the Middle East—on a map. So, we came up with an interactive cartogram.
Clicking on an actor reveals a brief description and their connections to others. An actor could be anything from an internationally recognized government to a small rebel group. The problem? People didn’t get it. When we tested our first prototype with three readers, none of them realized it was a map. Worse, none clicked on any of the other actors. So, what went wrong? And how did we fix it?
Readers didn’t realize it was a map.
To make 20 actors tappable on a mobile screen, we had to make them quite large. That left little room to arrange them in a way that still looked like a map.
To maintain the benefits of a map, we kept the topology intact and preserved the general shapes of the countries as much as possible. But despite these efforts, our test readers still didn’t realize it was a map—though they did sense that the layout wasn’t random.
Country labels weren’t enough—they looked too much like additional actors. So, we added labels for the seas as well. The most effective fix? Placing a regular map at the start of the article with some of the actors. That primed readers to interpret the abstracted version correctly.
People didn’t realize it was interactive
In the first iteration, we skipped an empty state and pre-selected Hamas, thinking this would show readers how to explore relationships interactively. We were wrong. Readers were so focused on making sense of the 20 entities displayed that they never even considered interacting. The static visualization was engaging enough on its own.
To fix this, we removed the preselected actor and introduced a static version of the cartogram before the interactive one. But even that was too much at once. So, we broke the static map into a four-step scrollytelling sequence, explaining each color separately: friends, enemies, frenemies, and unclear. This finally reduced the mental load enough that test readers no longer found the graphic overwhelming—or impossible to understand.
At first, we assumed a single well-designed interactive would be enough. Instead, we had to first anchor readers with a familiar map, break down how data is mapped into digestible steps, and only then let them explore freely. This represents the classic martiny glass-structure in visual storytelling.
How we created the Cartogram
We used QGIS to create the cartogram, distorting a map of the Middle East based on the number of actors per country. The result was overlaid with a rectangular grid and exported to Figma. There, we made further adjustments to accommodate the rectangular actors and fit the map into a vertical layout.
This project underscored the importance of sequencing in visual storytelling. Even the best-designed interactive can fail if readers aren’t primed to engage with it. By structuring the narrative—starting with a regular map and gradually building up to the interactive—we helped readers navigate complexity rather than get lost in it.