Logo Orange Cube Werbeagentur
Verbraucherzentrale Bundesverband e.V.

Relaunch des Lebensmittel-Webportals der Verbraucherzentrale

Für den Verbraucherzentrale Bundesverband e.V. entwickelten wir ein umfangreiches Redesign des Verbraucherportals Lebensmittelklarheit.de. Dabei stand zunächst eine gründliche konzeptionelle Arbeit an den Strukturen des Portals im Fokus, um die komplexen Dimensionen und Möglichkeiten des Portals mit einer hohen Nutzer:innenfreundlichkeit zu kombinieren.
Kunde:

Der Verbraucherzentrale Bundesverband e. V. (vzbv) vertritt die Interessen der Verbraucher gegenüber Politik, Wirtschaft und Verwaltung und klagt Verbraucherrechte vor Gericht ein.
Im Zuge des Projekts „Klarheit und Wahrheit“ des Bundesministeriums für Ernährung und Landwirtschaft wurde 2011 das Onlineportal Lebensmittelklarheit.de als interaktive Anlaufstelle für Verbraucher installiert. Das Portal wird mit Steuergeldern finanziert und von der Verbraucherzentrale betrieben. Seit Start des Portals wurden so Beschwerden über mehr als 10.000 Produkte gesammelt.

Leistungs-Übersicht:

Aufgabe:

Entwicklung von Struktur- und Designvorschlägen für den responsiven Relaunch des Verbraucherportals „Lebensmittelklarheit“ unter Berücksichtigung der Barrierefreiheit. Klare Ausrichtung auf die Kommunikationsbedürfnisse von Verbrauchern und die intuitive Lenkung zu den gewünschten Inhalten. Integration neuer Funktionen und Erhöhung der Verweildauer auf der Seite.

Verbraucherportal mit breiter Zielgruppe

Lebensmittelklarheit Responsive Webseiten-Design
Lebensmittelklarheit Responsive Webseiten-Design

Verbraucherportal mit breiter Zielgruppe

Die Webseite Lebensmittelklarheit.de informiert verbrauchernah über die rechtlichen Grundlagen der Informationen auf Lebensmittelverpackungen, in Lebensmittel-Onlineshops und in Verkaufsflyern. Außerdem können sich Verbraucher über konkrete Produkte beschweren, deren Kennzeichnung und Aufmachung sie als missverständlich, unzureichend oder täuschend ansehen. Sie können Fragen an das Forum stellen, die individuell und auf der Webseite beantwortet werden.

Neben der primären Zielgruppe der Verbraucher stehen dabei verschiedene Zielgruppen im Fokus:

  • Hersteller und Händler von Lebensmitteln, die dazu angeregt werden sollen, ihre Produkte verbraucherfreundlich zu kennzeichnen und die Kennzeichnungskritik durch die Verbraucher zu vermeiden.
  • Gremien zur Entwicklung von Vorgaben zur Kennzeichnung oder zur Kontrolle dieser Vorgaben.
  • Journalisten, die das Thema „missverständliche oder von Verbrauchern als täuschend angesehene Produktinformationen zu Lebensmitteln“ behandeln möchten.

Funktionales Redesign

Lebensmittelklarheit Responsive auf Smartphone Webseiten-Design
Lebensmittelklarheit Responsive auf Smartphone Webseiten-Design

Funktionales Redesign

Die attraktive und zeitgemäße Gestaltung ermöglicht eine intuitive Bedienung und rückt relevante Funktionen stärker in den Fokus der Nutzer:innen. Es wurden logische Räume für weitere Funktionen geschaffen, welche im Zuge des Redesigns mit integriert werden mussten. Dabei werden nicht einfach neue Funktionen angeboten, sondern diese auf intelligente Weise als dynamisch ausgespielte Blöcke in die Seiten kontextsensitiv integriert. So gelingt eine intuitive Lenkung zu den gewünschten Inhalten und die User:innen gelangen mit möglichst wenigen Klicks an alle Informationen. Die einzelnen Seiten verwenden somit zu dynamisch miteinander kombinierbaren Bausteinen, mit denen die Redaktion verschiedene Elemente wie Bilder, Videos, Zitate flexibel anordnen kann, um die einzelnen Artikel passend zu gestalten.

Für eine verbesserte User Experience wurde unter Beachtung der Usability eine neue Navigationsstruktur entwickelt. Hierbei wurde ein besonderes Augenmerk auf die optimale Userführung gelegt und gegenüber der zuvor angewandten Lösung stark optimiert. So werden die Wege zu den Artikeln möglichst effizient gehalten und es dem Nutzer so einfach wie möglich gemacht, das passende Produkt zu finden.

 

Das Design wird wesentlich moderner sowie attraktiver und spricht neue User:innen an – ohne „Stammkunden“ zu verlieren.  Durch die neue Gestaltung integriert sich die Webseite ideal in den Markenauftritt der Verbraucherzentralen. Sämtliche Elemente wurden zudem responsiv vom Desktop über Tablet bis hin zu verschiedenen Smartphonetypen konzipiert.

Ein weiterer wichtiger Bereich bildet indessen der existierende Datenbestand, der auch in der neuen Version der Webseite beibehalten wird. Dabei ist es wichtig, dass das neue Design auch alte Inhalte attraktiv darstellt, die redaktionell noch nicht an die neuen Möglichkeiten angepasst wurden. Das Design ist infolgedessen so konzipiert, dass neue Elemente dynamisch ausgeblendet oder durch intelligente Zusatzinhalte ergänzt werden, wenn keine Inhalte verfügbar sind.

Barrierefreies Design

Barrierefreies Webdesign
Barrierefreies Webdesign

Barrierefreies Design

Um dieses umfangreiche und komplexe Angebot der Verbraucherzentrale möglichst barrierefrei bereitzustellen, galt es große Sorgfalt walten zu lassen.
Die Seite ist gemäß BITV 2.0. barrierefrei. Neben der klaren Gliederung und Kennzeichnung der Inhalte wurde besonders auf die Kombination und Kontraste bei den Farben geachtet. So können nicht nur die Schriften frei skaliert werden, sondern auch alternative Farbschemata für verschiedene Arten von Farbenblindheit ausgewählt werden. Ein eigens gestalteter Bereich für leichte Sprache wurde zudem von den individuell von uns gestalteten Piktogrammen zu allen wichtigen Bereichen und Themen unterstützt.

Wireframing und Usertests bis zum finalen Manual

Wireframing und Usertests bis zum finalen Manual

Von allen wichtigen Bereichen wurden zunächst Wireframes erstellt. Diese wurden in Abstimmung mit dem Kunden in einem von uns moderierten mehrstufigen Prozess weiter konkretisiert und verfeinert.

Nach einer ersten gestalterischen Grundgestaltung wurden von wichtigen Seiten im Anschluss interaktive Prototypen-Seiten erstellt, anhand derer die Funktionalität von allen beteiligten Parteien begutachtet werden konnten. Die optimierte Version dieser Prototypen-Seiten wurde anschließend für Usertests genutzt.

Die Ergebnisse aus den Umfragen flossen in die detaillierte Ausarbeitung aller relevanter Seiten, die dann als vermasste Vorlagen für alle Deviceklassen in einem Manual für die technische Umsetzung gesammelt wurden.

SEO vom Konzept an

SEO vom Konzept an

Neben einer technischen Umsetzung von SEO-Optionen wurden bereits bei der Struktur der Seite wichtige Ziele mit eingeplant. Die Verweildauer auf den Seiten sollte durch eine übersichtliche Bündelung aller wichtigen Inhalte zu jedem Thema erhöht werden.

Die Absprungrate wurde durch klare Inhalte und deren eindeutigere Benennung gesenkt. Verweisende Blöcke leiten zu thematisch passenden Seiten und Funktionen und erhöhen so die Gesamtverweildauer auf der Seite. Zahlreiche interaktive Elemente und dynamisch ausgespielte neue Inhalte motivieren zum erneuten Beschäftigen mit der Seite.

Überarbeitung Corporate Design

Überarbeitung Corporate Design

Das Logo wurde überarbeitet, um die USP des Portals noch präziser zu vermitteln. Dabei wurden nicht nur die Farben an das Webportal angepasst, sondern auch die Vorgaben für barrierefreie Kontraste umgesetzt. Auch die im CD-Manual verwendete Hausschrift der Verbraucherzentralen wurde integriert und das Logo – trotz zusätzlich gewünschtem Claim – noch etwas kompakter gehalten.

Weiterführender Bereich für Podcast und Mediaserver

Lebensmittelklarheit Podcast-Logo
Lebensmittelklarheit Podcast-Logo

Weiterführender Bereich für Podcast und Mediaserver

Die Verbraucherzentralen machen im Podcast von Lebensmitteklarheit.de „Klar Tisch!" mit den Tricks der Lebensmittelindustrie. Es werden Vorschriften und gesetzliche Regelungen geprüft und gezeigt, wovon sich Verbraucher:innen in die Irre geleitet fühlen und wie eine klare und verständliche Kennzeichnung auf Lebensmitteln eigentlich aussehen müsste.

Nach der erfolgreichen Gestaltung des Webportals von Lebensmittelklarheit.de für die Verbraucherzentrale, erstellten wir nun das passende Erscheinungsbild für den dazugehörigen Podcast: vom Logo, dem Konzept für die Teaser bis hin zum kompletten Medienbereich im Portal.

Wer Lust hat, kann gerne auf der Webseite oder direkt bei Apple oder bei Spotify mal reinhören!

Fazit:

Das neue Design ermöglicht es, die existierenden Inhalte zu übernehmen und mit neuen Strukturen, Navigationselementen und Inhalten zu erweitern. So werden die sehr komplexen Inhalte leichter navigierbar und pflegbar. Durch die gute Planung und Strukturierung der einzelnen Arbeitsschritte konnten wir allen Beteiligten helfen, die komplexen Projekte reibungslos und termingerecht umzusetzen und dabei die verschiedensten Wünsche zu Technik, Gestaltung, Barrierefreiheit und inhaltlicher Ausrichtung zu integrieren.

Fragen zum Projekt? Anfragen?
Unsere Ansprechpartner für Digital

In Hamburg

Tim Krüger

Weitere Projekte zum Thema Digital