The zh.ch website is the most important information and service platform for the cantonal administration of Zurich. The canton of Zurich aims to provide its users with easy access to all its services. And users want to be able to interact with the canton swiftly and efficiently.
The website underwent a complete redesign. This required all stakeholders to move away from the traditional approach and step into the users’ shoes. The task list included a new concept for the content, a new layout, accessibility and device-independent access.
We were the general contractor for the new website for the canton of Zurich and worked on the project with our partners One Inside and Zeix. Our team was in charge of the concept, design, agency project management and testing.
- 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.
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.
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.
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.
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 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.
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.
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.