Designing an interactive database of 400+ nonviolent movements for CANVAS.
Client: CANVAS (Centre for Applied Nonviolent Action and Strategies) — a Belgrade-based non-profit that has worked with pro-democracy activists from 50+ countries since 2005.
My role: I led the UX direction and co-designed the UI together with another designer. I owned the information architecture, filter logic, and the pin system — and was the primary point of contact in stakeholder conversations where we had to push back on scope.
Problem space
CANVAS had spent years building a structured database of 400+ nonviolent resistance movements. Each entry was rich: dates, geographic context, tactics used, outcome scores, media coverage assessments, author credits. The dataset was real, rigorous, and completely inaccessible to anyone outside a spreadsheet.
To make this knowledge explorable by the people who needed it most: researchers and academics looking to analyze patterns across movements, and activists and NGO practitioners who wanted to learn from historical cases relevant to their own context.
These two users come to the map with different intent:
Researchers and academics
want to filter, compare, and find patterns — they have a question before they open the page.
Activists and NGO practitioners
want to explore and discover — they arrive curious, not with a specific query.
Problem #1
The data was too rich for the interface
The client wanted every attribute in the database surfaced as a filter. That's understandable — they built this data with care, and every field felt meaningful to them. But 17+ filters on a map interface doesn't give users power, it gives them paralysis.
How might we help users meaningfully explore 400+ cases without overwhelming them with every dimension of the data?
Problem #2
400+ pins on a world map is visual chaos
At a global zoom level, dense regions — the Middle East, Europe, Latin America — would collapse into an unreadable mass. Any solution had to preserve geographic meaning at every zoom level, not just when you're already close to a specific country.
How might we show the full dataset at once while keeping the map readable and navigable from any zoom level?
Key decision #1
Filter prioritisation
The client came with a spreadsheet and a request to put everything on the map. We said that wouldn't work. They disagreed. Instead of continuing the conversation, we built a prototype with all 17 filters fully exposed — exactly what they asked for. We put it in front of them.
Seeing it rendered changed the conversation immediately. The interface was unusable, and that was now undeniable. From there, we could finally work together on what actually mattered.
The framework we used to decide: A filter earns its place if it helps you find something. If it only describes something you've already found — it belongs on the case page, not the map.
Applying that lens, we landed on six filters:
Filter
Rationale
Country
Primary geographic orientation — how most users would start
Year
Enables temporal analysis — trends over decades
Type of protest
The 9 core categories, each with its own color on the map
Tactics used
Based on the 198 Methods of Nonviolent Action, grouped into clusters
Success score
Simple Low / Medium / High — immediately meaningful
Case writer
Surfaces credibility and lets users follow specific researchers
The 12 we cut — "Concessions were made", "Opponent response", "Media coverage was sympathetic" and others — were all descriptive attributes. Valuable on a case page. Noise on a map.
Key decision #2
The Pin system
With 400+ geographically distributed points, we needed a system that stayed readable at every zoom level — from world view to street level — and communicated category at a glance.
We defined a color-coded pin system built around the 9 protest categories — each category gets its own color, so the map is readable before any interaction.
We defined two core states the pin system needed to handle:
Single pin
Colored by category, with one pin per category; the number indicates the total events. Tap to open a compact tooltip: name, category, year, country, and a link to the full case.
Cluster pin
At zoom-out, nearby pins group into a cluster. Same-category clusters inherit the category color; mixed-category clusters use a neutral style — a signal to zoom in rather than misrepresent what's inside.
Development & launch
We knew our development resources were finite from the start, so design decisions were made with buildability in mind throughout — not as a constraint discovered at the end. By the time we reached handoff, there were no surprises: most technical considerations had already been absorbed into the design during the process.
The product shipped to production and remains live. CANVAS continues to actively add new cases to the database — a meaningful signal that the system works well enough that they trust it and keep investing in it.
What I'd do differently
Stay more involved past handoff. There's a gap between a polished Figma file and a polished shipped product, and closing that gap requires a designer to be present and vocal during implementation. I underestimated how much that final mile matters. It's a lesson I carry into every project now: advocacy for the design doesn't end at handoff.
Telegram
@lizzie_shs