Rebranding Paul Scherrer Institut PSI

Das PSI ist das grösste Forschungsinstitut für Natur- und Ingenieurwissenschaften in der Schweiz. Es ist der zentrale Standort der grössten Forschungsanlagen der Schweiz und betreibt Spitzenforschung in den Bereichen Zukunftstechnologien, Energie und Klima, Gesundheitsinnovation und Grundlagen der Natur.

Die Forschenden des PSI präsentieren ihre Ergebnisse an internationalen Veranstaltungen und Konferenzen auf der ganzen Welt. Gleichzeitig sind sie der Treffpunkt für Koryphäen aus der akademischen und industriellen Forschung am PSI bei Konferenzen, Kolloquien, Seminaren und Workshops. In einem eigenen Besucherzentrum und bei Führungen durch die Grossforschungsanlagen wird die PSI-Forschung für die breite Öffentlichkeit zugänglich und erlebbar. Ein Dorf des Wissens für uns und unsere Zukunft.

MD Systems wurde 2018 in einer öffentlichen Ausschreibung als Dienstleister für den Relaunch von psi.ch ausgewählt und das System auf Drupal migriert.

Es folgte ein Rebranding-Projekt, das sich nicht nur auf die Website, sondern auf die gesamte Organisation erstreckte, von den Dokumentenvorlagen im Büro bis zu den Strassenschildern. Die Branding-Agentur Scholtysik wurde in der öffentlichen Ausschreibung ausgewählt, um die neue Marke zu liefern, während MD Systems für die Umsetzung verantwortlich blieb und PSI während des gesamten Prozesses beriet, von der Vorbereitung der öffentlichen Ausschreibung über die Auswahl bis hin zur Unterstützung des Übergangs zur neuen Marke auf der Website.

Eine frühzeitige Bewertung der ehrgeizigen transformativen Ziele und Ideen für das neue Projekt bestätigte, dass die solide Architektur (noch) perfekt für das Rebranding geeignet war und die Produktivität steigerte, ohne dass dem Rebranding irgendwelche Grenzen gesetzt wurden. So konnte eine komplexe Migration in ein neues System vermieden werden.

Das Ziel des Rebrandings war es, das PSI visuell von anderen Forschungs- und Entwicklungszentren in der Schweiz abzuheben. Stark, klar und in ständiger Bewegung, aber als klare Einheit. Der Unterschied und die Modernität sollten auf jeder Unterseite des PSI deutlich, emotional und konsistent sein. Die Navigation auf der Website soll intuitiv sein (für die Öffentlichkeit, Wissenschaftler, Forscher, kurz; für alle) und die Struktur soll einprägsam sein. Der wissenschaftliche Aspekt wird perfekt inszeniert und durch die präzise Sprache, maßgeschneiderte Typografie mit eigenen Schriften und hochwertige Fotografie abgerundet.

Das neue animierte Logo braucht digitale Kanäle, um das volle Erlebnis der Bewegung zu transportieren und die Website ist der beste Ort für das bewegte Logo. Daher muss die Umsetzung des neuen Logos sehr hohe Erwartungen erfüllen, wie z. B. sofortige Anzeige ohne erkennbare Verzögerung, perfekt flüssige Animation ohne Unschärfe und Vermeidung von Leistungsproblemen wie Verzögerungen oder Einfrieren von UX-Interaktionen, insbesondere auf Geräten mit geringerer Rechenleistung wie z. B. mobilen Geräten.

Um die vollen Emotionen während der Rebranding Enthüllung zu transportieren, wurde ein spezielles, hochwirksames Heldenelement mit einem bildschirmfüllenden animierten Partikelhintergrund erstellt. Diese spezielle Titelseite war 3 Monate lang aktiv und steht für zukünftige Sondersituationen, wie z. B. den Gewinn von Auszeichnungen, zur Verfügung.

Das PSI beschloss die Einrichtung von Exzellenzzentren mit Untermarken rund um seine verschiedenen und reichhaltigen Forschungsbereiche, was eine umfassende Überarbeitung der bisherigen Organisationsstrukturen einschließlich Namensänderungen zur Folge hatte. Dadurch entstanden ganz neue Inhaltswelten, die parallel zur Designimplementierung mit den neuen Inhaltsbausteinen von Grund auf neu gestaltet werden mussten. Die Website sollte so klar und strukturiert sein wie die Logos der einzelnen Zentren. Es sollte eine Einheit mit den einzelnen Zentren und deren Besonderheiten und Bedürfnissen geschaffen werden.

Der Arbeitsaufwand für die Redakteure konnte deutlich reduziert werden, indem die Umsetzung in die neue Struktur so weit wie möglich automatisiert wurde. Um die perfekte Balance zwischen Automatisierung und manueller inhaltlicher Arbeit zu finden, wurde in Zusammenarbeit mit den Redakteuren und Entwicklern ein iterativer datengetriebener Prozess implementiert.

Eine strikte Priorisierung rund um die Merkmale des Rebranding-Designs in Kombination mit der datengesteuerten Perspektive der Reichweite und Relevanz von Inhalten half dabei, sich zu fokussieren und den Druck zu reduzieren, während gleichzeitig Zeit für inhaltliche Verbesserungen mit geringerer Priorität und begrenztem Wiedererkennungswert gewonnen wurde, die viele weitere Monate nach der Veröffentlichung in Anspruch nahmen.

Die bisherige Informationsarchitektur, einschliesslich der Hauptseite, war vorrangig auf die Bedürfnisse der Forschenden ausgerichtet. Ziel des Rebrandings war es, das PSI für die Schweizer Bevölkerung bekannter und zugänglicher zu machen, ohne die Bedürfnisse der Forschenden und anderer Personengruppen zu vernachlässigen.

Eine erste Vorabversion verbesserte die Situation, indem die Bedürfnisse der Forschenden auf eine zweite Titelseite für sie verschoben wurden, um eine attraktivere Titelseite für die breite Öffentlichkeit einzuführen.

Mehrere Iterationen von nutzerzentrierter Forschung und Prototyping führten zu der Schlussfolgerung, dass eine einheitliche Informationsarchitektur sowohl den Bedürfnissen der Forscher als auch der Öffentlichkeit gerecht werden kann, indem sie die Grundsätze der progressiven Offenlegung anwendet.

Die Umsetzung dieses Paradigmenwechsels auf der gesamten Website erforderte eine vollständige Überarbeitung der gesamten Navigation sowie die Zusammenlegung und Überarbeitung der wichtigsten Landing Pages.

Schließlich zahlte sich die harte Arbeit aus, und viele Überschneidungen und bekannte Unklarheiten konnten beseitigt werden, was zu einer sauberen und einheitlichen Informationsarchitektur führte.

Das PSI hat im Rahmen seiner Ausschreibung zur Ablösung der Technologie hinter der bisherigen Website mögliche CMS-Lösungen evaluiert und sich dabei bereits für Drupal entschieden. MD Systems hat diese Ausschreibung 2018 gewonnen und die Website innerhalb eines Jahres zur vollsten Zufriedenheit gerelauncht.

Das erfolgreiche Projekt mit der daraus resultierenden verbesserten Redaktionserfahrung und großen Flexibilität bestätigte, dass Drupal die richtige Wahl für diese Website war.

Die aktuelle Plattform wurde neu bewertet, um zu prüfen, ob sie als Basis für das Rebranding-Projekt verwendet werden kann oder ob eine neue Plattform entwickelt und der Inhalt migriert werden sollte.

Wir konnten bestätigen, dass die bestehende Plattform nach wie vor eine solide Grundlage darstellte, und die starken API-Funktionen und stabilen Inhaltsstrukturen von Drupal ermöglichten es uns, den Kunden mit einem automatisierten In-Place-Transformationsprozess zu unterstützen. Dies war wesentlich schneller als eine vollständige Migration auf eine neue Website, was zu einem schnelleren Überprüfungszyklus und weniger Einschränkungen für die Redakteure während der Projektphase führte.

Das Rebranding erforderte inhaltliche Änderungen in großem Umfang. Viele öffentlich zugängliche Inhaltsseiten wurden vollständig durch neue Texte und Medieninhalte ersetzt, die neuen Übersichtsseiten des Zentrums wurden eingeführt, die Navigation vieler Unterabschnitte wurde neu gestaltet und viele der 15.000 Seiten erforderten kleinere und größere Änderungen, um neuen Designelementen und dem Gesamtlayout der Seite Rechnung zu tragen.

Gleichzeitig mussten die 200 Organisationseinheiten und Hunderte von Redakteuren weiter mit der Website arbeiten können, denn es gibt Tausende von wissenschaftlichen Inhaltsseiten von Forschern für Forscher sowie deren persönliche Forschungsprofile.

Es wurde geprüft, ob die derzeitige Website beibehalten und umgestaltet werden sollte oder ob die Inhalte auf eine neue Plattform migriert wird. Es wurde beschlossen, die Website beizubehalten, und es wurde ein hybrider Ansatz aus automatisierten Transformationsprozessen und manuellen Änderungen durch die Redakteure, während und nach dem GoLive, iterativ entwickelt.

Die Redakteure arbeiteten in der Produktionsumgebung, einige Änderungen konnten bereits veröffentlicht werden, andere wurden als neue Seiten vorbereitet. Es wurden Änderungen vorgenommen, die es erlaubten, Seiten als Ersatz für andere zu kennzeichnen, neue Namen und Pfade für die Organisationseinheiten und ihre Seiten hinzuzufügen.

Von Beginn des Projekts an wurden alle Inhalte in regelmäßigen Abständen mit einer Testumgebung synchronisiert. Dort wendeten die automatisierten Transformationsskripte die vorbereiteten Umstrukturierungen an, Seiten wurden veröffentlicht, Links aktualisiert und automatische Weiterleitungen eingerichtet, um sicherzustellen, dass alle Seiten weiterhin von externen Suchmaschinen gefunden werden. 3000 wissenschaftliche und allgemeine Nachrichtenartikel wurden neu getagt, ihr Inhalt neu strukturiert, um ihn an das neue Design anzupassen, und in verschiedene Organisationseinheiten verschoben. Verschiedene Inhaltselemente wurden maßstabsgetreu aktualisiert, z. B. wurden die zuvor meist grauen Hervorhebungselemente durch die neuen Branding-Farben ersetzt, mögliche Einleitungstexte wurden automatisch identifiziert, Medieninhalte wurden an das geänderte Layout angepasst.

Parallel dazu wurde das neue Design implementiert und sowohl mit neuen als auch mit alten Inhalten ausgiebig getestet.

Nach mehreren Monaten aktiver Entwicklung wurde die Produktionsumgebung schließlich über das verlängerte Pfingstwochenende in einen Content Freeze versetzt. Eine letzte automatisierte Transformation wurde in der Staging-Umgebung durchgeführt, gefolgt von intensiver manueller Arbeit, um die Website fertig zu stellen und für den GoLive vorzubereiten, wodurch die Ausfallzeit auf ein absolutes Minimum reduziert wurde.

Das neue Design und der neue inhaltliche Ansatz führten zu erheblich größeren Menüs, mit einer Hauptnavigation und rund 150 Links sowie mehreren großen Nebenmenüs. Hinzu kam die Anforderung, dass das Menü auf allen Seiten den aktiven Pfad anzeigen und den Zugriff prüfen muss, wenn der Besucher die verlinkten Seiten anzeigen darf.

Das animierte Logo und das bildschirmfüllende, hochwirksame Video stellten eine ganz andere Herausforderung an die Leistung dar. Wir untersuchten eine Reihe verschiedener Ansätze, darunter die direkte Animation der Elemente in der inline SVG-Datei mit JavaScript und nativem CSS. Dies war jedoch aufgrund der großen Anzahl animierter Elemente und der Dauer der Animation nicht möglich und führte zu einem Einfrieren des Browsers, einer hohen CPU-Belastung oder Verzögerungen bei Benutzerinteraktionen, insbesondere auf Geräten mit langsameren CPUs. Das Logo verwendet nun zwei kleine, stark optimierte und zwischengespeicherte Videos, die mit einem Übergang vom ursprünglichen SVG-basierten Logo zu den Videos nach und nach geladen werden. Es werden zwei Videos verwendet, da es zwei verschiedene Animationen mit einer Pause dazwischen gibt. Die Videos berücksichtigen auch die Präferenz der Barrierefreiheit für reduzierte Bewegungen.

03.06.2024 Paul Scherrer Institut PSI media release: PSI in a new design

In co-operation with branding agency Scholtysik