BACK

Crowd-Insights Design System

Work in progress…

CrowdInsights participation platform is designed to make collaboration between people and institutions simple, inclusive, and visually consistent. With a clear, accessible interface, it helps create digital experiences that feel intuitive and animating.

The full platform redesign will launch in February, which is why I can’t share product screens yet. Until then, I’m sharing selected insights from the design system.

About
CrowdInsights

CrowdInsights is a digital participation platform that empowers citizens, municipalities, and organizations to collaborate more transparently and efficiently. The platform provides tools for surveys, consultations, idea collections, maps, budgeting and decision-making processes, all in one place. Its goal is to make participation accessible for everyone, regardless of technical experience, and to turn complex civic processes into clear, guided interactions.

My Role

I led the redesign of the platform on both a brand and UX level.
Over the years, the product had grown organically — each participation module had its own flow, its own logic, and its own interaction patterns. My task was to simplify the platform’s architecture and create a coherent experience for administrators and citizens alike.

I worked on:

UX Concept – reducing complexity, unifying flows, and creating a clearer experience while covering the broad range of customer requirements.
User Flows & Core Screen Design – translating the new logic into intuitive UI patterns.
User Testing (including A/B tests) – validating usability, naming, and navigation improvements with real users.
Visual Redesign – updating the brand and UI for clarity, accessibility, and consistency.
Design System & UI Kit – I built the complete UI Kit in Figma, including typography, color system, components, layout rules, and interaction patterns for a scalable and consistent product experience.

Product Architecture

To simplify the overall product experience, I mapped all existing participation formats and broke them down into their fundamental building blocks. Previously, every tool (e.g., survey, map, consultation) had its own unique flow, which created confusion for admins and made the platform harder to scale.

I created an overview of all recurring elements used in participation projects, such as:

Question formats (input types)
Outputs for citizens
Analysis tools
Analysis outputs
Participation results (outcomes)

Based on this analysis, I introduced a template logic:

Every participation module, whether it’s a survey, map, or consultation, follows the same structural template and contains the same element categories. Only the content changes, not the logic.

This became the foundation for a unified and simplified participation architecture.
Admins now understand participation formats faster, can switch between modules without relearning, and can build participation projects more efficiently.

Based on this unified logic, I created user journeys that showed how administrators and citizens move through each participation module, from setup, to interaction, to results. These journeys helped validate the new structure, identify friction points, and ensure that every participation format feels consistent and easy to understand.

Color

Color theme

Because multiple cities and organizations use the platform, the color system must be adaptable.
CrowdInsights itself uses a more neutral palette, while certain cities prefer a bolder, more expressive look.
To support both needs, the color systems are separated at token level.

Customer specific colors

Color tokens

Color categories:

Primary Color (Brand)
Primary brand color — used prominently in headers, highlights, and key visual identity elements.
Secondary Colors (Brand)
Reserved exclusively for buttons and interactive elements.This makes calls-to-action easy to recognize, regardless of theme or brand variation.
Accent Colors (Brand)
They support the brand. Used in illustrations, icons, and visual storytelling to make the interface playful and engaging.
Supporting Colors
Used across all platforms for statistics, tags, and status indicators.These remain the same for every city, ensuring consistency in data display.

Dark Mode

Color tokens

Accessibility

Brand, secondary, accent, and supporting colors are not used as typography colors, to guarantee readable contrast.

Typography uses only system colors that meet WCAG AA contrast requirements.
In Dark Mode, black and white are inverted and system colors are adjusted — all other palettes remain unchanged.

Typefaces

Type scale

The typography is modern, bold, and expressive to create a contemporary look and a strong identity.Large, bold headlines support a fresh, modern appearance, while body text remains clean and highly legible.
I started with a Major Third scale, then optimized the sizes visually to improve hierarchy and readability.