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.
Figma File Structure
To support a scalable and future-proof redesign, I built a comprehensive Design System directly inside Figma, structured around modularity, multi-theming, and component reusability.
Style Guide
Token Setup
I created a token-based foundation covering:
Color tokens for platform vs. municipality theming
Typography tokens for for platform vs. municipality theming
Spacing and padding tokens for consistent rhythm
Mode tokens (dark/light mode)
Stroke and Radius tokens for consistent look and feel
This enables the product to adapt to different cities, visual identities, or seasonal campaigns — without breaking consistency.
Figma Page Setup
The entire redesign lives inside one unified Figma workspace, structured into three main chapters to keep design, logic, and implementation tightly aligned: Design System, User Flows and Screens.
Design System
Style Guide
UI Components
Page Section Components
User Flows (not yet shareable)
Screens (not yet shareable)
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.
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.
Dark Mode
Color tokens
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.
Type scale
Tokens
Because different clients use different brand styles, typography is implemented with Figma Tokens, allowing:
One component library
Multiple brand themes
Automatic type switching between CrowdInsights and other cities
Font Tokens
Imagery
The imagery system combines bold graphic compositions with color-blocked photography to create a distinct and recognizable visual language.
Graphic modules are built in brand colors, using large, confident shapes, gradients, and occasional overlays to create rhythm and energy.
Photography focuses on people and urban environments, with a strong link to participation.
Images are color-treated in the brand palette — often featuring complementary or contrasting color blocks.
All images and graphics follow one shared principle:
they should feel vivid, optimistic, and empowering.
Example of graphics and images
Components
To make the platform scalable and easy to maintain, I structured the components on two levels:
(1) by component type (atoms/molecules such as cards, buttons, inputs), and
(2) by application area (organisms/templates like surveys, project widgets, quantitative modules).
This dual structure reflects how the platform is actually used: on one side, small reusable building blocks; on the other, larger modules that admins can combine like parts of a page builder. Admins can assemble project pages, surveys, or result pages by selecting and arranging different widgets, creating flexible page layouts without losing consistency.
Components are built with flexible Component Properties, allowing admins (and designers) to switch states, show or hide content, or swap elements as needed.
I used:
Boolean properties to toggle layers (e.g. mobile/desktop layouts, optional metadata, badges, charts, supporting text).
Text properties to make titles, descriptions and labels editable directly in the instance.
Instance swap properties to switch icons or chart types without rebuilding the component.
Variant properties for core states like default/hover/active or different sizes.
Below: a sample selection of the component clusters.
Buttons, Tags, Controls
Here I collected interaction elements: inputs, toggles, tags, anchoirs and buttons. They share consistent interaction states (hover, active, error) through component properties and are themeable via variables. This cluster keeps the UI consistent while still allowing brand-specific styling.
Buttons, Tags, Controls
Card and List Items
These components form the structural backbone of many screens – from project lists to result overviews. I grouped them by function (preview cards, list rows, compact list items), not by page type, so they stay reusable across the entire platform. They work with tokens to ensure a consistent rhythm in both desktop and mobile layouts.
Cards and List Items
Quantitative Widgets
This cluster includes charts, metrics and data visualisations. I used the supporting color tokens wich are standardised across theamings. These widgets can be plugged into result pages, dashboards or project pages.
Quantitative Widgtes
Project Widgets
These larger components represent modular building blocks for project pages. They include project intro, metadata, map modules, media, timeline elements and result summaries. The idea: admins should be able to assemble a complete participation project by selecting and arranging widgets – almost like a CMS with predefined logic.
Project Widgets
Survey Widgets
Survey widgets are the core of any participation platform. In this system, they are grouped by application area rather than by atomic type, because the admin workflow depends on logical bundles — such as question tiles, input types and summary modules.
They cover both qualitative and quantitative formats.A survey is built from two parts: the question component and the answer type.
Each answer type is a modular widget that admins can freely swap — allowing them to assemble their own survey structure without touching the underlying layout or logic.
Survey Widgets