Rebranding Paul Scherrer Institute PSI

The PSI is the largest research institute for natural sciences and engineering in Switzerland. It is the central location of Switzerland's largest research facilities and conducts cutting-edge research in the areas of future technologies, energy and climate, health innovation and the fundamentals of nature.

The researchers from PSI present their results at international events and conferences all over the world. At the same time they are the meeting point for luminaries from academic and industrial research at PSI at conferences, colloquia, seminars and workshops. PSI research can be accessed and experienced by the general public in its own visitor center and through guided tours of the large research facilities. A village of knowledge for us and our future.

MD Systems was chosen in 2018 in a public tender as a service provider for the relaunch of psi.ch and the system was migrated to Drupal.

This was followed up by a rebranding project that did not only cover the website but the whole organization, from office document templates to street signs. The branding agency Scholtysik was chosen in the public tender to provide the new brand while MD Systems remained responsible for the implementation and also consulted PSI during the whole process, from preparing the public tender, selection and supporting the transition to the new brand on the website.

An early assessment of the ambitious transformative goals and ideas for the new project confirmed that the solid architecture (still) was a perfect fit for the rebranding and a productivity enabler without defining any limitations for the rebranding. Thus a complex migration into a new system could be avoided.

The goal of the rebranding was to visually distinguish the PSI from other research and development centers in Switzerland. Strong, clear and in permanent movement but as a clear unit. The difference and modernity should be distinct, emotional and consistent on every subpage of the PSI. The navigation on the website should be intuitive (for the public,scientists, researchers, short; for everyone) and the structure should be memorable. The scientific aspect is perfectly staged and rounded off by the precise language, customiced typography with own fonts and high-quality photography.

The new animated logo needs digital channels to transport the full experience of the movement and the website is the best spot for the moving logo.. Therefore the implementation of the new logo has to fulfill very high expectations such as instant display without any recognizable delay, perfectly fluid animation without blurryness and avoid causing performance issues such as lagging or freezing UX interactions, especially on devices with lower processing power such as mobile devices.

To transport the full emotions during the rebranding reveal, a special high impact hero element with a full screen animated particle background was created. This special front page was active for 3 months and is available for future special situations such as winning awards.

The PSI decided to establish centers of excellence with sub-brands around their various and rich research domains, affecting a major overhaul of previous organizational structures including name changes. This created whole new worlds of content that needed to be crafted from scratch with the new content building blocks in parallel to the design implementation. The website should be as clear and structured as the logos of the individual centers. Creating a unity with all the individual centers and their characteristics and needs. 

The editor workload could be significantly reduced with automating the transformation as much as possible into the new structure. To find the perfect balance between automation and manual content work, an iterative data driven process was implemented in collaboration with the editors and developers.

A strict prioritisation around the characteristics of the rebranding design perception combined with the data driven perspective of content reach and relevancy helped to focus and reduce pressure while winning time for lower priority content improvements with limited recognition that took many more months beyond the release.

The previous information architecture, including the frontpage, prioritised the needs of researchers. The goal of the rebranding was to make the PSI more recognised and accessible for the public swiss population, without jeopardizing the needs of the researchers and other diverse personas.

A first pre-project release improved the situation, by moving the researcher needs to a second frontpage for them, to roll out a more attractive front page for the general public.

Multiple iterations of user centric research and prototyping led to the conclusion that a unified information architecture could adress both the needs for researchers and the public, by applying principles of progressive disclosure.

Rolling out this paradigm shift across the whole website required a complete overhaul of all navigation and merging and rethinking of key landing pages.

Finally, the hard work paid off and a lot of duplications and known confusions could be removed, resulting in a clean and consistent information architecture.

PSI evaluated possible CMS solutions as part of its tender to replace the technology behind the previous website and already decided on Drupal as part of that process. MD Systems won that tender in 2018 and relaunched the website within a year to the fullest satisfaction.

The successful project with resulting improved editor experience and great flexibility confirmed that Drupal was the right choice for this website.

The current platform was re-assessed to verify whether it could be used as the basis for the rebranding project or if a new platform should be developed and the content migrated.

We were able to confirm that the existing platform was still a solid foundation and the strong API capabilities and stable content structures of Drupal allowed us to support the client with an automated in-place transformation process. This was considerably faster than a complete migration into a new site, resulting in a faster review cycle and fewer constraints for editors during the project phase.

The rebranding required content changes at a large scale. Many public-facing content pages were completely replaced with new text and media assets, the new center overview pages were introduced, navigations of many sub sections were redone and many of 15’000 pages required smaller and larger changes to account for new design elements and the overall layout of the page.

At the same time, the 200 organization units and hundreds of editors needed to be able to continue working with the website, there are thousands of scientific content pages by researchers for researchers as well as their personal research profiles.

It was evaluated whether or not the current website would be kept and transformed or if the content would be migrated to a new platform. It was decided to keep the website and a hybrid approach of automated transformation processes and manual changes by editors, before, during and after the GoLive, was iteratively developed.

Editors worked on the production environment, some changes could already be published, others were prepared as new pages. Changes were deployed that allowed to flag pages as replacements of others, new names and paths could be added for the organization units and their pages.

In frequent intervals, from the start of the project, all content was synchronized to a test environment. There, the automated transformation scripts applied the prepared reorganizations, pages were published, links updated and automated redirects set up to ensure that all pages were still found by external search engines. 3000 scientific and general news articles were retagged, their content restructured to adapt it to the new design and moved into different organization units. Various content elements were updated at scale, such as replacing the previous mostly grey highlight elements with the new branding colors, possible intro texts were automatically identified, media assets adjusted to the layout changes.

In parallel, the new design was implemented and fully tested against both new and old content. 

Eventually, after several months of active development, the production environment entered a content freeze over the extended pentecost weekend. One final automated transformation was run on the staging environment, followed by intense manual work to finalize and prepare the website for the GoLive, reducing the downtime to an absolute minimum. 

The new design and approach to content resulted in considerably larger menus, with a main navigation with around 150 links as well as several large secondary menus. That was combined with the requirement to have the menu show the active path on all pages and access checks if the visitor is allowed to view the linked pages. 

The animated logo and full screen high impact video was a completely different performance challenge. We investigated a number of different approaches, including directly animating the elements in the inlined SVG file with JavaScript and native CSS. This was however not feasible due to the very large amount of animated elements and the duration of the animation and resulted in browser freezes, high CPU load or lagging in user interactions especially on devices with slower CPUs. The logo now uses two small, heavily optimized and cached videos that are lazily loaded with a transition from the initial SVG based logo to the videos. Two videos are used as there are two different animations with a break in between. The videos also respect the accessibility preference for reduced motion.

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

In co-operation with branding agency Scholtysik