Ein flexibles Designsystem für die Stadt Zürich

Stadt Zürich

Die Website der Stadt Zürich ist die zentrale Anlaufstelle für die Bevölkerung, Wirtschaft und Politik. Nach 15 Jahren war ein Relaunch notwendig, um den veränderten Anforderungen der Nutzer:innen gerecht zu werden. Das Ziel: Informationen und Services klar und leicht zugänglich zur Verfügung stellen. Die gestalterische Grundlage für die neue Plattform und den Relaunch war das von Unic entwickelte Designsystem.

Kunde: Stadt Zürich
Kunde seit: 2009
Go-Live: Dezember 2024
Website: Stadt Zürich

153

Komponenten nach Atomic Design Prinzipien

7

Themenwelten für individuelle Anpassungen

30

Demo-Seiten als Vorlage für die Umsetzung

Dreh- und Angelpunkt der digitalen Verwaltung

Mit jährlich 26 Millionen Besuchen und 60 Millionen Seitenaufrufen ist die Webseite das zentrale Publikationsorgan der Stadtverwaltung. Unterschiedliche Zielgruppen nutzen die Plattform zur Informationsbeschaffung und für Onlinedienste. Die generelle Vorgabe für den Relaunch lautete: Einfachheit.

Um diesen Anforderungen gerecht zu werden, musste die bestehende Struktur der Webseite grundlegend überarbeitet werden.

Verständlich und barrierefrei

Mit dem Relaunch wurde das Nutzer:innenerlebnis optimiert und das neue CD/CI der Stadt Zürich integriert. Die neue Webseite richtet sich konsequent nach den Bedürfnissen der Nutzer:innen. Statt durch die Organisationseinheiten zu navigieren, erreichen sie relevante Inhalte und Services über thematische Zugänge. Das Design ist kompakt. Der Einsatz von Farben und klaren visuellen Strukturen schafft Orientierung. Wesentliche Branding-Elemente, wie das Logobanner, wurden integriert und sorgen für Wiedererkennung. Die Plattform ist barrierefrei und für die Nutzung auf allen Endgeräten optimiert. Eine Redaktion bereitet die Inhalte in klarer, verständlicher Sprache auf. Die Übersetzung ins Englische erfolgt mittels KI. Wichtige Informationen stehen künftig in leichter Sprache und Gebärdensprache zur Verfügung.

Flexibles, modulares Designsystem als Basis

Bereits vor dem Relaunch der Website begann Unic mit der Konzeption und Umsetzung eines flexiblen Designsystems für die Stadt Zürich. Dieses System bildet die Grundlage für die konsistente Gestaltung aller Webseiten und Webapplikationen der Stadtverwaltung. Im Rahmen der Neugestaltung der Hauptwebseite sorgte es für eine effiziente Umsetzung.

Das Designsystem basiert auf Figma und Storybook und umfasst:

153 Komponenten nach Atomic Design Prinzipien,
7 Themenwelten für individuelle Anpassungen,
30 Demo-Seiten als Vorlage für die Umsetzung.

Das Kernteam aus Mitarbeitenden der Stadt Zürich und Unic setzte neue und bestehende Elemente in kurzen Iterationen um. Während die Rahmenkonzepte von der Stadt erarbeitet wurden, übernahm Unic das Design und die Entwicklung des Frontends. Die enge Zusammenarbeit, das Einbinden relevanter Stakeholder und agile Prozesse ermöglichten schnelle Lösungen und effiziente Entscheidungen.

Synergien und nachhaltige Weiterentwicklung

Das Designsystem sorgt über den Relaunch hinaus für Synergien und Effizienz. Es bietet:

Konsistenz: Einheitliches Erscheinungsbild über alle Plattformen hinweg.·
Flexibilität: Neue Seiten und Funktionen können schnell integriert werden.
Barrierefreiheit: Struktur und optimierte Designs gewährleisten Zugang für alle.
Langfristige Nutzbarkeit: Effiziente Weiterentwicklung über 2025 hinaus.

Das System wird nicht nur für die Hauptwebseite genutzt, sondern auch erfolgreich bei der Umsetzung spezifischer Plattformen wie die der VBZ und des MKZ eingesetzt. Weitere Anwendungen sind bereits in Planung.

Die Zusammenarbeit mit Unic war eine Bereicherung für unseren Website-Relaunch. Ihr kreatives Screendesign und die professionelle Umsetzung der Frontend-Programmierung haben unsere Erwartungen absolut erfüllt. Dank ihres Engagements und ihrer Expertise präsentiert sich unsere Website jetzt in neuem Glanz!
Christina Stücheli, Leiterin Kommunikation | Informationsbeauftragte des Stadtrats