We analyzed the existing website “verpackungsregister.org”. The review revealed clear areas for improvement – particularly in terms of design, content, UX, accessibility, sustainability, and user-centricity. Based on the findings, we developed seven hypotheses to enhance user-friendliness.

We tested our user-friendliness hypotheses along the customer journey with the target audience and validated them through unmoderated online usability tests. The results showed a high level of alignment with our assumptions. This allowed us to gain a deeper understanding of user needs and define clear areas for action.

To better understand the existing content landscape, we created a content inventory including a high-level sitemap of the current structure. Independent of the design, this overview provided a clear view of all existing pages, PDFs, and explainer videos, as well as their interconnections. This laid the foundation for subsequent optimization and restructuring.

In workshops with the project team from various departments, we developed personas with different requirements, needs, mindsets, and challenges. These were based on insights from the expert review and user testing. Building on that, we created tailored user journeys for the new “verpackungsregister.org”.

Using the personas, we defined typical use cases that users navigate through on the website. We translated these into ideal click paths – complete with concrete screen states. This process resulted in detailed wireframes (see UX concept), designed to ensure clear and intuitive user guidance.

As the foundation for the new website structure, we gradually developed the sitemap and click dummy based on the target journeys. In biweekly feedback sessions with the agile ZSVR project team, we iteratively refined the concept and ensured that the structure remained consistently user-centered.

Building on the developed click paths along the user journeys, we translated the defined use cases into detailed high-fidelity wireframes. These illustrate how content, functionality, and navigation interact — clearly structured and still independent of the final design. At the end of the concept phase, we had a clickable prototype that was tested internally and served as the basis for further alignment.

As a public authority, the ZSVR is obligated to make its digital offerings accessible to all users – regardless of individual limitations. Therefore, we designed the new website to be accessible, adhering to the highest standards according to the Web Content Accessibility Guidelines (WCAG). We used high color and font contrasts to ensure good readability even for users with visual impairments, clearly recognizable and easy-to-use interactive elements, and an intuitive, logically structured navigation that is also compatible with assistive technologies such as screen readers. Already during the design process, we took technical requirements into account, including focus management, semantic structures, and scalable components.

Together with the ZSVR, we refreshed the existing corporate design—without altering its character. The color palette was largely retained but brightened and expanded for the digital space. The new palette, along with deliberate contrasts, creates clarity, better orientation, and improved accessibility. Based on the existing corporate font, we developed a typography system that enhances digital readability and structures content more hierarchically. We visually refined existing design elements as well as the icon and graphic language to establish a cohesive design language.

Based on our design refresh, we developed a look and feel for the website that reflects the ZSVR’s strategic direction – trustworthy, transparent, and service-oriented – as the central platform for information and education about recycling. The design emphasizes the ZSVR’s role as a modern digital authority and pioneer of sustainable future solutions. A key element of the new design is a flexible, modular grid system that adapts to the needs of diverse content. The focus is on a user-friendly UI that provides orientation and supports the user journeys. We prepared the screen design for handoff to development – fully documented and systematized.