meinBerlin — Citizen Participation Platform

The Challenge

meinBerlin is the official digital participation platform of the city of Berlin, operated by Liquid Democracy e.V. It enables citizens to engage in urban planning, budgeting, and policy-making across all 12 Berlin districts. The existing platform had grown organically over years, with an aging frontend, limited notification capabilities, and no way for citizens to proactively discover relevant projects in their neighborhood. A ground-up redesign was needed — without disrupting the live platform serving thousands of active participants.

The Approach

The redesign was executed incrementally across the main application (a4-meinberlin) and the shared open-source framework adhocracy4, which powers multiple participation platforms. Work spanned the full stack: new React components replaced legacy jQuery-driven interfaces, Django models were migrated to GeoDjango for spatial queries, and a Wagtail-based CMS layer was introduced for flexible content management. Throughout the process, accessibility (WCAG compliance) and mobile responsiveness were treated as first-class concerns — every interactive component received proper ARIA attributes, semantic HTML, and keyboard navigation support.

Implementation

Kiezradar — District-Level Project Discovery: A new feature called "Kiezradar" (now "Kiezauswahl") was built from scratch, allowing citizens to create personalized search profiles based on their district, neighborhood (Kiez), and participation interests. The backend leverages GeoDjango's spatial capabilities — project, plan, and building plan models were migrated from plain JSON point fields to native GeoDjango PointField types, enabling distance-based database queries. On the frontend, a React-based interface with combobox search, polygon map boundaries (via MapLibre GL and Leaflet), and modal-based profile management was developed. Search profiles are matched against new projects via Django signals, triggering email notifications through Celery background tasks.

Notification System: A complete notification infrastructure was implemented: a Django model layer with REST API endpoints, granular per-user notification settings (including master toggles), and a React frontend with multiple feed views — interactions, followed projects, and search profile matches. Features include aggregated rating notifications, mark-as-read functionality with race condition handling, unread counters in the navigation header, and support for various event types (comments, ratings, offline events, polls, plan matches).

UI/UX Redesign: The visual overhaul touched nearly every user-facing surface: a new hero component with integrated search, redesigned project detail pages with timelines and insight statistics, overhauled module tiles with sorting and grid layouts, modernized breadcrumb navigation via a custom template tag, a restructured burger menu, and consistent alert/card/button components following BEM methodology. The rating system was rewritten in React with accessible screen-reader text and new icon sets. CMS content blocks (Wagtail) were added for teaser blocks, info bars, how-to-take-part sections, and project teasers — giving editors flexible page composition tools.

Framework Contributions (adhocracy4): Parallel work on the shared adhocracy4 framework included migrating React map components (BaseMap, AddressSearch, ChoosePointMap), building a reusable useCombobox hook, modernizing the ratings component, improving email attachment handling, and writing comprehensive Python and JavaScript tests for the new map layer.

Results

The redesign delivered a fully modernized participation platform: 120+ React components, a spatial search system covering all Berlin districts, a real-time notification pipeline, and an accessible, mobile-first interface. The component-based architecture — with shared code in adhocracy4 and project-specific extensions in meinBerlin — ensures maintainability and reusability across Liquid Democracy's portfolio of participation platforms. All interactive elements meet accessibility standards with comprehensive ARIA support, semantic HTML, and keyboard-navigable interfaces.