Website relaunch: HAMBURG WASSER creates clear, informative and accessible website

We are familiar with the requirements for barrier-free websites. We were able to prove this during the website relaunch for HAMBURG WASSER.

In joint workshops, concepts for target group analysis, information architecture and wireframes of the most important pages were constructed and then implemented in just under 2 years. The focus of the work was on digital accessibility. For optimal implementation, we worked with HAMBURG WASSER to anchor barrier-free development in the foundation – that is, in our concepts.




2 years


  • Accessible implementation
  • Agile approach
  • CI/Corporate Design
  • CX/UI


hamburg wasser technologien 1 - Medienwerft GmbH

HAMBURG WASSER closes the water cycle. Drinking water supply and wastewater disposal are combined in one company, which not only provides the highest quality for the citizens of Hamburg, but also innovative solutions for the challenges of tomorrow. HAMBURG WASSER is a solution partner on the way to becoming a blue-green-city, a city that adapts to the consequences of climate change. To this end, HAMBURG WASSER combines a wide range of services of general interest under one roof. With its two corporate units – Hamburger Wasserwerke and Hamburger Stadtentwässerung – the water utility is part of a long tradition of innovative solutions for the benefit of the Hanseatic city.

The oldest public water supply and wastewater disposal company on the European continent draws on 180 years of experience to ensure a safe water supply and wastewater disposal for all citizens at the highest level. This know-how also forms the basis for tackling new challenges, for which HAMBURG WASSER offers innovative solutions through its subsidiaries CONSULAQUA and servTEC. You can find more information about the company at


Accessibility in TYPO3

The Hamburg drinking water supplier and wastewater disposal company wanted a relaunch of its web presence.

Concept and design of the new HAMBURG WASSER appearance were technically implemented on the latest TYPO3 version. First and foremost, we focused on the barrier-free design of the frontend during the development of various wireframes. Thus, a clean HTML markup was on the agenda at the beginning in order to pay attention to the technical aspects of accessibility during the implementation.

Tools such as persona and user journey development were used to review the target group environment, the strengths and weaknesses of the previous presence, the target group selection and the UX and UI design and integrate them into the new accessibility requirements.

Do you have a similar challenge for us? Then please feel free to contact us!


Hamburg Wasser Case - EN Ipad
Barrierefreiheit Grafik 2


An intuitively structured website that can be used without restrictions

In order to make the website barrier-free as a public agency and service provider for citizens – in accordance with the provisions of the Hamburg Equal Opportunities Ordinances – HAMBURG WASSER’s website was adapted to semantic HTML. The implementation was based on Web Content Accessibility Guidelines. These describe an international standard for the barrier-free implementation of websites. Medienwerft’s goal was to achieve at least priority level AA with the relaunch.

This was achieved, among other things, by the following measures: Graphic elements are made available to the users* for the perception of the text contents. In addition, adapted user interfaces and navigation elements enable all functionalities to be accessed via keyboard input. Clear focus elements for usability are immediately apparent to users. Also essential in the implementation was the functional development of the content elements so that screen reader programs can process them.

Hamburg Wasser Case - EN Iphone 3
Hamburg Wasser Case - EN Iphone 1
Hamburg Wasser Case - EN Iphone 4
Hamburg Wasser Case - EN Iphone 2


Implementing accessibility – the barriers and challenges

One of the biggest challenges we faced during the conceptual design phase was targeting the content to all people from the Hamburg metropolitan region: a very heterogeneous target group with widely varying expectations, needs, experiences and information on the topic of water. However, with the help of several information architecture workshops, we created a content structure that would allow everyone to reach their destination and make every piece of information accessible. Creating an accessible website also further advances inclusion on the Internet.

An important part of accessibility is the use of semantic HTML in development: it provides for a clear structure with a hierarchy of headings. This structured design leads to a higher level of accessibility compliance, but it is also important for the maintenance and further development of the website. The code becomes leaner, and search engine optimization also benefits. Last but not least, the user experience is improved with clear pages that allow easy scanning.

HAMBURG WASSER is thus ahead of its time: because from 2025, it will become mandatory for companies and online stores to integrate accessibility into their websites: Electronic services will then have to be barrier-free.

The target group

Optimal information coverage for everyone

What expectations do citizens have of the website as the first point of contact for questions and concerns about water supply in their region? How can the increasing information needs of citizens be optimally met?

In addition to answering these questions, the target group is a special feature: As a water provider for the federal state of Hamburg and the surrounding area, HAMBURG WASSER counts all citizens* among its customers. It was therefore not possible to outline a clearly defined user group, but rather to address everyone – across all age groups, B2B as well as B2C.

The target groups were divided into workshops: Citizens who, for example, collect meter reading data from their water levels or are looking for information on drinking water quality or tips on saving water, or potential new employees who want to address HAMBURG WASSER as a modern company with challenging job offers.

Hamburg Wasser Case - EN Slider Desktop 3


Further agile development: Optimizations and requirements in the ongoing project with HAMBURG WASSER

The project is currently in its second phase and is being further developed in an agile manner. One example is the option to download videos in the press area. In addition, topics can now be filtered with a keyword search in the magazine area. There are always new requirements, such as updating TYPO3 or closing security gaps. The success so far, since the relaunch, could already be measured by the improved accesses to the online service, which especially relieves the customer service. We are looking forward to the further cooperation with HAMBURG WASSER and are excited about upcoming tasks and challenges that will accompany us in this project.

Hamburg Wasser Case - EN Iphone 8
Hamburg Wasser Case - EN Iphone 7
Hamburg Wasser Case - EN Iphone 9
Hamburg Wasser Case - EN Iphone 6
Hamburg Wasser Case - EN Iphone 11
Hamburg Wasser Case - EN Iphone 5
Hamburg Wasser Case - EN Iphone 10

Accessibility & contemporary design

The beauty of working with HAMBURG WASSER is that you create something that helps every citizen of Hamburg. A website that aims, among other things, to promote environmental protection and create awareness of the need to handle the valuable resource of water conscientiously – a project that motivates and with which people like to identify.

Adrian Stern
Project supervisor Medienwerft

CX Expert Support Intro Adrian


„Innovative technologies open up new potential, but they often become tomorrow’s standard. Digital brand experiences, on the other hand, are unique and can also guarantee your success in the competitive digital environment in the long term. Do you want the best of both worlds? My team and I will be happy to advise you.“

Hendrik van Laaten (3) - Innovative technologies...

Managing Director

Tel: +49 40 / 31 77 99-0