Development of the design system and content strategy

2,500 authors, 700 websites, 1 design system

The Corporate Communications department is responsible for ETH Zurich’s central communication channels, including the content management system for the websites. The stakeholders are numerous, user needs are diverse, topics from all of ETH’s research areas are relevant, and the organisation’s own expectations regarding the quality and reach of its communications are very high. In this context, ETH set itself the goal of being among the leading universities not only in research and teaching, but also in digital communication.

The challenges included:

• Over 2,500 authors contribute content to the websites in various roles.

• The web presences operate in a field of tension between a consistent design and the editorial freedom of individual authors.

• The websites are maintained by authors with very different levels of knowledge of the content management system – ranging from non-professional authors to professional communications specialists.

An approach therefore had to be defined outlining what effective further development could look like given this complex starting point. Unic analysed the existing content and processes, outlined the foundation for a content strategy, and developed a roadmap for the step-by-step further development of the system.

In 2022, we were commissioned to optimise the existing CMS without a relaunch.

The following objectives were pursued:

• Further development of ETH Zurich’s web presence

• Creation of a modern, contemporary visual identity and implementation of the further developed corporate design

• Best possible support for authors: flexibility in layout, but a focus on content

• Improved user experience for website visitors

• Establishment of a continuous web design development process

Attractive, diverse, reader-friendly: the new look of ETH Zurich

In various team constellations, Unic’s experts worked together with the specialists at ETH Zurich on the continuous improvement of the website. Classical HCD methodologies were applied, using research to test, refine or adjust the hypotheses formed. With a Scrum-based approach, new releases are delivered on an ongoing basis.

Development of the design system

Using Storybook, we built a design system in Figma and adapted the front-end code accordingly. One of its key foundations was clean responsive behaviour across all display sizes. To achieve this, we created a new grid and defined typography, spacing and related elements. All icons were replaced with components from a consistent icon set.

To meet the desire for a more colourful appearance without diluting the corporate design, we introduced a colour and interaction concept. This allows authors to assign an appropriate colour template to the pages they create.

Revision of the navigation

In the previous layout, a side column and a sub-navigation with occasionally erratic accordions distracted from the main content. We removed these and instead created improved content navigation, making it easier to find related or supplementary information. Related topics were introduced as a new component positioned above the footer. They serve as a springboard and are now highly appreciated by users.

Optimisation of page types

To enhance readability, we optimised and adapted the existing page types – for example, moving information such as contact details from the page margin to the end of the main content. This has two advantages:

• The full-width design provides greater creative freedom.

• No information disappears from view while scrolling.

The presentation is responsive and consistently designed according to a mobile-first approach.

Introduction of an improved search function

The search now offers various quick links for the most frequent queries, grouped by roles or applications. An auto-suggest function guides users to relevant pages, events or personal profiles.

The people search feature is particularly appreciated. Quick links for students (e.g. direct access to the course catalogue) and for staff (e.g. room search) are also popular.

Enhanced filters make it easier to find specific content on a department page or in a particular language.

Faster, more attractive, more efficient: www.ethz.ch

The design system, which forms the foundation of ETH Zurich’s websites and incorporates the design and front-end artefacts, provides the ETH team and its authors with a powerful basis for efficient conceptual work as well as for implementation.

It enables the team to gradually adapt the various website components, create a consistent and attractive website, and manage it efficiently.

Authors, students and teaching staff benefit from this, as do stakeholders from research, industry and business.

Through Unic’s work, ETH is now able to align its content communication more effectively with its target groups and their objectives. As a result, reach, engagement and the fulfilment of the diverse target groups’ needs have improved.