User-centred website for the Zurich Kanton

Canton of Zurich

The Canton of Zurich has completely revised its website, zh.ch. User needs were placed in the centre of attention.

Instead of orchestrating the content based on the various organisations of the Canton of Zurich, the content was designed and created from scratch by the editorial team based on visitor needs.

One Inside realised the new Canton of Zurich website in an interdisciplinary collaboration with the Swiss agencies Unic and Zeix.

One Inside was responsible for the technical conception and realisation of both frontend and backend

Becoming user-centric

The content architecture of the website of the Canton of Zurich was previously designed according to the Canton’s organisation and reflected an internal view. 

In contrast, the new website was designed with function in focus and the aim of providing easy access to services. 

For example, a study with website users showed that users’ primary requirement for a new website was to find information quickly and easily. 

This is why the design is geared towards accessibility and a clear content structure, with a page structure that is as simple and as consistent as possible, clear and generous typography, and recognisable interaction patterns. 

In order to make this possible, a big change in the organisation in regards to managing the website was necessary.

A theme-oriented organisation was created, which enables effectively training and managing the new website. 

For the implementation and operation, around 300 employees were trained as content managers and editors. 

From a technical point of view, the new implementation should fulfil the criteria of easy maintenance and expandability of the application to a high degree.

This was achieved by tailoring state-of-the-art Adobe Experience Manager content management functions to the needs of authors.

An accessible and topic-oriented website

By taking a technical shoulder-to-shoulder view during the conception phase, challenges could be identified at an early stage.

An ideal balance between technical implementation and the requirements of the stakeholders from the Canton of Zurich could be found.

In parallel, quality requirements and technical product requirements were elaborated by means of workshops in order to define technical framework conditions at an early stage. 

Before the start of the agile development cycles, the requirements were elaborated and documented in an interdisciplinary manner.

This procedure allowed the developers to start the implementation on a solid foundation. 

The website was then built using state-of-the-art technologies.

Within AEM, modern content management and clustering options are used to support the extremely flexible and efficient creation and organisation of content. 

Workflows and content elements optimised for zh.ch guide the authors through the content creation and maintenance processes – the content management system takes care of linking and organising content using taxonomies.

The platform also allows easy integration of existing and future web services. For example, the citizens of the Canton can perform the following services easily online:

• Renewal of residence permits
• Recording of tax returns
• Finding offices of the canton incl. navigation aids

Especially in the area of information exchange, flexible and dynamically manageable forms are a core element for ease of use of the system – both on the administration and the customer side. 

The Canton developed a highly flexible solution for this.

The design of the Canton of Zurich website is accessible to everyone – be it for people with a visual impairment or with a physical disability.

The accessibility of the website has been continuously improved during the project. All interface elements are designed in a way that makes them readable and operable for impaired users.

Adobe Experience Manager

In order to create a long-term maintainable product, strict software engineering rules were initially developed in the implementation team. 

These include technologically-specific coding conventions, a development workflow based on a four-eye principle, and a component blueprint for the uniform implementation of components.

Through the consistently created component and integration tests, unexpected behavioural changes during development can be identified early on. 

In order to provide the developers with a local development environment close to the production environment, images were created based on Docker, which allowed developers to boot a local image of the production environment within minutes.

By applying state-of-the-art front-end web technologies, an appealing user experience is ensured. Thanks to the use of extensive prototyping and continuous improvement, a sustainable architecture for future author and user needs is created.

The implementation is based on the following basic requirements for web presences: 

• responsiveness, 
• performance, 
• platform independence, 
• progressive enhancement 
• and accessibility.

The solution was realised with modern web technologies and standards: Typescript, HTTP2, CSS3, HTML5.