With its website, the canton of Basel-Stadt is setting a new standard for canton administration websites. Access to information is structured by subject, the content is compiled across departments, and a chatbot provides answers to key questions.
Spotlight on the users
The new website has introduced a new content structure for the canton's web pages. The website's structure now no longer mirrors the administration's internal structure; instead, it is arranged by subject, focusing on the user's perspective. For example, 'parking' includes elements from four different departments. The canton's civil engineering authority is responsible for roads and public parking spaces, the police for fines and charges, and the mobility authority for the overall transport strategy, and finally, the urban planning department gets involved in how Basel-Stadt will be organising its traffic and districts over the next twenty years. Given this, an editorial team was formed for the new website to create and update content across the board. This editorial team consisted of specialists from the various different departments and offices. The content was compiled in accordance with a clearly defined content strategy. Experts from Liip assisted the editorial team during this process and reflected user perspectives. In addition, the information architecture was designed with specialists and then thoroughly tested by users.
The website's visual design follows a consistent content-first approach. The content elements focus on the usefulness of the content and speak a consistent design language.
Alva chatbot ā a new way of accessing the website's information
As the first canton in Switzerland, Basel-Stadt offers an AI-based chatbot that uses all published information to generate useful answers. The alva chatbot has been intensively tested and optimised to ensure that the information is correct and reliable.
Performance and technology
Basel-Stadt's new website was built on a modern technology stack and uses open-source components. The CMS Drupal was used as the base. The front end is headless and was built using Nuxt and Vue. The search function is operated by Elasticsearch and provides results in the blink of an eye. Front-end performance was optimised through targeted caching.
Spotlight on the editors
A huge amount of the user experience depends on a website's content. Various measures were used to assist the editors with content creation for the project:
Content strategy and guidelines
The defined content strategy was explained in training sessions and digital guidelines. These guidelines also include information about using the system and various tips & tricks on how to create and optimise content for the web.
To simplify everyday work, the blökkli editor was created, a tool that would make working on the web pages significantly easier. With blƶkkli, content can be edited directly on the page, and then editors can see live on their smartphones how the page will look on mobile devices. In addition, comments can be added to the content created, allowing it to be gradually improved. blƶkkli is available as an open-source project and is being continually updated.
Spotlight on the canton
The new website was developed using the agile framework Scrum. The Liip team worked closely with the team from WebBS. Parts of the project were completed in two-week sprints and then tested and approved by the canton in an ongoing process. This enabled a high level of quality and ensured that the results achieved through the collaboration were visible at an early stage.
The project also has another function for the canton. The design system developed for it will also be used by other departments and services in the future, and will serve as both a design template and a code base.