Helsinki Design System
Design system for the City of Helsinki: research, process, components, and impact across multivendor services.
Services
- UX Design
- UI Design
- Service Design
- Design System
- Frontend Development
- Documentation
Duration
January 2020–March 2022
Tools
Overview
The city of Helsinki offers hundreds or thousands of disparate digital services, from daycare applications to cultural services, public health booking to job services. Without a unified design system, each service risked looking, behaving, and functioning completely differently, leading to user confusion and inconsistent experience.
The goal: In a multivendor environment, to provide a shared toolbox and design foundation so that all services offered by the city share a consistent visual identity, accessible UI, and predictable, high-quality user experience.
Team
Laura Karhu
Project Lead (PM/PO)
Petri Lahdelma
Senior UX Designer
Roni Helppi
UX Designer
Mika Nevalainen
Senior Software Developer
Ville Miekk'oja
Freelance Consultant
Process
Discover
- Stakeholder Workshops
- Contextual Inquiry
- User Research
- User Interviews
- Benchmark Analysis
- Brand Application and Restrictions
Define
- User Personas
- Empathy Map
- User Journey Mapping
- Accessibility
- CI/CD process
- Information Architecture
- Definition of Done
Ideate
- User Flows
- Component Structures
- Accessibility and inclusivity guidelines
- Sync with stakeholders
- User Research
- Wireframes
- Prototypes
Design
- Reusable Components
- Token base
- Patterns and templates
- Accessibility Reviews
- Documentation
- Design Reviews
- Feedback Loops
- Maintenance
Discovery Process
Research and Analysis
The initial phase of the Helsinki Design System focused on establishing a deep understanding of the city's diverse digital ecosystem, service users, and organisational needs. This involved extensive stakeholder interviews across municipal departments, design and development teams, and service owners to map existing workflows, challenges, and inconsistencies in current digital services. Parallel to this, user research was conducted with Helsinki residents, including accessibility-focused studies with users of varying ages, linguistic backgrounds, and functional abilities, ensuring the system reflects the city's commitment to inclusivity and equality.
Audits of existing digital services are performed to identify fragmentation, redundant patterns, visual inconsistencies, and usability gaps. Benchmarking against other public sector design systems (such as GOV.UK and similar Nordic counterparts) helped evaluate best practices and opportunities for innovation. Technical analysis covers platform requirements, component scalability, performance considerations, and integration needs within the city's digital infrastructure.
This phase culminated in discovering core design principles, with the brand design agency Werklig, rooted in transparency, accessibility, trust, and usability, as well as identifying standardised components, interaction patterns, and visual guidelines. The insights gathered informed the foundation of HDS, ensuring it enables consistent, accessible, and user-centric digital experiences while supporting efficient collaboration across Helsinki's numerous service teams.
Post-it Findings
Benchmarking and goal-setting.
Discovery Process
Personas and Journey Mapping
Building on the insights gathered during the research phase, the Helsinki Design System Team developed a set of representative personas that reflect the diverse spectrum of people interacting with the city's digital services. These personas encapsulated varying levels of digital literacy, language preferences, accessibility needs, and life situations, such as elderly residents managing essential services, parents accessing childcare information, international newcomers navigating municipal processes and city employees operating internal systems. Each persona highlighted distinct motivations, behavioural patterns, and friction points, enabling design and development teams to ground their decisions in real-world contexts rather than assumptions.
Journey mapping was then used to visualise how these personas engage with Helsinki's digital services across different touch points and channels. From discovering a service through the city portal, to completing tasks such as discovering services, booking appointments, or accessing social services, the journeys illustrate the complete interaction flow and emotional states of users at each stage. This process uncovered usability gaps, moments of confusion and potential accessibility barriers, while also highlighting opportunities to simplify navigation, improve clarity, and reduce cognitive load.
These personas and journey maps directly informed the structure and prioritisation of HDS components and patterns. By aligning design decisions with concrete user journeys, the design system ensured that interfaces remain intuitive, inclusive, and consistent across services, supporting seamless experiences for all users regardless of their background or abilities.
Persona Creation Illustration
Journey Mapping at a Design System Workshop.
Discovery Process
Ideation and Concept Development
During the ideation and concept development phase, multidisciplinary workshops and collaborative sessions were facilitated with designers, developers, service owners, and accessibility specialists to explore how the Helsinki Design System can best support the city's wide range of digital services. These sessions focused on translating research insights and user needs into practical design system concepts, emphasizing consistency, flexibility, and long-term scalability. All participants had the chance to collaboratively help define how core elements such as typography, colour systems, layout structures, and interaction patterns should function across multiple platforms and service contexts.
Design thinking methodologies were central to this phase, with structured ideation exercises encouraging teams to challenge existing conventions and rethink how public services can be delivered digitally. Rapid concept sketching, pattern exploration, and co-creation workshops generate a diverse range of potential solutions, from modular component structures and responsive grid systems to accessible navigation patterns and inclusive content guidance. These activities allowed the team to test different visual and functional directions without committing to a single rigid approach too early.
The outcome of this phase was a clearly articulated design vision for HDS, supported by conceptual models, preliminary component frameworks, and defined design principles. These concepts established a shared understanding across teams and serve as the foundation for prototyping, ensuring the system balances aesthetic cohesion, usability, and practical implementation needs across Helsinki's digital service landscape.
Contribution Flowchart
Design Process
Low-Fidelity Wireframing
Leveraging the insights from research personas, and concept development, the Helsinki Design System team translated strategic decisions into low-fidelity wireframes that define the foundational layout and structural logic of the system. These wireframes focused on mapping core interface elements such as navigation hierarchies, content regions, component placement, and interaction zones, without the distraction of visual styling or branding details. This approach allowed the team to validate structural clarity, usability, and scalability at an early stage.
The wireframes illustrated how key HDS components and patterns function within real service contexts, including layout templates for service pages, form flows, dashboards, and navigation systems. By outlining user pathways and content prioritisation, the team ensured that layouts support clear information flow, efficient task completion, and accessibility requirements such as legibility, logical focus order and consistent interaction patterns.
These low-fidelity wireframes acted as a blueprint for both design and development teams, aligning stakeholders around shared structural standards before high-fidelity design and UI development began. They enable rapid iteration and feedback, helping to refine the system's architecture and user experience while reinforcing the principles of consistency, inclusivity, and usability across Helsinki's digital services.
Early Frontpage and Information Architecture Wireframes
Design Process
Iterative Prototyping and User Testing
High-fidelity prototypes for communicating design decisions were developed using design tools like Figma and Sketch. The prototypes showcased the app's visual design, interaction patterns and transitions. User testing sessions were conducted, allowing participants to navigate through the prototype and provide feedback on usability, clarity, and the overall user experience. Iterations and refinements were made based on the feedback received to improve design, eliminate pain points, and enhance user satisfaction.
Design Process
Continuous Delivery & Design Deliverables
The iterative component creation process within the Helsinki Design System was built on a close feedback loop between design and development, ensuring that each component evolves through real-world usage rather than theoretical perfection. Components were first conceptualised and prototyped in design tools, then progressively refined in Storybook through prop management, testing, peer reviews, and pilot implementations across selected city services. This cyclical approach allowed the team to validate usability, accessibility, and technical feasibility early, ensuring that components remain practical, adaptable, and aligned with the needs of multiple departments and service contexts.
The continuous delivery pipeline supported this iterative model, enabling the HDS team to release updates frequently and reliably. Updates were also delivered on the design front. Each new version bump consisted of deliverables: codebase in various versions, designs, assets and documentation. Components are versioned and documented in a central repository, with automated testing ensuring compliance with accessibility standards (WCAG), visual consistency, and responsive behaviour and the outcomes were reviewed by 3rd party accessibility experts regularly. Design updates and code implementations were synchronised through versioning NPM packages and shared workflows, reducing the risk of divergence between design libraries and production components. This pipeline ensured that improvements, fixes, and enhancements could be deployed without disrupting live services, reinforcing confidence in the system's stability and governance.
HDS Dev Deliverables
Several obstacles had to be addressed to make this approach successful. One key challenge was aligning cross-departmental stakeholders and overcoming e.g. inconsistent adoption practices, as different teams initially maintained their own design variations. This was solved through clear co-governance models, contribution guidelines and structured onboarding processes that encouraged teams to adopt and contribute to HDS collaboratively. Another challenge involved balancing long-term consistency with the need for rapid innovation. The team addressed this by introducing advanced version control, deprecation strategies, and experimental component phases, allowing new ideas to be tested before full integration.
Through this disciplined yet flexible approach, the Helsinki Design System team established a scalable, living system that continuously adapts to evolving service requirements while maintaining coherence, accessibility, and high design quality across Helsinki's digital ecosystem to this day.
The Helsinki Design System Components Page
Implementation for Mobile
On mobile, HDS ensures that patterns remain consistent and intuitive, regardless of screen size or context of use. Designers and developers rely on its predefined components and responsive guidelines to create interfaces that feel familiar, trustworthy, and easy to navigate on all devices, supporting users in real-life situations where clarity is essential.
Helsinki Design System mobile implementation
Helsinki Design System laptop implementation
HDS in the every day lives of the Helsinki people
The Helsinki Design System plays a foundational role when integrated into digital infrastructures, ensuring that services remain consistent and beautifully designed. Its components, accessibility guidelines, and rigorously tested patterns help maintain stability across systems where reliability is non-negotiable.
Design Process
Conclusion
The Helsinki Design System represents a comprehensive, user-centred effort to unify and elevate the quality of digital services across the City of Helsinki. Through rigorous research, collaborative ideation, wireframing and an iterative component development pipeline, HDS establishes a foundation that is both accessible and scalable. The system enables teams throughout the city to build services that are consistent, intuitive, and aligned with Helsinki's values of equality, transparency, and inclusion.