Accessibility at the center – Hamburg Wasser service provider with contemporary website

The project phases and their implementation

The first phase of the website relaunch was the conception: requirements were recorded in workshops. One special feature was the target group: As a water provider for the federal state of Hamburg and the surrounding area, HAMBURG WASSER counts all citizens among its customers. Therefore, it was not possible to outline a clearly defined user group, but rather to address everyone – across all age groups, B2B as well as B2C. Medienwerft divided the target group into three categories: People 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. Potential new employees, whom HAMBURG WASSER wants to address as a modern company with challenging job offers. As well as business customers who, for example, operate a water supply in the surrounding communities and want to use the expertise of HAMBURG WASSER for the development of drainage structures.

This was followed by a deeper conception phase with the development of the information architecture. The structure of the individual page areas was developed in several workshops. Then all relevant page types were built up, and the necessary information and requirements were integrated.

In parallel, the design was developed: Hamburg Wasser’s new corporate identity had previously only been used for print products. Medienwerft now extended it for digital use on websites and smartphones, so that HAMBURG WASSER can be better perceived as a brand. To do this, the style guide for print products with colors, fonts and imagery was adapted and further developed for digital applications; fonts and sizes, for example, were optimized for digital devices and it was ensured that the contrasts were large enough. The „mobile first“ approach was followed.

Medienwerft thus conceived and designed all page types such as Start, Service, Magazine and Press and prepared them for development. A component library was used to ensure an efficient structure in TYPO3. The concept, design and development in accordance with accessibility requirements did not involve any additional work for Medienwerft, but the tests proved to be more complex, as tests were not only carried out visually, but also with a read-aloud function and exclusive use of the keyboard. The HAMBURG WASSER website was launched in November 2022.

Currently, the second phase of the project is underway, and the site continues to be built in an agile process – with optimizations and requirements that make sense but were not a priority in the first phase: For example, videos are to be downloaded in the press section, a translation service has been integrated, and topics can be filtered with a keyword search in the magazine section. HAMBURG WASSER is very satisfied with the implementation.

What the new website means for users

HAMBURG WASSER now has a modern website that loads quickly and meets the requirements of the target group. The company can communicate its brand essence in a more targeted manner and present itself as a modern and innovative employer. This makes the website an important business card for attracting applicants. The content management system makes it easy to add content and build pages. The use of the backend for editors has been greatly simplified.

The website is designed to be sustainable and allows for agile further development: New requirements can be integrated into the backend and content management without fundamental changes.

Conclusion

The new website of HAMBURG WASSER, the Hamburg-based service provider for water and wastewater, appeals to various target groups – private individuals and companies alike. It provides detailed information on water quality, environmental protection and services, but also shows the Group’s portfolio and presents it as an employer for potential new employees. The corporate identity was implemented to convey the brand essence, and the website is technically up-to-date.