Client
CrowdInsights
My responsibilities
UX/UI design
Branding
Graphic design
Concept
Tools
Figma
Photoshop
Midjourney
Year
2024-2026
CrowdInsights is a scalable participation platform enabling municipalities to manage complex civic engagement. It is used to involve citizens in urban planning processes, idea submissions and public discussions.
The platform supports various qualitative and quantitative participation formats, as well as map-based interactions. Each project can be configured individually depending on the needs of the municipality. Over 100 municipalities and public organizations use the platform, involving more than 100,000 citizens and stakeholders. The platform is built as a white-label system, allowing cities to adapt branding, while maintaining a shared UX architecture.
My role as the lead designer
End-to-end product design
UX architecture and interaction patterns
User flows and high-fidelity UI design
Design system and UI kit in Figma
User testing, synthesis and iteration
Branding and graphic design
IMPACT
A fragmented system became a coherent and scalable participation platform
Over time, the platform had grown organically, leading to inconsistent interaction patterns and increasing complexity. The redesign introduced a modular architecture and unified design logic, resulting in:
Consistent usability across participation formats
Different formats now follow the same interaction logic, making participation predictable and easier to understand.Improved orientation in complex, content-heavy projects
Users can more easily identify where to participate and where to find results, even when large amounts of information are present.Reduced effort for administrators
A modular “builder logic” allows administrators to configure participation projects more efficiently, supported by reusable templates.Scalable white-label system
Municipalities can customize branding without affecting usability or interaction patterns.Accessible by design, compliant with public sector requirements (BITV 2.0)
The visual system is built on semantic color roles that meet WCAG 2.1 AA contrast requirements across light and dark mode. Typographic hierarchy and simple interaction patterns reduce cognitive load and support users with varying levels of digital literacy.
CHALLENGE 1
1 | A modular system enabling scalable and flexible participation formats (reusable interaction system)
Problem:
Each participation format (such as survey, map, consultation) followed its own interaction logic and structure. Users had to relearn how each format works, while administrators had to configure each format differently. This led to confusion, increased setup effort and made it difficult to scale the platform without building custom solutions.
Solution:
To simplify the overall product experience, I mapped all existing participation formats and broke them down into their fundamental building blocks.I created a structured overview of all recurring elements across formats (see figure), including:
question formats (input types such as multiple choice or free text)
outputs (citizen contributions)
analysis tools (tools for administrators to evaluate inputs)
outcomes (aggregated insights from the analysis)
participation results (overall results based on accumulated insights)
Each participation format, survey, map, or consultation, follows the same structural logic. Only the content changes, not the structure. This module system allows complex projects to combine different types of input within one coherent experience. A park redesign project, for example, might include marking locations on a map, answering open questions, and selecting options in a survey, all within a single project flow.
For administrators, this significantly reduces complexity while increasing flexibility:
fully custom participation formats can be built by combining modular building blocks
predefined templates cover common participation scenarios
no format needs to be learned individually, as all follow the same underlying logic
CHALLENGE 2
2 | Structuring complex participation projects around user intentions to make participation easy to find (information architecture & interaction design)
Problem:
Project pages were structured around internal administrative processes that are non-linear, vary between municipalities, and often include steps irrelevant to citizens. At the same time, projects combine large amounts of information with multiple participation formats running at different times and with different statuses. As a result, users struggled to orient themselves and identify where and when they could participate.
Solution:
The redesign replaced the process-based structure with one built around three key user intentions:
inform
participate
view results
All content is organized accordingly, aligning the platform with how users actually approach participation: understanding a project, contributing and reviewing outcomes. This structure is not only reflected in the content grouping of the page, but also mirrored in the anchor navigation, reinforcing orientation and making key actions easy to access.
Participation is treated as the central action, as it is the primary reason users visit the platform:
users can access participation via quick actions, scrolling, or anchor link navigation
anchor links remain sticky, keeping entry points visible at all times
participation becomes discoverable without users actively searching for it
A key decision was to keep the entire experience on a single page. This allows users to move directly from understanding a project to taking action, without navigating across multiple pages or process steps. Alternatives such as tabs, separate module pages, or process-based structures were explored but rejected. They either hid important content, increased navigation effort, or did not reflect how users actually behave.
CHALLENGE 3
3 | Ensuring accessibility across a broad and diverse user base (accessibility / inclusive design)
Problem:
The platform is used by a wide range of citizens with different levels of digital literacy. So, accessibility is a core requirement, especially in a public sector context.
Complex structures, unclear terminology and non-intuitive interactions created barriers, making it harder for some users to understand and engage with participation.
Solution:
The platform is designed for a broad audience with varying levels of digital experience.
Key decisions included:
High contrast and readable color usage (WCAG 2.2 AA)
Typography relies on accessible system colors, ensuring readability across themes, including dark mode.Clear typographic hierarchy and text-based content
Structured headings support scanning and screen readers, and no critical information is embedded in images.Simple, predictable interaction patterns
Interactions are designed to reduce cognitive load and support users with different levels of digital literacy.
CHALLANGE 4
4 | Enabling scalable customization through a white-label system (design system / theming architecture)
Problem:
Each municipality requires its own branding, communication style and project setup. Without a structured system, this leads to individual adaptations, inconsistencies in the user experience and increased effort for both design and development.
Solution: To support multiple municipalities with different branding requirements, the platform was built as a white-label system. In Figma, this is implemented through a token-based architecture with separate color modes per client instance. Switching between municipalities is a mode change. The components stay identical, only the token values change. Typography is managed through semantic tokens, so font changes can be made in one place and apply consistently across the entire system.
Clients can adapt:
brand colors are managed through per-client color modes, swappable without affecting usability or contrast behavior
typography can be adjusted to match city identity through semantic type tokens
visual elements such as border radius and stroke width can be adjusted through tokens, while defined relationships between them ensure consistency across all instances
At the same time, interaction patterns, component structure and system logic remain unchanged, as they are decoupled from the token layer. This allows municipalities to create a distinct visual identity while maintaining a consistent and scalable user experience across all implementations.
PROCESS
A research-driven process: from format analysis through system design to user validation
I combined system mapping and conceptual work with iterative prototyping, close collaboration with product management and engineering, and validation through user testing.
Mapping and deconstruction of existing participation formats
Breaking down all formats into recurring elements (input types, outputs, analysis tools, results) to identify patterns and define a modular systemConcept development and system architecture
Developing a unified participation logic and defining reusable templates and building blocks for both admin configuration and citizen interactionUser journey mapping Mapping user journeys across all participation modules to validate that the modular system holds up across different formats and use cases.
Wireframes
Exploring different structural approaches and interaction patterns, including navigation concepts (e.g. anchor-based vs tab-based)High-fidelity prototypes
Translating the system into clear, accessible interfaces, defining layout, hierarchy, and visual patterns for content-heavy participation pages
User testing and validation
Qualitative usability testing with citizens to evaluate navigation, participation flows and system understandingContent testing and terminology validation
Card sorting and wording tests to align labels and participation formats with user expectationsIteration and synthesis
Synthesizing and analyzing usability test results, and continuously refining the product based on user feedback, stakeholder input and product constraintsCross-functional collaboration
Close collaboration with product managers and developers to ensure feasibility and align system logic with technical implementation
TESTING
Applied a user-centered design approach through qualitative testing, synthesis and continuous iteration
Qualitative usability tests with 7 participants (ages 29–71) focused on critical user flows where friction was anticipated. 71% of tasks were completed without difficulty. Younger participants navigated quickly and intuitively, while older participants required more time and occasional support. Testing also revealed targeted friction points around terminology, content hierarchy, and participation logic, which informed the subsequent design adjustments.
Finding 1: Structure and hierarchy were unclear
Users scrolled to orient themselves before acting, which delayed participation. Project information appeared after participation options, which did not match how users naturally approached the content.
Adjustment: Content hierarchy was restructured to follow the user's mental model: understand the project first, then participate, then view results.
Finding 2: Multiple participation formats were not recognized as such
Users understood they could participate, but did not realize that a single project could contain multiple formats. The reaction: "I already did that."
Adjustment: Formats were grouped into a single survey flow. Where multiple formats run simultaneously, follow-up participation is introduced directly after completing a module.
Finding 3: Terminology caused friction, not interaction
Several issues were caused by unclear labels rather than broken interactions. Card sorting exercises revealed how users interpret terminology.
Adjustment: Labels were replaced with user-generated terminology, wording that participants themselves suggested during testing, e.g. "Offen zum Mitmachen" instead of "Aktiv."
DESIGN SYSTEM
A scalable design system as a foundation, enabling consistent white-label implementations
To support multiple municipalities, the platform is built on a modular design system with a token-based theming architecture. In Figma, separate color modes represent different client instances, allowing branding to be adapted without touching component structure or interaction logic. The system defines color tokens and theming logic, typography and layout rules, as well as reusable UI components and interaction patterns.
The system was first developed for the City of Stuttgart, which served as the primary design instance. This work is documented separately as the Stuttgart design system. The CrowdInsights default system builds on the same architecture, using Stuttgart as the foundational reference while establishing the neutral baseline from which other municipalities can derive their own instance.
