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.
CLIENT
HAMBURG WASSER
PROJECT DURATION
2 years
EXPERTISE
- Accessible implementation
- Agile approach
- CI/Corporate Design
- CX/UI
TECHNOLOGIES
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 www.hamburgwasser.de.
THE TASK
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!
OUR SOLUTION
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.
THE CHALLENGE
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.
Language
Multilingualism as the key to accessibility
Overall, it is important that a website is readable in all languages of the world in order to appeal to the company’s broad user base and to promote Hamburg’s cultural diversity. Finally, a multilingual website is also an important step towards accessibility.
People with different language backgrounds and reading abilities should have equal access to information that is relevant to them. A multilingual website helps ensure that everyone has an equal opportunity to access important information, regardless of their language or culture.
For the implementation, Google Translate was connected to the website, translating the website content in seconds. The translation of a website is fully automatic, with text fragments being analyzed with the help of Google Translate and then re-integrated into the website in the desired target language. Nothing changes in the basic structure, so the website can still be used natively.
Digital CI
Corporate identity and efficient page design for strong online presence
In several workshops, the structure of the individual page areas was developed and built up accordingly into relevant page types. In parallel, the design was developed: HAMBURG WASSER’s new corporate identity had previously only been used for print products. We now extended this 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 were optimized for digital devices, for example, and it was ensured that the contrasts were large enough. All page types such as start, service, magazine and press were conceived and designed and thus prepared for development. A component library was used to ensure an efficient structure in TYPO3.
CONCLUSION
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.
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.
CONTACT
„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.“
Managing Director
HENDRIK VAN LAATEN
Tel: +49 40 / 31 77 99-0
Email: info@medienwerft.de