Neue Website für das B – mit emotionalem Storytelling, CMS und Barrierefreiheit
xeit hat die Website b-bern.ch einem Relaunch unterzogen und im Februar 2024 erfolgreich aufgeschaltet. Das B (Blinden- und Behindertenzentrum Bern) ist das Kompetenzzentrum für sehbehinderte, blinde und mehrfachbehinderte Menschen. Es bietet verschiedene Dienstleistungen wie Seh- und Sozialberatung oder angepasste Arbeits-, Ausbildungs- und Wohnplätze an. Diese Angebote sind nun auf der neuen Website für Betroffene, Angehörige und verschiedene Zielgruppen noch übersichtlicher und leichter zugänglich dargestellt.
Ausgangslage
Die bisherige Website des B wies einige Mängel wie eine suboptimale User Experience (UX) und wenig ansprechende Einstiegsseiten aus. Das Design war von einem starren Raster geprägt und litt aufgrund der begrenzten Möglichkeiten des Content Management Systems (CMS) unter Defiziten bei der Suchmaschinenoptimierung (SEO). Die Inhalte waren knapp, aber textlastig und es fehlten Informationen in einfacher Sprache respektive eine zielgruppengerechte Ansprache. Es bestand der Wunsch, die Website optisch ansprechender und umfassend barrierefrei zu gestalten. Die Inhalte sollten erneuert werden, so dass das B mit einer modernen Website auftreten kann, die das Image und die Corporate Identity unterstützt.
«Für unseren Relaunch suchten wir einen Partner, der uns nebst der Entwicklung der Website auch konzeptionell beim Ausbau des Contents und Aufbau des Employer Brandings unterstützt. Ein besonderes Augenmerk lag dabei auf der Barrierefreiheit, insbesondere der guten Lesbarkeit und fehlerfreien sowie einfacher Navigation mit Screenreader. Das B ist sehr breit aufgestellt und muss daher den Ansprüchen sehr unterschiedlicher Zielgruppen gerecht werden. Bei der Entwicklung der Website haben wir uns am WCAG 2.1-Standard (AA+) orientiert und regelmässig mit einzelnen Zielgruppen getestet.»
Ziele
Im Rahmen der Neukonzeption haben wir gemeinsam mit dem B verschiedene verbesserungswürdige Aspekte zur Stärkung der Kommunikation und Positionierung identifiziert. Wir haben uns zum Ziel gesetzt, eine klare Bildsprache und Positionierung des B als Kompetenzzentrum für unterschiedliche Zielgruppen zu etablieren. Darüber hinaus wollten wir die Kommunikation des breiten Leistungsspektrums des B optimieren, um die Vielfalt der Angebote für die unterschiedlichen Zielgruppen deutlich zu machen.
Besonders wichtig war es, das B als interessanten Arbeitgeber zu positionieren und ein effektives Employer Branding aufzubauen. Dazu sollte die Leadgenerierung durch attraktive Landingpages und einfache Kontaktmöglichkeiten verbessert und mittels entsprechenden Tracking mess- und optimierbar gemacht werden.
Ein weiteres wichtiges Ziel war es, allen Zielgruppen gerecht zu werden, insbesondere der relevanten Zielgruppe der Menschen mit Beeinträchtigungen. Wir konzentrierten uns auf die Umsetzung einer für sie zugänglichen und barrierefreien Website in einfacher Sprache.
Darüber hinaus wollten wir die Grundlage für weitere Marketingaktivitäten schaffen, wie z. B. Marketing Automation zur Effizienzsteigerung. Nicht zuletzt haben wir uns zum Ziel gesetzt, das Design attraktiver zu gestalten, um die User Experience zu verbessern und das B als modernes und professionelles Kompetenzzentrum zu präsentieren.
Umsetzung und Vorgehen
xeit bietet alles aus einer Hand: von der UX-Forschung über die Keyword-Strategie bis hin zu Design und Content-Erstellung. Dazu kam die Beratung zur Social-Media-Strategie sowie die Unterstützung bei der Einrichtung einer Newsletter Lösung und den ersten Schritten in der Marketing-Automation. Darüber hinaus stellten wir umfangreiche Reporting- und Monitoring-Tools sowie ein individuell angepasstes Tracking zur Verfügung.
Wir begannen mit der Konzeption und Workshops, gefolgt von der Erstellung von Wireframes und dem Design. Parallel zur Programmierung erstellten wir die Inhalte gemäss den Wünschen des B.
Danach folgte die Testphase. Das heisst, wir von xeit, das B sowie Menschen mit Beeinträchtigungen haben die Website getestet und Änderungswünsche eingebracht. Diese haben wir schliesslich final umgesetzt. Besonderes Augenmerk haben wir dabei auf die Barrierefreiheit und die bestmögliche User Experience gelegt. Die nachfolgenden Aspekte waren uns besonders wichtig.
Zielgruppengerechte Ansprache und leichtere Zugänglichkeit der Inhalte
Eine zielgruppengerechte Ansprache haben wir bereits in der Informationsarchitektur berücksichtigt und frühzeitig geplant. Wir haben uns an die WCAG 2.2-Richtlinien gehalten, welche die Zugänglichkeit von Webinhalten verbessern. Zudem haben wir den meisten Content in einfacher Sprache verfasst und eine optimale Websitenavigation integriert.
Bei der Gestaltung haben wir ausreichende Farbkontraste eingehalten und ein möglichst einfaches Design gestaltet. Zu den Features gehören ein Kontrastmodus, die Möglichkeit, Animationen auszuschalten, die Anpassung der Schriftgrösse und ein Vorlese-Plugin.
Die Tests haben wir mit Mitarbeitern und Bewohnern durchgeführt, wobei sowohl blinde als auch sehende Personen einbezogen wurden. Dabei kamen Screenreader wie Jaws und iOS Apple Voice Over zum Einsatz. Zudem haben wir das Testing mit Tools wie axe Dev Tools und Google Lighthouse durchgeführt, ergänzt durch manuelles Testing unserer Experten.
Design für einen verbesserten Imageaufbau
Für ein stärkeres emotionales Storytelling und verbesserten Imageaufbau haben wir auf ein Design mit mehr und grösseren Bildern gesetzt. In enger Zusammenarbeit mit dem Marketing des B wurde die Bildwelt neu inszeniert, um eine attraktivere Wirkung zu erzielen. Dieser Screenshot der Website zeigt das neue Design- und Bildkonzept.
Aufbau der Website mit WordPress Block Editor
Durch den modularen Aufbau im Blockeditor ist es einfach, neue Seiten anzulegen und Elemente beliebig zu kombinieren. Dies ermöglicht eine Unabhängigkeit von Agenturen und erleichtert das Befüllen mit sehr unterschiedlichem Content. Zusätzlich werden wiederverwendbare Blöcke und Vorlagen eingesetzt, um Effizienz und Konsistenz zu gewährleisten.
Neue Möglichkeiten für Spendengewinnung: Online Fundraising
Teil des Relaunches war die Integration von RaiseNow. Durch diese Integration kann das B nun einfach online Spenden sammeln.
Optimierung für Suchmaschinen: SEO in allen Phasen des Projekts
Von Anfang an haben wir uns auf eine verbesserte SEO konzentriert, beginnend mit der Erstellung der Informationsarchitektur und der Keyword- und Begriffsrecherche. Die Keyword-Strategie diente als Grundlage für die Content-Erstellung und weitere Optimierungen. Zusätzlich haben wir Redirects implementiert und auf ein gutes technisches SEO geachtet, um die Auffindbarkeit der Website weiter zu verbessern.
Page Speed Optimierung
Für das B war eine hohe Geschwindigkeit und Performance der Website als Anforderung besonders wichtig. Deshalb hat xeit einen besonderen Fokus auf die Page Speed Optimierung gelegt.
Neues Terminbuchungssystem
Die alte Website hatte ein eigenes Terminbuchungssystem für Sehberatungen, jedoch war es an das veraltete CMS eingebunden. Da keine am Markt verfügbare Lösung den speziellen Anforderungen des B entsprach, haben wir von xeit ein neues Terminbuchungssystem entwickelt. Dabei haben wir neue Funktionen wie das automatische Versenden und Anzeigen einer Kalenderdatei (.ics) zur Vereinfachung der Terminvereinbarung sowie umfangreiches Tracking mit benutzerdefinierten Dimensionen in GA4 hinzugefügt.
Content Creation und Content Migration
Xeit hat alle Texte nach den Vorgaben des Kunden und den Anforderungen an SEO, Barrierefreiheit (einfache Sprache) und Design neu verfasst. Dabei haben wir zunächst die gewünschte Tonalität von B-Bern definiert und ein durchgängiges Sprachkonzept eingehalten. Gerade in der Kommunikation mit einer Zielgruppe, die sowohl als Arbeitnehmer:innen als auch als Klienten:innen angesprochen werden soll, war Fingerspitzengefühl gefragt.
Wir haben die Inhalte immer wieder an die Wünsche des Kunden angepasst, so dass die Tonalität und zielgruppengerechte Ansprache am Ende genau den Vorstellungen des Kunden entsprachen. Anschliessend haben wir die überarbeiteten Inhalte in die Website integriert.
Fokus auf Lead-Generierung dank Tracking & Reporting
Wir haben optimierte Landingpages mit klaren Handlungsaufforderungen und einfachen Kontaktmöglichkeiten sowohl für Angebote als auch für die Rekrutierung entwickelt. So dient die Website nun als erfolgreiches Akquisitions- und Recruiting-Instrument.
Alle Massnahmen werden kontinuierlich gemessen, analysiert und in einem Online-Reporting auf Basis von Google Data Studio als Dashboard aufbereitet. So hat der Kunde jederzeit und von überall Zugriff auf die aktuellen Zahlen und Entwicklungen.
Das Ergebnis: Erste Conversions unmittelbar nach dem «Go-Live» und positives Feedback zeigen, dass die Ziele erreicht wurden.
Termingerechter und reibungsloser «Go-Live»
Der Go-Live verlief termingerecht und reibungslos, was auf eine gute Vorbereitung, Qualitätssicherung durch umfangreiches Testing sowie die Einsatzbereitschaft des Projektteams und der Entwickler zurückzuführen ist.
«Der Relaunch war gerade aufgrund des Timings (unter 5 Monaten) sehr sportlich, wenn man bedenkt, dass ¾ des Contents komplett neu aufgebaut wurde. Dabei konnten wir auch auf ein zuverlässiges Projektmanagement und fundierte Expertise von xeit zählen.»
Erfolgreiches SEO
Trotz grosser Umstellungen im Content gab es keinen Verlust an Sichtbarkeit. Die Impressionen in der Search Console nahmen bereits wenige Wochen nach dem Go-Live zu.
Umfassende Barrierefreiheit
Wir haben besonders auf Kontraste, Schriftgrössen und Kompatibilität mit Screenreadern wie Jaws geachtet. Ausserdem haben wir ein Vorlese-Plugin mit ReadSpeaker implementiert. Es ist beeindruckend, wie sich sehbehinderte Menschen mittels Sprachausgabe mit 8- bis 12-facher Ausgabegeschwindigkeit auf einer Website orientieren können.
Fazit
Insgesamt war der Relaunch ein Erfolg, der sich in einem reibungslosen Go-Live, einer erhöhten Sichtbarkeit und positiven Kundenreaktionen niederschlug. Der intensive Fokus auf Qualitätssicherung, Barrierefreiheit, SEO und optimierte User Experience hat sich ausgezahlt und die Wirksamkeit der umgesetzten Massnahmen bestätigt. Wir danken dem Kunden für das Vertrauen in unsere Arbeit und freuen uns über den erfolgreichen Relaunch.