Das Kundenportal der sBausparkasse

• Digitalisierung
• Entwicklung
• UI Design
• UX Design
• UX Testing
• UX/UI
• Web-Applikation
• Web-Portal
• Webdesign

Wie spart man am besten Kosten? Indem man investiert. Und zwar in Digitalisierung. Mit dem Ziel einer deutlichen Ersparnis der Kosten für Porto, Druck, Papier und Betreuung entstand eines der größten Einzelprojekte in der Geschichte von k25: das Kundenportal der sBausparkasse.

---

Die Bausparkasse der österreichischen Sparkassen – kurz s Bausparkasse – betreut mehr als 1,2 Millionen Kund:innen in ganz Österreich. Rund 250.000 von ihnen nutzten jedoch zu Projektstart nicht George, das Internetbanking von Erste Bank und Sparkassen. Für sie gab es nur einen Kommunikationsweg: den Brief. Jahreskontoauszüge, Vertragsinformationen und jede einzelne Mitteilung wurde bis 2021 gedruckt, kuvertiert und verschickt.

Mit dem Kundenportal entstand erstmals ein direkter digitaler Zugang zu diesen 250.000 Kund:innen – und diese konnten damit ihre Verträge und Finanzinformationen direkt am Smartphone einsehen.

Was als bewusst schlankes MVP für die digitale Zustellung des Jahreskontoauszugs startete, entwickelte sich innerhalb von drei Jahren zu einer umfassenden Kommunikationsplattform: vom personalisierbaren Vertrags-Dashboard über ein vollwertiges Nachrichtencenter bis zur digitalen Zustellung ganzer Briefprozesse.

Dass ein Portal im streng regulierten Bankenumfeld mit konzerneigenem Hosting, Penetrationstests und einer Vielzahl an Schnittstellen in nur fünf Monaten vom Kick-Off zum Launch gebracht werden kann, war dabei alles andere als selbstverständlich. Und doch dürfen wir hier eine Erfolgs-Story erzählen.

Anforderung und Ziel

Der Auftrag war klar: Wir entwickeln ein zentrales Kundenportal für jene Kund:innen der s Bausparkasse, die Informationen noch analog bekommen. Sie sollten künftig:

• ihre Produkte im Bereich Ansparen und Finanzieren digital einsehen können,
• ihren Jahreskontoauszug digital erhalten,
• ihre Verträge im Detail einsehen,
• Dokumente abrufen
• und unkompliziert mit der s Bausparkasse in Kontakt treten können.

Das Kundenportal war dabei ausdrücklich nicht in Konkurrenz zum Internetbanking George konzipiert, sondern als Angebot für all jene, die das Internetbanking nicht nutzen.

Die wirtschaftliche Vorgabe lautete, Porto-, Druck- und Betreuungskosten nachhaltig zu senken. Der Jahreskontoauszug, der jedes Jahr an alle Kund:innen verschickt wird, war dabei der erste Use Case mit direkt messbarem Einsparungspotenzial.

Unsere Aufgabe bei k25 war es, diese Anforderungen rasch in ein realistisches Konzept zu bringen. Zwischen der ersten Abstimmung im März 2021 und der Beauftragung im Juni 2021 lagen nur wenige Monate, in denen wir in Workshops mit der s Bausparkasse und der Group-IT Funktionalitäten, Architektur und Schnittstellen definierten. Unsere Strategie: ein bewusst schlankes MVP innerhalb eines Jahres launchen. Anschließend sollte in klar definierten Phasen der Ausbau zu einer größeren Plattform erfolgen. Gesagt, getan.

Startschuss und Konkretisierung

Nach den ersten Abstimmungen im Frühjahr 2021 fiel am 2. August 2021 mit dem Kick-Off der Startschuss für die Umsetzung. Der Fahrplan war ambitioniert: Launch der Version 1.0 nur fünf Monate später, im Jänner 2022 – und das im Bankenumfeld, inklusive Onboarding auf die Container-Plattform der Erste Group, Security-Freigabeprozessen und externem Pen-Testing.

In der Konkretisierungsphase wurden parallel alle Grundlagen gelegt:

• Definition aller Funktionalitäten der Version 1.0
• Konzeption von Registrierungs- und Login-Prozess inklusive aller Sicherheitsparameter
• Festlegung von Tech-Stack und System-Architektur
• Anforderungsdefinition für die Schnittstellen zu den Konzern-Systemen (Dokumentenarchiv, Kundendatenbank, Kontoauszüge, SMS- und E-Mail-Versand)
• Layout-Workshops und UX-Testing

Besonderer Fokus lag für uns auf Login und Registrierung. Eine Anbindung an die s Identity-Lösung der Gruppe hätte für hunderttausende Kund:innen ohne George-Zugang bedeutet, dass sie manuell erfasst und angelegt werden müssten. Praktisch war dies also nicht umsetzbar. Gemeinsam mit der s Bausparkasse entschieden wir uns daher für einen selbstentwickelten Registrierungs- und Login-Prozess: Kund:innen identifizieren sich mit ihren Vertrags- und Personendaten, die in Echtzeit mit der Kundendatenbank abgeglichen werden, und bestätigen ihre Identität per SMS- und E-Mail-Token. Eine pragmatische Lösung, die höchste Sicherheitsanforderungen erfüllt und trotzdem ohne Filialbesuch oder Postweg auskommt.

Im Projektteam von k25 und s Bausparkasse wurde von Beginn an eng getaktet gearbeitet: in einem wöchentlichen Jour-Fixe mit dem Kernteam der s Bausparkasse, das über die gesamte Projektlaufzeit von drei Jahren beibehalten wurde, sowie in „Dailys“, unseren täglichen Abstimmungen in der heißen Phase rund um den Launch.

User Experience, UX-Testing und Design

Die größte UX-Herausforderung des Projekts war also der Registrierungsprozess. Die Security-Anforderungen im Banken-Sektor bedeuten:

• Identifikation über mehrere Datenfelder
• Zwei-Faktor-Authentifizierung
• Zustimmung zu Nutzungsbedingungen

Wir standen also vor der Aufgabe, einen für User:innen potenziell abschreckenden und komplexen Prozess so zu gestalten, dass er so schlank wie möglich erlebt wird. Unsere Lösung: Wir arbeiten mit Echtzeit-Validierung der Eingaben (etwa der Prüfziffer der Vertragsnummer), klarer Fehlerführung und -darstellung und einem Ablauf ohne Medienbrüchen und unnötigen Exit-Points.

Das Ergebnis: 90 Prozent der Kund:innen schlossen die Registrierung in unter zehn Minuten ab – ganz ohne persönliche Unterstützung.

Um dort hinzukommen wurden in 3 Monaten intensivster Arbeit unzählige verschiedene User-Flows erstellt, auf Basis von Wireframes in UX-Testings abgefragt, A/B-Lösungen getestet und – man kann es sich vorstellen – mindestens so viele Ideen verworfen. Wie wir im UX-Testing vorgehen, erklären wir hier im Detail.

Das Portal selbst wurde konsequent aus Sicht der User:innen gestaltet. In Layout-Workshops entstanden mehrere Varianten des Dashboards – von der Kachel- bis zur Listenansicht, mit personalisierbaren Vertragsnamen, Farbsets und Fotos. Es folgte auch hierfür ein UX-Testing mit einer breit gestreuten Testgruppe im Alter von 25 bis über 60 Jahren, dessen Ergebnisse direkt in den Feinschliff von Grafiken, Farbwelt und Nachrichtencenter einflossen. Insgesamt entstanden über 100 Screens – vollständig responsive für Mobile, Tablet und Desktop.

Wie gut das Onboarding funktionierte, zeigte sich unmittelbar nach dem Launch: Der QR-Code auf dem Kuvert des Jahreskontoauszugs führte die Kund:innen direkt in die Registrierung – über 3.100 Personen schlossen diese allein in der ersten Woche ab. Später verkürzte eine automatische Direktregistrierung den Weg für Neukund:innen noch einmal deutlich: Wer einen Vertrag abschloss, erhielt einen personalisierten QR-Code und musste nur noch wenige Daten ergänzen.

Wesentlich für die ideale User Experience war jedoch nicht nur die B2C-Ebene. Um die Mitarbeiter:innen des KundenServiceCenter bestmöglich zu betreuen, lag ein großer Fokus unserer UX-Arbeit auf dem Admin-Tool, mit dem die Service-Mitarbeiter:innen die Tausenden Kund:innen täglich betreuten. Nachdem das Admin-Tool rein auf das Kundenportal fokussiert war und als eigenständige Ergänzung eines bestehenden CRM-Systems lief, legten wir besonderen Wert auf ein intuitives Design und Übersichtlichkeit.

Technologie und Entwicklung

Technisch ist das Kundenportal vollständig in die IT-Landschaft der Erste Group eingebettet: Es läuft auf der Container-Plattform der Gruppe und kommuniziert über Schnittstellen mit dem Dokumentenarchiv BAUWAS, der Kundendatenbank, den Kontoauszugs-Services, dem konzerneigenen SMS-Gateway sowie dem zentralen E-Mail-System für Aviso-Nachrichten.

Das Backend des Kundenportals ist eine auf .NET 6.0 und ASP. NET Core basierende Webanwendung in C#, die Entity Framework Core 6 mit Microsoft SQL Server als Datenbank einsetzt und containerisiert in Docker-Umgebungen läuft. Die CI/CD-Pipeline wird über Bitbucket Pipelines abgebildet, wobei .NET Release-Binaries erzeugt und in ein separates GitLab-App-Repository übernommen werden. Neben der SQL Server-Datenbank nutzt die Anwendung SqlServerCache für verteiltes Caching, Apache Kafka für Event-Streaming und einen SMTP-Server (Mail-Hog lokal, firmeninternes Gateway in der Produktion) für E-Mail-Versand. Die Architektur folgt einem klaren Controller-Service-Muster mit REST-API-Endpunkten, MVC-Views für E-Mail-Templates und Hintergrunddiensten wie einem RepeatedHostedService für automatisierte Reminder-Jobs.

Die Sicherheitsarchitektur ist mehrstufig aufgebaut: Primär kommt OAuth2/OpenID Connect zum Einsatz, ergänzt durch ASP. NET Core Identity mit Cookie-Authentifizierung, Zwei-Faktor-Authentifizierung per SMS-Token und E-Mail-Bestätigung. Benutzerkonten werden nach fünf erfolglosen Anmeldeversuchen gesperrt – mit gestaffelten Sperrzeiten und Entsperrung über das KundenServiceCenter. Für Passwörter gelten strenge Richtlinien sowie eine Historie der letzten zehn Passwörter, wobei wiederverwendete Passwörter erst nach 24 Stunden freigegeben werden.

Die Geschäftslogik ist in Services gekapselt: Der ECP-Service kommuniziert mit der Enterprise-Customer-Plattform der s Bausparkasse für Kundenstammdaten und Transaktionen, E-Mail-Sender und SMS-Sender kümmern sich um Benachrichtigungen und TAN-Versand, das PDF-Service erzeugt PDFs für Nutzungsbedingungen und Kontoauszüge, und KafkaProducer/KafkaConsumer ermöglichen Event-Streaming. Das Datenmodell unterscheidet zwischen Entity-Modellen für die Identity- und Anwendungsdaten, View-Models für die aus dem Core-Banking-System gespiegelten Datenbank-Views (Kunde, Vertrag, Ansparen, Darlehen, etc. – für Testzwecke via CSV-Exporte befüllt), sowie Request- und Response-DTOs für die API-Kommunikation. Docker-Compose orchestriert alle benötigten Services inklusive SQL-Server, Mail-Hog und Admin-Tool.

Das Frontend des Kundenportals ist eine Single-Page Application (SPA) auf Basis von Vue.js 2.6 mit Vue Router 3.5 (History-Mode) und Vuex 3.6 für das zentrale State-Management. Das Build-System verwendet den Vue CLI 4.5 mit Webpack 4, Babel zur Transpilierung und SASS/SCSS für das Styling. Die Applikation ist als reiner Frontend-Client konzipiert und kommuniziert über einen eigenen HTTP-Client (native Fetch-API) mit dem separaten Backend-Service.

Herausforderungen und Launch

Die größte Herausforderung lag im komplexen Zusammenspiel der verschiedenen Systeme der Gruppe. Vom Dokumentenarchiv über die Kundendatenbank bis zum SMS-Gateway bedeutete jede Schnittstelle Abstimmungen mit eigenen Ansprechpartner:innen, separaten Freigabeprozessen und eigenen Timelines. Als sich die Verfügbarkeit der Archiv-Schnittstelle verzögerte und zusätzlich eine ausgeweitete weihnachtliche Einsatzsperre der Bankensysteme den Spielraum verengte, musste der Zeitplan im Herbst 2021 neu verhandelt werden.

Dazu kam der im Bankenumfeld obligatorische externe Penetrationstest. Dieser gestaltete sich trotz großzügiger Planung mit zehn Werktagen Dauer, einer eigenen Abnahmeumgebung und Deployment-Freeze deutlich aufwändiger als ursprünglich angenommen. Um das Risiko zu minimieren, trafen wir gemeinsam mit der s Bausparkasse eine klare Scope-Entscheidung: Features wie Datei-Uploads und die Suchfunktion wurden bewusst in die zweite Phase verschoben. Es blieb beim MVP, das dafür den strengen Sicherheitsanforderungen standhielt und (fast) im Zeitplan blieb.

Am 21. Jänner 2022 ging das Kundenportal live. Etwa fünf Monate nach dem Kick-Off und rund zwei Wochen hinter dem ursprünglichen Plan hatten wir das Projekt erfolgreich auf den Boden gebracht. Und die Kund:innen nahmen die Lösung begeistert an: über 3.100 Registrierungen in der ersten Woche, mehr als 1.100 davon an einem einzigen Tag. Innerhalb eines Monats stieg die Zahl noch auf knapp 12.000 User:innen, was 5 % der Zielgruppe bedeutete. Der Jahreskontoauszug mit QR-Code auf dem Kuvert hatte seine Wirkung als Registrierungs-Turbo nicht verfehlt.

Für uns bei k25 war dieser Launch der Beweis, dass sich auch im streng regulierten Bankenumfeld komplexe Projekte in kürzester Zeit auf den Boden bringen lassen, wenn Konzept, Priorisierung und Zusammenarbeit stimmen.

Hotline

Du brauchst jemanden, der ein komplexes Web-Portal strukturiert umsetzt? Reden wir darüber.

Ruf uns an

Schreib uns eine E-Mail

Weiterentwicklung

Doch erst mit dem Launch begann die richtige Erfolgsgeschichte: Innerhalb des ersten Jahres registrierten sich mehr als 45.000 Kund:innen im Portal. Ab 2023 erhielten sie alle ihren Jahreskontoauszug ausschließlich digital. Damit mussten zehntausende Briefe nicht mehr gedruckt, kuvertiert und verschickt werden. Das große Ziel der Kostenreduktion war bereits im zweiten Jahr Realität.

In der zweiten Projektphase bauten wir das MVP schrittweise zu einer Plattform aus. Mit dem Nachrichtencenter entstand 2022 ein vollwertiges Zwei-Wege-Kommunikationssystem zwischen Kund:innen und dem KundenServiceCenter. Für die Service-Mitarbeiter:innen wurden dort ein eigenes Flag-System, Textbausteine, eine Dateiverwaltung, Filtermöglichkeiten und eine Volltextsuche integriert. Eine eigene Broadcast-Funktion für Massennachrichten ersetzte klassische Serienbriefe. Damit landen seither Aussendungen an tausende Kund:innen direkt im Portal statt im Postkasten – inklusive automatisch befüllter PDFs, die individuell auf die Kund:innen eingehen. Rechtzeitig vor dem Kontoauszugsversand ging das System im Dezember 2022 produktiv.

Damit war der Return on Investment erreicht: Jede Erweiterung finanzierte sich über die Briefprozesse, die sie ersetzte. Vom digitalen Dokumenten-Postfach über die Nachrichtenarchivierung im Konzern-Archiv (produktiv ab Februar 2023) bis zur automatisierten Dokumentenzustellung, die ab Herbst 2023 die postalische Zustellung für Portal-Kund:innen ablöste. Wirtschaftlich gesehen blieb die Weiterentwicklung damit weitgehend kostenneutral, bei laufend steigendem Mehrwert für Kund:innen und die s Bausparkasse.

Parallel haben wir das Portal laufend gehärtet und optimiert. So erfolgten weitere Anpassungen an Login und Registrierung, 2023 wurde ein zweiter externer Penetrationstest erfolgreich abgeschlossen und es erfolgte eine Prüfung durch das Risk-Management des Konzerns.

Um die Attraktivität für die Kund:innen weiter zu steigern, wurde durch die Marketing-Abteilung der s Bausparkasse im Frühjahr 2023 das Projekt „Mehrwert Kundenportal“ ins Leben gerufen. Ziel war es, im Portal nicht nur die Verwaltung von Verträgen und Einsicht von Kontoauszügen zu bündeln. Künftig sollten auch die vielen Services der s Bausparkasse und ihrer Partnerorganisationen abgebildet werden, um den registrierten Kund:innen noch mehr Mehrwert zu bieten.

Daraus entstanden im Herbst 2023 – parallel zum Relaunch des Corporate Designs der Erste Group und damit auch der s Bausparkasse – ein UI-Refreshment und eine Funktionalitäts-Offensive, bei der wesentliche Teile des Mehrwert-Projektes integriert wurden.

Support und Übergabe

Nachdem das große Ziel der Kostenreduktion erreicht und Mehrwert-Funktionen integriert waren, wandelte sich unsere Rolle im Projekt sukzessive in die des Supports inklusive kleinerer Optimierungen. Zudem arbeitete die s Bausparkasse zunehmend daran, die IT-Systeme im Hintergrund in der konzerneigenen Infrastruktur zu zentralisieren.

Aus der großen Phase der Weiterentwicklung wurde so ab 2024 eine geordnete Übergabephase: Im Q2 2024 übergaben wir Daten, Dokumentation und Know-how strukturiert an die Konzern-IT. Bis zur Ablöse durch die integrierte Konzernlösung im November 2024 begleiteten wir das Portal punktuell im Support.

Nach drei Jahren endete damit eines der bisher größten Einzelprojekte von k25. Auch in der Übergabe war uns wichtig, die Arbeitsweise des Projektes zu leben: strukturiert und partnerschaftlich. Drei Jahre wöchentliche Jour-fixes, knapp 1.000 umgesetzte Jira-Tickets, zwei bestandene Penetrationstests, ein komplettes UI-Refreshment und ein Portal, das mehr als nur Digitalisierung ist. Wir sind stolz auf unsere Arbeit.