BTV

Umsetzung eines Design Systems für eine Bank

Die BTV Vier Länder Bank stand vor der Herausforderung alle digitalen Kanäle einheitlich zu gestalten – analog zum schon bestehenden gedruckten Corporate Design Manual.

Besonders im Hinblick auf die geplanten digitalen Projekte und Initiativen der BTV sollte eine konsistente User Experience für ihre Kund:innen und Mitarbeiter:innen gewährleistet und die Entwicklung neuer Touchpoints effizienter gestaltet werden. Die Lösung: Ein Design System, das den Design- und Entwicklungsprozess für alle Stakeholder vereinfacht und einen konsistenten digitalen Auftritt gewährleistet.

9 Monate

Projektdauer

8

Projektmitarbeiter

Gemeinsame Challenge

Als Pilotprojekt für die Implementierung des Design-Systems wurde das Intranet ausgewählt. Alle Komponenten, die für diesen Touchpoint wichtig waren, wurden in einer Component Library in Adobe XD nachgebaut, in den Screendesigns für das Intranet eingesetzt und in Zusammenarbeit mit einem externen Entwicklerteam erweitert.

Nachdem die wichtigsten Komponenten definiert wurden, war der nächste Schritt das entstandene System in einem weiteren Touchpoint anzuwenden – dem Digitalen Assistenten. Die spezielle Herausforderung lag hierbei im Fortschritt des Projektes, da das UI-Design bereits abgeschlossen war. Somit war es besonders wichtig einen gemeinsamen Weg mit der betreuenden Agentur zu finden, um das entstandene System in Anwendung zu bringen ohne die User Experience zu schwächen. Zudem stellten wir fest, dass für dieses Tool weitere UI-Elemente notwendig waren, die es so noch nicht im Design System gab. Die zentrale Frage war also: Welche Komponenten sollten unbedingt in das Design System aufgenommen werden und welche nicht.

Focus of the Project

🧑‍🎨

Interface Inventory

Mithilfe eines Anforderungsworkshops wurden alle digitalen Touchpoints gescreent und ein Pilot-Projekt ausgewählt.

🧩

Aufbau des Design Systems

In Adobe XD wurde nach dem Atomic Design Prinzip ein Design System aufgebaut und dokumentiert.

💡

Abstimmungen und Schulungen

Nach und nach wurde das Design System in enger Abstimmung mit dem Kunden und externen Stakeholdern erweitert, sowie durch ein Schulungskonzept abschließend an den Kunden übergeben.

Edge Cases

Die Entscheidung welche Komponente für das Design System relevant ist, wurde nach der Anwendungshäufigkeit entschieden. Komponenten, die produktspezifisch sind, wie zum Beispiel spezielle Kommentarfunktionen, wurden in den jeweiligen Designfiles festgelegt. Auf diese Weise wurde die Übersichtlichkeit im System gewahrt.

Designsystem Struktur

Da sehr viele verschiedene Stakeholder, wie zum Beispiel externe Agenturen, Entwicklerteams und Produktmanager mit dem System arbeiten, ist es besonders wichtig eine klare, übersichtliche Struktur zu gewährleisten.

Schulungen

Ein Design System ist ein Produkt, das fortwährend wächst und sich stetig weiterentwickelt. Aus diesem Grund wurden Remote-Schulungen durchgeführt. Auf diese Weise konnten wir sicherstellen, dass das interne Team der BTV die Weiterentwicklung und Pflege des Design Systems autark und möglichst effizient durchführen kann.

Das Ergebnis

Mithilfe des Intranet Pilot-Projektes wurde ein Design System geschaffen, welches durch die Anwendung in anderen digitalen Touchpoints der BTV erweitert und adaptiert wurde. Durch die konstante Weiterentwicklung und Zusammenarbeit mit anderen Stakeholdern konnte das neue Design schnell implementiert werden. Das Resultat: Eine konstante und visuell einheitliche User Experience über unterschiedlichste, digitale Kontaktpunkte hinweg. Zusätzlich konnten dadurch neue Produkte und Websites effizienter gestaltet und entwickelt werden.

Inzwischen wurde das entwickelte System an das interne Team der BTV übergeben. Mithilfe von Schulungen und punktuellen Hilfestellungen ist die eigenständige Pflege und Weiterentwicklung nun vollständig und erfolgreich in ihrer Hand.


Im Zuge der Digitalisierung ergab sich für die Bank für Tirol und Vorarlberg die Aufgabe, für Bankgarantien im Firmenkundengeschäft eine digitale Lösung der Abläufe für den Endkunden sowie den Fachbereich zu entwickeln.

Das Ergebnis: Eine Plattform, die es schafft bisherige Prozesse radikal zu vereinfachen und somit effizienter zu gestalten

Für Endkundinnen und Endkunden der BTV ist es nun möglich einfach einen Entwurf zu erstellen, der der dann über einen Freigabeprozess von Vorgesetztinnen und Vorgesetzten zu einem Antrag führt.

Die Anwendung führt Kundinnen und Kunden Schritt für Schritt durch den Garantie-Erstellungsprozess und lässt sie verschiedene Garantietexte und Dokumente hochladen.

Kundinnen und Kunden überprüfen ihre Eingaben in der Zusammenfassung und wählen einen Supervisor für die Freigabe aus.

Der Antrag wird in weiterer Folge von der Fachabteilung entgegengenommen und bis zur Garantie-Erstellung bearbeitet. Die Applikation stellt damit ein zentrales Werkzeug für die Fachabteilung dar.

Projekte, auf die wir stolz sind

Cases & Referenzen aus früheren Projekten