Civic Tech for Non-Experts: Building Tools That Actually Help

We're a couple with complementary interests: my partner is the politics brain behind devolvedelections.co.uk, and I’m the one who builds and maintains the site.

While he interprets polling data and electoral systems, I focus on translating that into a clean and intuitive digital experience. I’m not a political expert. In fact, I often learn about these systems through the process of trying to visualise them. This is a look at what it’s like to develop a civic tool without being deeply embedded in the political side.

👩‍💻 My Role in the Project

While my partner dives into polling data and electoral systems, I focus on:

Writing the code that powers the projections
Building the site’s frontend and visual design
Handling data formatting and performance
Maintaining accessibility and responsiveness

We wanted the site to feel simple and clear, especially since devolved elections use very different voting systems (like AMS and STV), which aren’t always easy to explain.

✍️ Why I'm Writing This

I don’t write the blog posts about politics. That is my partner’s domain. But building a public-facing civic tool made me realise how important the presentation layer is to political understanding.

You don’t have to be an expert in electoral behaviour to help explain complex systems. You just need to:

Understand your users
Care about clarity
Treat accessibility as a feature, not an afterthought

If something confused me while building it, that was usually a good sign it needed redesigning. I think this way of working could be useful in other areas that feel hard to access. Hopefully, it helps anyone thinking about making their own civic tech tools feel a bit more confident diving in.

🧰 The Tech Stack

It is a static site, built with simplicity, speed, and accessibility in mind.

Here's the core stack:

Framework: Astro
Hosting: Netlify
Data handling: JSON data preprocessed at build time
Mapping: Open-source SVG maps edited manually, then embedded directly
Data Visualization: Little sprinkling of d3.js and a whole lot of custom code.
Responsiveness: Mobile-first, CSS grid and flexbox with media queries
AI Development: Windsurf (Cascade) and Claude for code assistance & pair programming
Performance: Optimized assets, aggressive caching, and selective server-side rendering

We wanted to minimise friction — not just for users, but for us as maintainers. That’s why we went with static generation instead of a full CMS or database-backed stack.

🗳️ The Challenge of Building Complex Election Projections

Devolved elections work differently to Westminster’s. There are list seats, regions, transfers, and thresholds. And each devolved region of the UK has its own unique system and quirks. That means the electoral maths gets more complex, and understanding how it all works takes a bit more digging.

For someone new-ish to politics (like me), that was confusing at first. But that helped more than anything. If something wasn’t clear to me, it probably wouldn’t be clear to many users. I believe I bring a fresh perspective from a non-expert's point of view.

So I focused on:

Keeping things visual — maps, simplified charts, seat allocation animations, hover tooltips, bold text
Removing noise — no jargon, minimal UI
Making mobile work great — because half our visitors come from phones
Collection of Preset Examples

🗺️ The Mapping Problem

One of the biggest challenges was creating accurate, understandable electoral maps.

We started with open-source SVGs of Scottish Parliament, Senedd, Northern Irish and London constituency boundary maps. I then:

Cleaned and simplified paths to reduce file size, where possible
Manually grouped elements by constituencies in archipelagos (e.g. Shetland Islands) through an id field
Removed the pre-existing fill color of all constituencies in order to dynamically fill them later by the winning party color
Dealt with quirks like City & East in London being a single constituency despite having internal divisions in some data

Rendering these maps responsively while keeping labels legible and tap targets usable on mobile required a lot of trial and error — and reminded me that data visualisation is as much UI design as it is geometry.

It can't be a technical blog without some code snippets. So here's a simple example of how we use code to color constituencies on the map based on the winning party:

// Dynamic constituency coloring based on election results
results.forEach(({ name, finalVoteShares }) => {
    const pathEl = doc.getElementById(name);
    const winner = Object.entries(finalVoteShares)
        .sort((a, b) => b[1] - a[1])[0];
    
    const fillColor = partyColors[winner[0]] || 'transparent';
    pathEl.setAttribute('fill', fillColor);
});

♻️ Integrating Projections

My partner builds projections based on previous results, polls, transfer patterns, and turnout models in spreadsheets that only make sense to him. I help make that data accessible to experts and non-experts alike.

My job is to:

Convert some of that data to lightweight JSON
Tie it to geographic regions on the map
Calculate swing and normalise results to determine constituency winners
Allocate list seats via the D'Hondt formula
Transform historic transfer patterns into a dynamic ratio to mimic Northern Irish voter behaviour
Automatically colour and annotate each region using projection values
Render fallback tables in accessible HTML for screen readers

The static content loads instantly at build time. When users want projections, the heavy electoral math happens server-side via API calls, keeping the client lightweight.

♿ Accessibility & UX

From the start, we designed the site with accessibility in mind:

Accessible HTML tables accompany interactive projections
Mobile-responsive design that works across devices
Pattern overlays for close elections (Scotland map) to help visualise nuance
Clear loading states and error messages with helpful feedback
Clean semantic HTML structure

🧠 What I’ve Learned

You don’t need to be a political expert to make a civic tool (although it really helps if you know someone who is), you just need to care about clarity and accessibility. Design and UX are just as important as policy expertise when it comes to informing the public. A good dev can help de-mystify politics by removing friction in how it’s presented.

I have also learnt that I am not a big fan of manually editing SVGs, especially for Scotland with its numerous small constituencies. What I did enjoy was pair programming with my AI code assistant. It certainly made the process faster and more efficient.

⚒️ What’s Next

Here's the direction we are headed:

We're going to build a projection for Ireland, under a different domain name of course, so keep an eye out 👀
Bespoke projections for interested groups 🗞️
Interactive simulations (e.g. playing with NI transfer patterns) ▶️
Implement a scandal variable 🌶️
Create an NI coalition simulator 🤝

If you’re a developer, designer, or data nerd curious about civic tech and educational tools, I really recommend trying to build something of your own. It’s rewarding & meaningful work and you don’t have to be an expert to make a real difference.

Thanks for reading! If you're curious about the tech behind any specific part of the site or want to collaborate, get in touch.