Entwicklung Designsystem und Content Strategie

2’500 Autor:innen, 700 Websites, 1 Designsystem

Die Hochschulkommunikation verantwortet die zentralen Kommunikationskanäle der ETH Zürich, dazu gehört auch das Content Management System für die Webseiten. Die Stakeholder sind zahlreich, die Benutzerbedürfnisse divers, Themen aus allen Forschungsbereichen der ETH sind relevant und der eigene Anspruch an die Qualität der Kommunikation und die Reichweite sehr hoch. In diesem Kontext hatte sich die ETH zum Ziel gesetzt, nicht nur in Forschung und Lehre zu den führenden Hochschulen zu zählen, sondern auch in der digitalen Kommunikation.

Die Herausforderungen dabei sind:

• Über 2’500 Autor:innen tragen in unterschiedlichen Rollen Inhalte zu den Webseiten bei.

• Die Webauftritte bewegen sich im Spannungsfeld zwischen einem einheitlichen Design und den redaktionellen Freiheiten der einzelnen Autor:innen.

• Die Webseiten werden von Autor:innen mit unterschiedlichstem Wissen zum Content Management System gepflegt: von Laien-Autor:innen bis hin zu professionellen Kommunikationsfachpersonen.

Ein Vorgehen war zu definieren, wie eine effektive Weiterentwicklung mit dieser komplexen Ausgangslage aussehen könnte. Unic hat die bestehenden Inhalte und Prozesse analysiert, die Basis für eine Content Strategie skizziert und eine Roadmap entwickelt für die schrittweise Weiterentwicklung des Systems.

2022 erhielten wir dann den Auftrag, das bestehende CMS ohne Relaunch zu optimieren.

Folgende Ziele wurden angestrebt:

• Weiterentwicklung des Webauftritts der ETH Zürich

• Schaffung eines modernen, zeitgemässen Erscheinungsbildes und Umsetzung des weiterentwickelten Corporate Design

• Bestmögliche Unterstützung für Autor:innen: Flexibilität bei der Gestaltung, aber Fokus auf den Inhalt

• Bessere User Experience für die Webseitenbesucher

• Etablierung eines kontinuierlichen Weiterentwicklungsprozesses für das Web-Design

Attraktiv, vielfältig, lesefreundlich: der neue Auftritt der ETH ZH

In unterschiedlichen Team-Konstellationen arbeiteten die Expert:innen von Unic mit den Fachleuten der ETH Zürich an der kontinuierlichen Verbesserung der Webseite. Angewandt wurden klassische HCD-Methodiken, wobei wir mittels Research getroffene Hypothesen prüfen, verfeinern oder anpassen. Mit einem auf Scrum basierten Vorgehen werden so kontinuierlich neue Releases ausgeliefert.

Entwicklung Design-System

Anhand von Storybook haben wir in Figma ein Design-System aufgebaut und den Frontend-Code entsprechend angepasst. Zu dessen Grundlagen gehörte insbesondere ein sauberes Responsive-Verhalten für alle Displaygrössen. Wir haben dafür ein neues Grid geschaffen und Typografie, Abstände usw. definiert. Alle Icons wurden durch Elemente aus einem stringenten Icon-Set ausgetauscht.

Um den Wunsch nach einem bunteren Erscheinungsbild zu entsprechen und dennoch das Corporate Design nicht zu verwässern, haben wir ein Farb- und Interaktionskonzept eingeführt. Damit können Autor:innen den von ihnen gestalteten Seite ein passendes Farbtemplate zuzuweisen.

Überarbeiten der Navigation

Im alten Layout lenkten eine Seitenspalte sowie eine Unternavigation mit teilweise erratischen Akkordeons vom Hauptinhalt ab. Wir haben diese entfernt und stattdessen eine bessere Contentnavigation geschaffen: Damit lassen sich weiterführende oder ergänzende Inhalte leicht finden. Verwandte Themen haben wir zudem als neue Komponente vor den Footer gesetzt. Sie dienen als Sprungbrett und werden von den Nutzer:innen inzwischen sehr geschätzt.

Optimierung der Seitentypen

Um die Lesefreundlichkeit zu steigern, haben wir die bestehenden Seitentypen optimiert und angepasst – beispielsweise Angaben wie Kontaktdaten vom Seitenrand entfernt und ans Ende des eigentlichen Inhalts verschoben. Das hat zwei Vorteile:

• Das randabfallende Design gibt uns mehr Gestaltungsfreiraum.

• Durch Scrollen werden keine Informationen mehr unsichtbar.

Die Darstellung ist responsive und konsequent auf Mobile First ausgerichtet.

Einführung einer verbesserten Suche

Die Suche bietet neu diverse Kurzlinks für die häufigsten Suchanfragen, gruppiert nach Rollen oder Applikationen. Eine Auto-Suggest-Funktion führt die User zu den relevanten Seiten, Events oder Personendetails.

Besonders geschätzt wird die Personensuche,. Beliebt sind aber auch Quicklinks für Studierende (z. Bsp. direkt zum Vorlesungsverzeichnis) oder für Mitarbeitende (z. Bsp. Raumsuche).

Verbesserte Filter finden spezifische Inhalte auf einer Departementsseite oder in einer bestimmten Sprache.

Schneller, schöner, effizienter: www.ethz.ch

Das Designsystem, das als Grundlage der Webseiten der ETH Zürich die Design- und Frontendartefakte beinhaltet, gibt dem ETH-Team und den Autor:innen eine leistungsstarke Grundlage für die effiziente konzeptuelle Arbeit sowie für die Umsetzung an die Hand.

Es erlaubt dem Team, die verschiedenen Komponenten der Webseite nach und nach anzupassen, eine einheitliche und attraktive Website zu schaffen und diese effizient zu bewirtschaften.

Davon profitieren die Autor:innen, die Studierenden und Lehrenden ebenso wie die Stakeholder aus Forschung, Industrie und Wirtschaft.

Durch die Arbeit von Unic kann die ETH die Kommunikation von Inhalten besser auf die Zielgruppen und deren Ziele abstimmen. Dadurch hat sich die Reichweite, das Engagement und die Bedürfnisbefriedigung der unterschiedlichen Zielgruppen verbessert.