Mehr Storytelling plus Headless CMS: acrevis Bank wagt einen innovativen Relaunch

  • Lena Tovar

Die Ostschweizer Regionalbank setzt auf zukunftsfÀhige Konzepte. Das UX und Development Team von Liip St. Gallen haben acrevis beim Relaunch ihrer Website begleitet.

Mehr zu den Services UX Design, Content, Custom Development und SEO die wir dir als Digital Agentur bieten.

Könnt ihr mehr als nur entwickeln?

Alles begann mit einem Vorprojekt. Die Partnerschaft zwischen acrevis und Liip startete im SpĂ€tsommer 2019 mit einer technischen Umsetzung. Ziemlich schnell waren wir uns einig: Das Set-up passt, fachlich wie menschlich. Und so kam auch rasch die Anfrage fĂŒr den Relaunch ihrer gesamten Website www.acrevis.ch. Der Auftrag: Kein simples Redesign, sondern ein kompletter Neubau, der im Design wie auch in der Technologie Raum fĂŒr innovative Weiterentwicklung lĂ€sst.

Hohe Anforderungen, die nicht nur unser Development-Team angespornt hat: Auch die UX Researcher, Visual Designer, Content Strateg*innen und SEO & Analytics Expert*innen aus unserem UX-Team waren Feuer und Flamme. Mit drei Designkonzepten haben sie schlussendlich die GeschĂ€ftsleitung ĂŒberzeugt und damit den Grundstein fĂŒr das Projekt gelegt.

*Hands on: In gemeinsamen Workshops haben wir mit dem acrevis Projektteam Personas, deren BedĂŒrfnisse und konkrete User Journeys entwickelt.*

Was Kund*innen wollen

Fest stand von Anfang an, dass nicht die Innen-, sondern die Aussenperspektive zĂ€hlt. Kurz: Die Kund*innen von acrevis stehen im Mittelpunkt. In gemeinsamen Workshops haben wir die Vision und Mission von acrevis geschĂ€rft. Personas wurden erarbeitet und prĂ€zisiert, User Journeys der acrevis Kund*innen auf der Website nachgezeichnet und kritisch hinterfragt. Hinzu kamen Stakeholder Interviews, um auch die Erwartungen von acrevis einfliessen zu lassen. All das diente als erste Grundlage fĂŒr Design und Struktur – von Wireframes bis zur Informationsarchitektur.

FĂŒr eine innovative Website musste natĂŒrlich auch ein neues Visual Design her. Gesagt, getan: Neue, weboptimierte Typografie, Weiterentwicklung der Icon Library und ein frischer Einsatz der Corporate Colours. Weg von schwerem Petrol als SekundĂ€rfarbe hin zu dezent verwendetem Rot als fokussierte PrimĂ€rfarbe. Der grosszĂŒgige Einsatz von Bildern und der Mix aus statischem und dynamischem Content machen die Seite lebendig. Gleichzeitig wirkt sie durch neu angeordnete Elemente und feinen Micro-Interactions ĂŒbersichtlich aufgerĂ€umt.

*GrossflĂ€chige Bilder, viel Weissraum, klare Struktur: Erste Screens fĂŒr die acrevis Website.*

Storytelling und Themenwelten statt reiner Finanzprodukte

Inhaltlich drehte sich alles um eine Frage: Wie schaffen wir es, die acrevis Kundinnen im eher trockenen Finanz Kontext zu begeistern? Unsere Antwort: Mit Storytelling! Getreu dem Leitmotiv «Meine Bank fĂŒrs Leben» brauchen die Produkte und Services von acrevis mehr Kontext, mehr EmotionalitĂ€t, mehr Bezug zum alltĂ€glichen Leben der Kund*innen. Das fanden nicht nur unsere Content Strateginnen, sondern auch das acrevis Projektteam.

So wurden 4 respektive 8 Themenwelten entwickelt, die auf die HauptgeschĂ€ftsfelder von acrevis fokussieren, privat und geschĂ€ftlich: Konto & Karte, Wohneigentum finanzieren (Unternehmen finanzieren), Geld anlegen, Vorsorge planen (Vorsorge & Nachfolge). Die Themenwelten werden in einem bunten Mix an Formaten dargestellt – von lebensnahen Storys ĂŒber klare ProduktĂŒbersichten bis zur ganz persönlichen Ansprechperson. Die Protagonist*innen der Storys wurden in enger Abstimmung mit den zuvor erarbeiteten Personas ausgewĂ€hlt. Den Feinschliff machte am Ende die so genannte Microcopy, bei der unsere UX Writer exakt das richtige Wording fĂŒr Buttons, Formulare, Fehlermeldungen oder den Cookie-Banner formulierten.

Modernste Technologie fĂŒr eine flexible Zukunft

Nach dem Go-live ist vor dem Go-live – so lautete die technologische Stossrichtung des Webrelaunch. Will heissen, die Plattform soll ĂŒber die nĂ€chsten Jahre ausbaufĂ€hig bleiben, auch fĂŒr anspruchsvolle Anforderungen. Daher fiel die Wahl beim Content Management System auf Directus, ein Headless CMS, das Backend und Frontend voneinander entkoppelt. Grundlage dafĂŒr ist eine serviceorientierte Architektur, die auf dem acrevis-eigenen Openshift-Cluster gehostet wird.

Jetzt wird es technisch: Über einen eigens dafĂŒr entwickelten Routing-Dienst wird der headless Content mit der Seitenstruktur verbunden. Ein ElasticSearch-Dienst, der Volltext-Indexierung fĂŒr Inhalte und pdfs via GraphQL anbietet, stellt optimale Suchresultate sicher. Die Website verwendet ausserdem ein VueJS-Frontend, das auch serverseitiges Rendering unterstĂŒtzt. Der Inhalt wird ĂŒber eine Django-Anwendung geliefert, die GraphQL- und REST-Endpunkte bietet. Die Bilder werden auf Rokka gehostet, sodass trotz der hohen VisualitĂ€t der Website eine hohe Performance erreicht wird.

Den richtigen Riecher gehabt

Transparenz, Offenheit und ein regelmĂ€ssiger Austausch waren auch in diesem Projekt die Basis. Durch die enge Zusammenarbeit, sowohl mit dem acrevis Projektteam als auch weiteren Partner*innen, kamen Herausforderungen rasch zum Vorschein und konnten schnell und unkompliziert gelöst werden. Intern fĂŒhrten wir einen Collab-Day ein, um als cross-funktionales und standortĂŒbergreifendes Team konzentriert zusammenarbeiten zu können. Feedbacks und Learnings aus den Reviews wurden so rasch integriert, die Website nahm mehr und mehr Form an. Doch was wĂŒrden die acrevis Kund*innen sagen?

*In den Usability-Tests wurde das neue Website-Konzept auf Herz und Nieren geprĂŒft.*

Kurz vor dem Go-live stand der HĂ€rtetest an: Usability Tests. Potentielle Kund*innen testeten die neue Webseite auf Herz und Nieren und fĂŒhrten an Laptop und Smartphone spezifische Suchanfragen aus. Was alle im Projektteam freute: Bis auf wenige Details waren keine Änderungen nötig – mit Storytelling, einer klaren Struktur, frischem Design und hoher technologischer Performance haben wir scheinbar den Nerv der Kund*innen getroffen.

Die neue Website acrevis.ch ist seit Juli 2020 live. Merci an das gesamte acrevis Projektteam fĂŒr die gute Zusammenarbeit! To be continued...

Dank
An dieser Stelle möchten wir auch allen (fast ausschliesslich) lokalen Mitstreiter*innen im Projekt danken: JOSHMARTIN leistete wertvolle Vorarbeit bei der Seitenkonzeption, AMMARKT entwickelte Branding und Bildkonzept fĂŒr acrevis und arcmedia unterstĂŒtzte mit Support bei den Web-Formularen. Ganz herzlichen Dank!

«Liip hat uns vom ersten Moment an verstanden und uns mit innovativen VorschlĂ€gen in Konzept, Design, Inhalt und Technologie unterstĂŒtzt.»

Mona BrĂŒhlmann, Gesamtprojektleiterin acrevis Webrelaunch

«Ein grosses Kompliment! Die Storys wurden super und sehr ansprechend umgesetzt.»

Andrea Straessle, Marketing & Kommunikation acrevis Bank AG

«Es war jedes Mal wieder unglaublich zu sehen, mit welch’ hoher QualitĂ€t die einzelnen Anforderungen umgesetzt wurden und wie stabil und nachhaltig die umgesetzte Lösung ist.»

Michael Weder, technischer Projektleiter acrevis Webrelaunch


Sag uns was du denkst