Screenshot Mobile Phone with www.zh.ch opened

Swift and Efficient Communication

Canton of Zurich

Awards

  • Logo Best of Swiss Web 2021 Public Value Award
  • Logo Best of Swiss Web 2021 Technology Bronze Award
  • usability_css
Customer
Canton of Zurich
Customer since
2017
Go-Live
July 2020
Website
www.zh.ch
Screenshot https://www.zh.ch/de.html

17'000

fewer old pages

3000

new compact topic pages

500

services

300

editors and content managers

Achieving Goals With Human-centred Design

For the relaunch of zh.ch, we focused on the needs of the users. What is new is that all content is now structured by topic. Citizens no longer need to know which office is in charge of which topic. Improved subject filters help users find all relevant content. Information and services have been rephrased from a user perspective and are depicted in a clear and comprehensible manner.

Following the principles of human-centred design, we took an iterative approach and conducted usability tests. These provided valuable pointers regarding the structure of the contents and the navigation as early as the prototyping phase.

Screenshot Navigation https://www.zh.ch/de.html

Navigation by Topics Instead of Departments and Offices

Users of zh.ch visit the website with a specific concern in mind: They may need a new passport, have a question regarding their taxes or need to get their vehicle inspected. It is irrelevant to them which office is in charge of these topics. That is why users can now find all contents by topic instead of by office or department. Thanks to the topic-based navigation, they no longer need to research internal organisational structures to find the desired information or service.

ktzh_themen

An Iterative Path to a Structured Overview of Topics

The cantonal topics are as varied as they are numerous. How can they be displayed in a comprehensive way? We took an iterative approach: Together with customer representatives, we continually tested and improved the depiction of the topics. We added certain terms to the topics so that users would better understand what a topic encompasses. In addition, we chose a clear and concise depiction of topics – instead of a long list, the users see a limited number of tiles.

Smart Search – Easily Find What You Are Looking For

In addition, we support users with a smart search function for terms and topics, which facilitates access to all contents. Users can search for specific services and information and filter the results to get directly to the page they are looking for. The search also provides results for related terms. For instance, the search term “mfk” – the Swiss abbreviation for “vehicle inspection” – will also take you to the vehicle inspection page.

Screenshot https://www.zh.ch/de/familie/eltern-in-trennung/unterhalt-elterliche-sorge.html

And, of Course, Language

All topic pages are structured the same way. A table of contents structuring the information into sections remains visible when you scroll. It provides users with an overview and allows them to click through the page faster. But what good is a facelift with a new structure if users don’t get the message, simply because the wording is too complicated? That is why the canton rewrote all the texts. They are now easy to read and easy to understand. Language is a key factor for accessibility.

Screenshot Book voluntary car inspection https://www.zh.ch/de/mobilitaet/fahrzeuge-kontrollschilder/fahrzeugpruefungen.html#-538763814

Online Services – One Clear Structure

Online services are essential for both the canton and its residents. What is new is that all services have the same structure. But no matter how well you structure your online services, if users only notice halfway through that they don’t have an important piece of information or document needed to complete the form, they will become frustrated and may give up. To prevent this, we added certain preconditions to almost every service provided by the canton of Zurich. These preconditions are determined before every user interaction on zh.ch. Users are shown in a step-by-step module how to prepare, what the preconditions are and what needs to be done.

A consistent focus on users and their needs: the new website of the Canton of Zurich stands for modern communication with the authorities and is a milestone on the way to digital administration.

Kathrin Arioli
State Secretary Canton of Zurich
ktzh_design

A Design for Users

The new visual design was based on the needs and expectations of the users: They want easy and quick access to information. This was evident from our user research. The design does not need to be extravagant. It just needs to work. That is why we focused on accessibility and well-structured contents in our design. We want users to be able to interact with the canton without any barriers or obstacles. This was made possible with a simple and consistent page structure, a clear and generous typeset and recurring interaction patterns.

Anything but Boring

Sounds dry and boring? Not at all! The aggressive use of design elements typical for the canton such as bold headlines, the omnipresent “Züri” lion and the coloured spaces with a vibrant colour pallet increase the attractiveness of the website – even of pages with no images. With a design like that, the administration looks anything but boring, and the canton presents a consistent image both online and offline.

full_3d_ktzh

ZH.CH for All

The website of the canton of Zurich wants and needs to be accessible for all. To ensure this is the case, the “Access for all” foundation was involved in the redesign from the very beginning. All interface elements of the new layout were designed in a way that users with physical or intellectual disabilities would also be able to read and use them. We continually improved the accessibility of the website throughout the project in an interdisciplinary collaboration between designers, developers and test users from these communities.

More about accessibility

We were very impressed by the interdisciplinary cooperation of the three participating agencies Unic, One Inside and Zeix.

Thomas Weiss
Project Manager Canton of Zurich

An Implementation That Meets Many Needs

The implementation of zh.ch was geared towards the standard requirements for websites: Responsiveness, performance, platform independence, iterative improvement and accessibility. The solution was implemented using modern web technologies and standards: Typescript, HTTP2, CSS3 and HTML5. By using the Adobe Experience Manager as a content management system, authors can enter, edit and publish content quickly, easily and intuitively. More than 300 authors work to create and maintain the website. Technical and content guidelines were implemented to support them in this process. These will ensure that zh.ch remains consistent in terms of both content and structure.

Contact for your Digital Solution

Book an appointment

Are you keen to talk about your next project? We will be happy exchange ideas with you.

Melanie Klühe
Melanie Klühe
Stefanie Berger
Stefanie Berger
Philippe Surber
Philippe Surber
Stephan Handschin
Stephan Handschin

Contact for your Digital Solution with Unic

Book an appointment

Are you keen too discuss your digital tasks with us? We would be happy to exchange ideas with you.

Jörg Nölke
Gerrit Taaks
Gerrit Taaks