Website-Refresh beim BVV

Optimierung der Customer Experience mit neuem Look & Feel

Den Kunden das Leben leichter machen

Seit 2015 arbeitet der BVV Konzern gemein­sam mit Pinuts kontinuier­lich an der Ver­besserung der Nutzer­erfahrung und der digitalen Services in unter­schiedlichen Web­projekten. Ein großer Meilen­stein war das im April 2020 veröffent­lichte Kunden­portal, das heute schon von rund 90.000 Mit­gliedern intensiv genutzt wird und damit mittler­weile zum zentralen Service- und Kommunikations­kanal geworden ist. Ein Ansporn, gleich das nächste Ziel ins Auge zu fassen: ein neues Design für den Web­auftritt des BVV zu ent­wickeln.

Lesen Sie auch den Deep Dive zum Kundenportal des BVV auf der Produktwebsite für unsere Customer Experience Plattform Universal Messenger.

Mehrere Screenshots der BVV-Website in einem Raster

Kunde

BVV Logo

Leistungen

  • UX/UI-Design

  • Responsive Design

  • Barrierefreiheit

Technologien

  • CMS FirstSpirit

  • Universal Messenger 

Die Heraus­forderung

Kein Website-Relaunch, sondern ein schlanker Refresh zur Implemen­tierung eines neuen Corporate Designs: die frische, aktive und ein­ladende Wirkung des Designs sollte sich auch in der Naviga­tion und Bedie­nung wider­spiegeln: Die verschiedenen Ziel­personas sollten schneller und direkter an ihr Ziel geführt werden. Die Benutzer­freundlich­keit der zentralen Bedienungs­elemente sollte nach neuesten Erkennt­nissen über die Customer Experience optimiert werden.

Unsere Lösung

Neues Corporate Design ohne Website-Relaunch?

Die Website des BVV sollte ohne Relaunch ein neues Corporate Design erhalten. Ist das überhaupt sinn­voll? Ja - weil es in diesem Fall keinen Anlass dafür gab, den kompletten Web­auftritt auf den Prüf­stand zu stellen. Im Rahmen des Facelift haben wir die Naviga­tion ver­schlankt und eine Reihe weiterer Optimie­rungen umgesetzt.

Startseite mit ein­ladender Bühne

Der animierte Header der Start­seite heißt mit wechseln­den Bildern die Ziel­personas des BVV herzlich will­kommen und führt direkt zu den passen­den Angeboten. 

Ein schönes Detail für Grafike­xpert:innen: wenn sich die Bildschirm­breite ändert, wird die Grafik nicht einfach kleiner. Die Elemente Text mit CTA, BVV-Signet und Bildmotiv liegen auf ver­schie­denen Ebenen und werden in jeder Situation optimal platziert.

Startseite der BVV mit Bühne "Mehr Rente im Alter"
Startseite BVV mit Bühne "Berufseinsteiger und junge Talente

Wie schafft man mehr Über­sicht auf der Start­seite?

Kleine Ursache, große Wirkung: Die Kacheln für die Ziel­gruppen "Versicherte", "Rentner" und "Unter­nehmen" wurden komplett moderni­siert und über­sichtlich in einer Zeile statt unter­einander angeord­net. Den gewon­nenen Frei­raum nutzt der BVV für die Präsenta­tion der aktuel­len Top-Themen und News.

Screenshot der kompletten Startseite der BVV

Wie kommen die Besucher schneller ans Ziel?

Selten nützlich und oft lästig: Viele Übersichts­seiten verlängern die Naviga­tions­wege, obwohl sie nur einen geringen Mehr­wert bringen. Wenn das Content Management System dafür ausgelegt ist, lassen sich diese, wie beim BVV, ohne besonderen Entwicklungs­aufwand aus der Navigation heraus­nehmen.

Fly-out-Navigation

In der Praxis oft unter­schätzt: die Bediener­freundlich­keit des Menüs entscheidet früh darüber, wie benutzer­freundlich eine Website wahr­genom­men wird. Beim BVV freuen sich die Nutzenden nun über ein platz­sparendes und gut struktu­riertes Fly-out-Menü am linken Bild­schirm­rand.

Screenshot Fly-out-Menü auf der Website der BVV

Finetuning für die mobile Dar­stellung

Erfolgs­faktor im B2C: Ein Groß­teil der Website­besuche findet über mobile Geräte verschieden­ster Bild­schirm­größen statt. Die Ober­fläche der BVV-Website passt sich stufen­los an jede Breite an und reduziert dabei die Bedienungs­elemente so viel wie nötig, aber auch so wenig wie möglich:

  • Wann wird das Suchfeld zur Lupe?
  • Wann wird das Haupt­menü zum Hamburger-Menü?
  • Welche anderen Möglich­keiten gibt es, die Dar­stellung zu komprimie­ren?

Probieren Sie es einmal aus!

Ansichten der BVV-Website in verschiedenen Mobilformaten

Wie kann man Interessierten die Kontakt­aufnahme erleich­tern?

Das fällt ins Auge: Die am Ende jeder Seite positio­nierten Kontakt-Angebote sind auffäl­liger gestaltet und auf zwei gleich­wertige Optionen reduziert worden: "Anrufen" und "Nach­richt senden". Die Option "Ihre Meinung" wird nur noch auf aus­gewählten Seiten in einem separaten Element ange­boten.

BVV Screenshot Kontaktaufnahme

Ein Special Effect für den BVV

Gut für die Marke und die Bedie­nung: Das runde BVV-Logo wurde wie der Home-Button auf Mobil­geräten in der Mitte der Seite platziert und gewinnt damit nicht nur besondere Aufmerk­sam­keit, sondern ist auch für die Naviga­tion gut und schnell erreichbar.

Slide 1 of 3
„ quote

Für uns stand eine klare Fokussierung auf die Bedürfnisse unserer Kunden von Anfang an im Vordergrund. Durch die ganzheitliche Beratung von Pinuts – vom Design bis zur technischen Umsetzung in FirstSpirit – haben wir dieses Ziel schon heute erreicht und wollen gemeinsam kontinuierlich weitere Verbesserungen umsetzen.

„ quote

Ich bin im Januar als Projektleiter zum Team hinzugestoßen und war überrascht, wie schnell eine freundschaftliche Zusammenarbeit und ein gemeinsames Miteinander entstanden sind. Wir sind immer mit Herzblut dabei und geben gerne etwas zurück!

„ quote

Das ganze BVV-Team lebt und atmet das Prinzip Human-centered Design!

Highlights

  • Neues modernes Website-Design
  • Verbesserung der Nutzerführung
  • Optimierung der mobilen Darstellung

Mehr erfahren?

Gerne berichten Ihnen unsere Kollegen weitere Projektdetails und sprechen über Ihre persönlichen Bedürfnisse!


Lernen Sie
uns kennen

Pinuts digital thinking GmbH