Wir haben die bestehende Website »verpackungsregister.org« analysiert. Der Review hat klare Optimierungspotenziale gezeigt – besonders in punkto Design, Content, UX, Barrierefreiheit, Nachhaltigkeit und Nutzer*innenzentrierung. Aus den Ergebnissen haben wir sieben Hypothesen zur Nutzer*innenfreundlichkeit abgeleitet.

Unsere Hypothesen zur Nutzer*innenfreundlichkeit entlang der Customer Journey haben wir mit der Zielgruppe überprüft und sie durch unmoderierte Online-Usability-Tests validiert. Die Ergebnisse haben hohe Übereinstimmung mit den Annahmen gezeigt. So haben wir die Bedürfnisse der Nutzer*innen besser verstanden und klare Handlungsschwerpunkte definieren können.

Um die bestehende Contentlandschaft besser zu verstehen, haben wir ein Content Inventory inklusive einer high-level Sitemap der Ist-Struktur erstellt. Losgelöst vom Design habt die Übersicht einen klaren Blick auf alle vorhandenen Seiten, PDFs und Erklärvideos sowie deren Verknüpfung geliefert. Damit haben wir die Grundlage für anschließende Optimierung und Neu-Strukturierung geschaffen.

In Workshops mit dem Projektteam aus mehreren Fachbereichen haben wir Persona mit unterschiedlichen Anforderungen, Bedürfnissen, Denkweisen und Herausforderungen entwickelt. Grundlage dafür waren die Erkenntnisse aus Expert Review und User Testing. Auf dieser Basis haben wir passgenaue User Journeys für die neue »verpackungsregister.org« entwickelt.

Mithilfe der Persona haben wir typische Anwendungsfälle definiert, die Nutzer*innen auf der Website durchlaufen. Diese Use Cases haben wir in ideale Klickpfade übersetzt – mit konkreten Screenzuständen. So sind detaillierte Wireframes (siehe UX-Konzeption) für klare, intuitive Nutzer*innenführung entstanden.

Als Grundlage für die neue Website-Struktur haben wir Sitemap und Click Dummy schrittweise auf Basis der Ziel-Journeys aufgebaut. In zweiwöchentlichen Feedbackrunden mit dem agilen ZSVR-Projektteam haben wir iterativ den Konzeptstand verfeinert und sichergestellt, dass die Struktur nutzer*innenorientiert bleibt.

Aufbauend auf den erarbeiteten Klickpfaden entlang der User Journeys haben wir die definierten Use Cases in detaillierte High-Fidelity-Wireframes überführt. Diese zeigen, wie Inhalte, Funktionen und Navigation zusammenspielen – klar strukturiert und noch losgelöst vom finalen Design. Am Ende der Konzeptionsphase ist ein klickbarer Prototyp vor uns gelegen, der intern getestet wurde und Basis für die weitere Abstimmung war.

Gemeinsam mit der ZSVR haben wir das bestehende Corporate Design erfrischt – ohne es zu verfremden. Die Farbpalette ist weitgehend erhalten geblieben, wurde aber für den digitalen Raum aufgehellt und erweitert. Die neue Palette und bewusste Kontraste schaffen Prägnanz, bessere Orientierung und höhere Barrierefreiheit. Auf Basis der vorhandenen Hausschrift haben wir ein Typografie-System entwickelt, das die digitale Lesbarkeit verbessert und Inhalte hierarchischer strukturiert. Vorhandene Gestaltungselemente sowie Icon- und Grafiksprache haben wir visuell justiert und eine einheitliche Designsprache geschaffen.

Auf Basis unseres Design-Refreshs haben wir ein Look & Feel für die Website entwickelt, das die strategische Ausrichtung der ZSVR widerspiegelt – vertrauenswürdig, transparent, serviceorientiert – als zentrale Plattform für Information und Aufklärung rund ums Recycling. Das Design unterstreicht die Rolle der ZSVR als moderne digitale Behörde und als Wegbereiterin für nachhaltige Zukunftslösungen. Zentrales Element des neuen Designs ist ein flexibles, modular aufgebautes Raster, das sich den Anforderungen unterschiedlichster Inhalte anpasst. Im Fokus steht dabei ein nutzer*innenfreundliches UI, das Orientierung bietet und die User Journeys unterstützt. Das Screendesign haben wir für die Übergabe an die Entwicklung aufbereitet – vollständig dokumentiert und systematisiert.

Als Behörde ist die ZSVR verpflichtet, ihre digitalen Angebote für alle Nutzer*innen zugänglich zu machen – unabhängig von individuellen Einschränkungen. Das neue Webdesign haben wir daher barrierefrei gestaltet und uns damit an den höchsten Anforderungen gemäß den Web Content Accessibility Guidelines (WCAG) orientiert. Wir haben hohe Farb- und Schriftkontraste für gute Lesbarkeit auch bei Sehbeeinträchtigungen verwendet, klar erkennbare und leicht bedienbare Interaktionselemente sowie eine intuitive, logisch aufgebaute Navigation, die auch für assistive Technologien wie Screenreader zugänglich ist. Bereits im Designprozess haben wir technische Anforderungen wie Fokusführung, semantische Strukturen und skalierbare Komponenten berücksichtigt.