Public Value

Unfallprävention mit der neuen Website der BFU

Unfallprävention mit der neuen Website der BFU
Über 1 Million Nichtberufsunfälle zählt die Statistik jedes Jahr. Die gute Nachricht: Viele davon lassen sich verhindern. Wie? Das zeigt die BFU mit ihrer neuen Website.

Die Ausgangslage

Als Kompetenzzentrum forscht und berät die BFU, damit in der Schweiz weniger folgenschwere Unfälle passieren – im Strassenverkehr, zu Hause, in der Freizeit und beim Sport. Für diese Aufgaben hat sie seit 1938 einen öffentlichen Auftrag.

In über 80 Jahren Unfallprävention hat die BFU so ein schweizweit einzigartiges Angebot geschaffen: Forschungsberichte, Statistiken, Publikumsbroschüren, persönliche Beratungen, Kurse oder Sensibilisierungskampagnen – um nur wenige Beispiele zu nennen.

Seit 1997 ist die BFU mit einer Website präsent. Seitdem laufen alle Angebote online zusammen. Der letzte Relaunch fand 2013 statt. In der Zwischenzeit ist die Website organisch gewachsen – was einige Stolpersteine mit sich brachte. Auch das Design der Website war nicht mehr zeitgemäss.

Innensicht

Fokus auf die BFU und nicht die Kundenbedürfnisse.

Verwirrende Struktur

Schwerfällige Bedienung und doppelte Inhalte.

Desktop Only

Schlechte User Experience auf mobilen Geräten.

Das Projekt

Um ihrem Status als Kompetenzzentrum für Unfallprävention besser gerecht zu werden, passte die BFU 2019 ihren Markenauftritt an. Neben dem neuen Branding stellt die komplett überarbeitete Website der BFU das Kernstück des neuen Erscheinungsbildes dar. Sie wurde im November 2019 aufgeschaltet. bfu.ch ist eine Website für alle. Gleichzeitig hält die Website Fachinformationen für Expertinnen und Experten bereit.

Vorgehensweise

1. Website-Audit keyboard_arrow_down

Das Projektteam prüfte als erstes die alte Website auf Herz und Nieren. Was sind die Stärken? Wo schwächelt die Website? Die Quintessenz: Das Informationsangebot ist in der Schweiz einzigartig. Die Userinnen und User finden aber die gewünschten Inhalte nicht.

Review der alten Struktur und Navigation.
Review der alten Struktur und Navigation.

2. Content- und Zielgruppenanalyse keyboard_arrow_down

Mit der Content- und Zielgruppenanalyse tauchte das Projektteam ins Universum der Unfallprävention ein. Das Resultat dieser Expedition war ein umfassendes Verständnis der Nutzerbedürfnisse und der BFU-Themenwelt. Konkret entdeckte das Team die zusammenhängenden Informationscluster «Bereich» und «Kontext». Die beiden Cluster bildeten die Basis für die Erarbeitung der Informationsarchitektur und der Contentstrategie.

Das Universum der Unfallprävention.
Das Universum der Unfallprävention.
Die Cluster «Bereich» und «Kontext» als Basis für die Informationsarchitektur.
Die Cluster «Bereich» und «Kontext» als Basis für die Informationsarchitektur.

3. Design-Prototypen und Usertests keyboard_arrow_down

Auf dem Fundament der inhaltlichen Analysen baute das Design-Team Prototypen für die Benutzeroberfläche. Vertreterinnen und Vertreter aus allen Zielgruppen testeten im Rahmen von Design-Sprints immer wieder die Prototypen. Dank den Feedbacks von erfahrenen Verkehrsinstruktoren, frisch gebackenen Eltern, wagemutigen Wintersportlerinnen oder aufstrebenden Architekten konnte das Produkt Schritt für Schritt perfektioniert werden.

Zugangskonzept für Bevölkerung am Beispiel Eltern.
Zugangskonzept für Bevölkerung am Beispiel Eltern.
Die ersten Prototypen für die Filterseite nach Bereich und Kontext.
Die ersten Prototypen für die Filterseite nach Bereich und Kontext.
Userflow vom Dossier zum Ratgeber.
Userflow vom Dossier zum Ratgeber.

4. Visuelle Ästhetik und Corporate Design keyboard_arrow_down

Die Erarbeitung des Designs der Website war eng verknüpft mit dem Rebranding der BFU. Rebranding und Website-Relaunch verliefen parallel. Basierend auf der Contentstrategie erarbeitete die BFU in dieser Phase alle Inhalte für die neue Website. So kann die BFU in Zukunft noch klarer und effizienter mit ihren Zielgruppen kommunizieren.

Ein Bildkonzept, das auf alle Zielgruppen abgestimmt wurde.
Ein Bildkonzept, das auf alle Zielgruppen abgestimmt wurde.
Das Bildkonzept lässt den User immer tiefer in die Thematik eintauchen.
Das Bildkonzept lässt den User immer tiefer in die Thematik eintauchen.

5. Technische Umsetzung, Anbindung an CRM und Content-Migration keyboard_arrow_down

Aus dem modularen Designkonzept wurde ein Frontend Design System entwickelt, das an das flexible Umbraco CMS angebunden wurde. Das Ergebnis ist eine schnelle, flexible und skalierbare Plattform, die laufend ausgebaut werden kann. Dank dem modularen Design System verlief die Content-Migration einfach und speditiv. Es erlaubte einen flexiblen Umgang mit den verschiedenen Content-Modulen (Text, Bild, Video etc.).

Um den mobilen User noch besser zu unterstützen, wurden von allen Inhaltsseiten blitzschnelle AMP-Versionen entwickelt. Dadurch konnte die Ladezeit über die organische Suche zusätzlich verbessert werden. Eine Progressive Web App mit einer offline Version der Website rundet die mobile User Experience ab.

Die Anbindung von bfu.ch an das hauseigene CRM war ein weiterer Schwerpunkt. Eine REST-API verknüpft das CMS mit dem CRM und ermöglicht einen reibungslosen Austausch von Publikationen, Kursen, Benutzerdaten und weiteren Dokumenten.

Das Resultat

Die BFU hat ihre Website für die Userinnen und User grundlegend überarbeitet: neues Design, neue Struktur und neue Inhalte. Dabei blieb fast kein Stein auf dem anderen. Das Projektteam hat über 660 Inhaltsseiten in die Finger genommen und ins neue Konzept der Website eingepflegt.

Vereinfachte Navigation und schneller Zugang

Die Bedürfnisse der Nutzerinnen und Nutzer stehen nun im Zentrum. Mit wenigen Klicks finden sie Antworten auf praktisch alle Fragen zur Unfallprävention.

Hinter der BFU und ihren Partnern Ginetta, campfire und Noord liegen 14 Monate Projektarbeit. Die Zusammenarbeit erfolgte in agilen Sprints. Die internen und externen Anspruchsgruppen wurden konsequent und regelmässig miteinbezogen.

660 Seiten

wurden komplett übearbeitet und für SEO optimiert.

Intuitive Filter

sorgen für einen einfachen Zugang zu relevanten Informationen.

Mobile First

für einen einfachen Zugang unterwegs.

Auf der Startseite erfolgt der Zugang über einen intuitiven Filter, der die zentralen Bereiche und Kontexte der Unfallverhütung widerspiegelt. Die Besucherinnen und Besucher tauchen intuitiv in die Themenwelt ein – z.B. in den Themenbereich «Sport & Bewegung». Diese bündeln wertvolle Informationen, Ratgeber-Empfehlungen, Informationen für Fachpersonen, Kurse und Veranstaltungen bis hin zu Publikationen und praktischen Tools.

Von den Dossiers gelangen die Besucher auf die Ratgeberseiten. Hier finden sich konkrete Präventionstipps, rechtliches Hintergrundwissen, technische Erklärungen, Bilder, Videos und Inhalte für Fachpersonen. Eine praktische Inpage-Navigation ermöglicht das schnelle Navigieren durch die verschiedenen Themen.

bfu.ch bietet auch weitere Inhalte: ein Magazin mit spannenden Geschichten, die Suche für die über 1200 Ansprechpartner der BFU in der Schweiz, Hinweise zu sicheren Produkten, politische Positionen, Medienmitteilungen, Kursangebote für Fachpersonen und ein Shop mit sämtlichen Publikationen der BFU.

Aktuelles von der BFU im Magazin.
Aktuelles von der BFU im Magazin.

Login-Bereich mit neuen Services

Der Login-Bereich beinhaltet spezielle Angebote für Fachpersonen wie Sicherheitsdelegierte in Gemeinden oder Verkehrsinstruktoren der Polizei. Hier sind die für sie relevanten Informationen zusammengefasst (ähnlich einem Marktüblichen Extranet) und es lassen sich praktische, persönliche Merklisten für Dossiers, Ratgeber, Publikationen und Kurse erstellen.

Login-Bereich mit Favoriten als persönliche Merklisten.
Login-Bereich mit Favoriten als persönliche Merklisten.

Fazit

Die BFU hat mit dem gesamten Projektteam ein digitales Produkt entstehen lassen, das den Zielgruppen eine ganz neue Art bietet, relevante Inhalte zu finden. Das Resultat überzeugt auf inhaltlicher, visueller und technischer Ebene voll und ganz und stellt für die Organisation einen wichtigen Meilenstein dar.

KPI

Dass das Projekt ein Erfolg war, belegen auch einige Zahlen:

-70%

Absprungrate global

-35%

Absprungrate auf der Startseite

+41%

durchnittliche Verweildauer auf der Webseite

+32%

durchschnittliche Besuchsdauer pro Besuch

+10%

organischer Traffic nach bereits 1 Monat

Umsetzung

Verantwortlich für den neuen Internetauftritt sind seitens BFU

Urs Steiner (Projektleiter, Technische Koordination),
Benedikt Bucherer (Co-Projektleiter, Inhalte und Textarbeiten),
Jürg Beutler (Bereichsleiter Kommunikation),
Marc Bächler (Abteilungsleiter Publikationen),
Peter Schönthal (Abteilungsleiter Informatik).

Konzept und Design: Ginetta AG
Branding: Noord AG
Technische Umsetzung: Campfire GmbH