City of Helsinki

Client:
City of Helsinki
2019-2021

Projects:
Helsinki Design System
NewCo Helsinki website renewal
Kaavapino city planning service
Parking permit web service
Helsinki-profiili

Role:
UX & UI Designer, Concept Designer

 

 

Helsinki Design System

The project
The City of Helsinki operates hundreds of digital web services. Over time, these services had been designed independently by different branches of the organisation. This led to a fragmented user experience without a consistent look and feel that began impacting end-users in a harmful way. Following a massive, overarching brand renewal in 2017, the City needed to translate its new identity into the digital ecosystem in a holistic way. The objective of creating a city-wide Design System was to bridge this gap, provide scalable tools that enhance production quality, and significantly reduce go-to-market time for all future digital services.

My role
I worked as part of the core team responsible for creating the foundation, design architecture, and first implementations of the Helsinki Design System (HDS). My focus was on bridging the gap between brand guidelines, technology, and end-user needs.

• Craft & Research: The process included a deep-dive to research the existing digital services, legacy design versions, and industrial-standard design tools. I co-created the foundational components, design tokens, and documentation required for a system.
• Guidance & Sparring: Together with my team, we introduced the wide internal organization to the system, onboarding and helping them with any open questions.
• Processes & Future Vision: Beyond the UI components, we delivered strategic recommendations and mutual ways of working for the organization’s future, ensuring that the system remains scalable, maintainable, and highly efficient.

Why it matters
The digital ecosystem of the City of Helsinki is used daily by vast amount of city employees and citizens. Because of this, the design system directly impacts a massive scale of end-users with highly diverse needs, use cases, and technical capabilities. Building a robust, accessible foundation elevates the city’s public services to a higher level of inclusivity, efficiency, and quality.

 

 

NewCo Helsinki website renewal

The Project
NewCo Helsinki’s existing web services were outdated, lacked visual coherency, and were difficult to navigate, making essential content hard for users to find. The target for this sprint-based project was to redefine the digital website experience—creating a more structure-oriented, intuitive, and modern online environment for entrepreneurs and businesses.

My Role
In this agile, fast-paced renewal project, I worked closely with a Service Designer to rapidly transform stakeholder requirements into high-fidelity user interface concepts and layouts.

• Stakeholder Alignment & Workshops: together with my colleague, we co-facilitated a sprint workshop for internal stakeholders to map out required website improvements, content strategy, and information architecture.
• Brand Interpretation & Look & Feel: I took ownership of interpreting and applying the City of Helsinki’s established look & feel into this specific digital context. Utilizing my deep background from co-creating the city’s official design system, I ensured that the brand guidelines were seamlessly translated into high-quality digital interfaces.
• Concept Design & Creative Vision: I drove the concept design phase, translating the workshop’s strategic insights into a concrete creative vision. I defined the initial digital look & feel, visual hierarchy, and modular structure that would guide the service’s future evolution.
• UI Design & Stakeholder Presentation: I created the high-fidelity website layouts, solving previous navigation issues and ensuring the extensive business content was intuitive and fully aligned with the city’s digital design principles. I then presented the finalized concept designs to the customer, communicating the design rationale, content hierarchy, and visual decisions effectively.

Why It Matters
NewCo Helsinki provides needed support for entrepreneurs, startups, and international talent through consulting, training, and incubator programs. Their website is the main gateway to these services, making a clear and functioning digital experience essential.

Using the city’s brand guidelines as a baseline for a functional website concept ensures that the final product is user-friendly and meets business needs. With deep knowledge of the existing design system, we were able to work efficiently, avoid design mistakes, and build a rock-solid foundation for the development phase.

 

 

Kaavapino

The project
Kaavapino is an internal digital tool developed for the City of Helsinki to support the internal preparation, data management, and scheduling of detailed city planning projects. The Urban Environment Division (Kaupunkiympäristön toimiala) had developed a working Proof of Concept of the service, but it was lacking in usability and visual style. The target was to deliver a refined MVP version according to the City’s design system look and feel, while significantly enhancing the web service’s usability and interactions.

My role
Following a developed Proof of Concept (POC) phase, I partnered with a Service Designer to refine, mature, and scale the application’s user interface towards an MVP release. My task was to elevate the usability of heavy data workflows while systematically applying the city’s digital design language.

• Evolving the POC: I took ownership of the interface evolution on top of the existing developed POC. I analyzed the initial technical layouts and turned them into highly intuitive, production-ready user interface designs.
• Complex Data & Interaction Design: I focused on enhancing the usability and interaction models of complex webservice features, such as structured data input forms, dynamic timeline management views, and interactive filtering systems.
• Look & Feel Integration: I applied and interpreted the City of Helsinki’s official design system look & feel, ensuring that the tool reflects the visual standards, consistency, and accessibility of the master brand.
• Visualizing Status Overviews: I designed clear, scannable layouts for visual status overviews and dashboards, making it effortless for internal users to get an accurate, real-time snapshot of ongoing city planning projects.

Why it matters
Internal expert tools are often highly complex, but their user experience directly impacts organizational efficiency and employee well-being. Used by approximately 1,700 city planning experts, Kaavapino handles massive data workflows, including real-time progress tracking, automated document generation, and interactive data filtering.

By bridging the gap between technical database architecture and intuitive interaction design, design transforms this data-heavy application into a smooth everyday tool. Elevating Kaavapino’s usability not only accelerates internal workflows and report generation but ultimately ensures a more reliable, efficient, and transparent flow of information in shaping the future of the entire city.

 

 

Asukaspysäköintiluvat (Residential Parking Permits)

The Project
The City of Helsinki previously relied on a legacy system that did not allow citizens to purchase new residential parking permits online. The objective of this comprehensive renewal project was to replace the outdated system with a modern, user-centric digital storefront and e-commerce service, streamlining the entire permit lifecycle for both citizens and city officials.

My Role
Working at the intersection of design, business requirements, and technology, I partnered closely with a Strategic Service Designer and a Service Designer to shape the digital service concept and deliver its initial user interface designs. Our goal was to validate the core user experience and map out a solid visual foundation, which was then successfully handed over to a development team for further refinement and final MVP implementation.

• User Research & Insights: I actively participated in mapping out customer needs, user behaviors, and pain points regarding parking permits through qualitative user interviews.
• Rapid Prototyping & Testing: I designed the first interactive prototypes of the web service and the core e-commerce purchasing flow. We put these prototypes directly to the test in user testing sessions to validate our design decisions.
• Iterative UI Design & Design System: Based on user feedback, I iteratively refined the layouts and final user interfaces. I also designed the UI for the city’s internal administration tool used to manage the permits, systematically utilizing and expanding the Helsinki Design System.
• Technical Architecture Alignment: To ensure the designs were feasible, I dived into the high-level technical architecture, gaining a solid understanding of how parking permits and data are processed and managed within the backend systems.

Why It Matters
Transitioning from a legacy brick-and-mortar process to an automated digital e-commerce service drastically reduces administrative costs while significantly improving the everyday citizen experience. By involving users early through rapid prototyping and balancing the design with the technical backend constraints, we mitigated development risks. This holistic approach ensures that the final digital service is not only seamless to navigate but also technically viable and highly scalable for the city’s infrastructure.

 

 

Helsinki-profiili

The Project
The City of Helsinki previously operated with fragmented, service-specific user databases and multiple separate authentication methods. To streamline the user experience, improve data transparency, and enhance security, the city launched the Helsinki Profile (Helsinki-profiili). This centralized digital customer profile serves as the primary gateway and identity provider for approximately 100 different municipal web services. It enables citizens to manage their personal data transparently in one place, review their digital service history, and seamlessly authenticate across the city’s vast digital ecosystem.

My Role
Stepping into the project during its evolution phase, I took ownership of refining initial UI drafts from a colleague and transforming them into a comprehensive, production-ready authentication and profile management system. I collaborated tightly with the development team responsible for building the technical solution.

• Advanced Interaction & Authentication Flows: I designed detailed, end-to-end user journeys for both weak and strong authentication (integrating with the national Suomi.fi service). This required mapping out complex interaction states, edge cases, and robust error-handling mechanisms.
• Profile Management Interface: I designed the user interface for the Helsinki Profile dashboard, where citizens can securely log in, review GDPR-related data collected by the city, and update their personal profile settings.
• Ecosystem-Wide UX Architecture: My task required a holistic understanding of how a centralized login mechanism impacts hundreds of different web services, ensuring a smooth transition and friction-free user journeys across various touchpoints.
• Design System Stewardship: I systematically utilized and applied the Helsinki Design System guidelines to maintain visual cohesion and ensure the accessibility requirements of a critical public utility service were fully met.

Why It Matters
Logging in is often the most annoying part of using digital services, but it is necessary for safety and trust. Moving from old, separate databases to one shared login system makes things much easier for both citizens and the city administration.

By designing clear steps and helpful status messages before building the service, we made a complex system feel simple and user-friendly. This ensures a safe, clear, and smooth login experience for hundreds of thousands of citizens, no matter which city service they are using.

The Client
Helsinki is the capital city of Finland with close to 700000 residents. Helsinki’s strategy is to be the most functional city in the world. The digital services of the city have an impact on a very wide scale of end-users with different needs and use cases, while some of them also provide tools for the city’s customer service. Helsinki provides its residents with over 100 web services.

 

See also: