TeamBank – ein Designsystem als Produkt und Kulturgewinn

Unser Designsystem ist nicht nur ein Toolkit, sondern lebendige Designkultur – es vereint skalierbar Code, Design und Dokumentation zu einer Single Source of Truth und ermöglicht so konsistente, barrierefreie und zukunftsfähige Produkte.

Stilisierte Grafik: Mauszeiger schieben Files unterschiedlichen Formates hin und her.

Vom Styleguide zur gemeinsamen Basis

Die TeamBank setzt auf die digitale, persönlich-digitale und persönliche Ausgestaltung ihrer Finanzprodukte. Mit wachsendem Portfolio und steigendem Tempo mussten die bestehenden Brandguidelines weiter entwickelt und zentral zur Verfügung gestellt werden, um den Herausforderungen wie z.B. Barrierefreiheit oder Konsistenz in der Journey weiterhin gerecht zu werden.

easyCredit B2C Produkte on mobile: Homepage, Antragstrecke, App

Mockups von drei Smartphones auf denen die easyCredit-Anwendungen zu sehen sind

easyCredit B2C Produkte on mobile: Homepage, Antragstrecke, App

Designsystem as a Product

Gemeinsam mit .diff wurde das in den krossfunktionalen Teams gewachsene UI-Kit zu einem Designsystem als Produkt weiterentwickelt – mit einem dedizierten Team und eigener Roadmap. Kernkomponenten, Dokumentation mit echtem Gebrauchs-Mehrwert und erste Accessibility-Standards bilden heute die Grundlage. Das Designsystem dient Designer:innen und Entwickler:innen als gemeinsame Quelle der Wahrheit. Dadurch sorgt es für gestalterische Konsistenz, spart Entwicklungszeit und Abstimmungsbedarfe ein und senkt infolge auch Kosten.

Überblick diverser easyCredit Designsystem-Elemente wie Schrift, Buttons, Formularfelder, Logos, Icons und Illustrationen

Eine gemeinsame Sprache

Aus über 120 verstreuten Figma- und UI-Components entstanden 35 Core Components – vereinheitlicht, dokumentiert und systematisch gepflegt. Die Figma Bibliotheken, die Webcomponents als Package und in Storybook, genauso wie die Designsystem-Dokumentations-Website schlagen nun den Bogen zwischen den Stakeholders. Das System ist Dreh- und Angelpunkt der täglichen Zusammenarbeit.

Dekoratives Bewegbild. Stilisierte Mauszeiger, die Menschen und Gewerke symbolisieren treten miteinander in Aktion.

Mehrwert im Alltag

Dank des optimierten Prozesses sind die Produkte der TeamBank nun markenkonform und früher für Kundinnen und Kunden erlebbar. Intern sinken die Aufwände für Quality Assurance, wird Barrierefreiheit kontinuierlich integriert und wächst die Akzeptanz des Design Systems. Es ist damit mehr als ein Tool – es prägt die Arbeitsweise im Produktdesign.

User Interfaces bauen auf modularen Bausteinen auf. Diese basieren auf Designsystem Komponenten.

Teil 1 eines Schaubildes – auf einem sehr stark vereinfachten mobile Screen werden bausteinartige Blöcke die sich nur im Zweck unterscheiden angeordnet. Die Grafik wirkt leicht und simpel.

Anpassungen an konkreten Szenarien sind durch Standards und kolaboratives Arbeiten schnell gemacht und bereit für Usertestings, bevor sie live gehen können.

Teil 2 eines Schaubildes – auf einem sehr stark vereinfachten mobile Screen schweben abstrakte Mauszeiger über einem bausteinartigen Element.

Alle Produktteams profitieren sofort von Verbesserungen an gemeinsam genutzten Bausteinen.

Teil 3 eines Schaubildes – drei sehr stark vereinfachte mobile Screen werden Komponenten des selben Typs und unterschiedlicher Farbe angezeigt.

Ein Prozess in Bewegung

80 Prozent der Foundations wie Farben, Schriftarten und Abstände sind bereits umgesetzt, semantische Design Tokens und weitere UI-Komponenten folgen entlang einer Roadmap. diff begleitet die TeamBank weiterhin beim Ausbau des Systems und der nachhaltigen Verankerung einer Designkultur, die langfristig Effizienz und Konsistenz sichert.

Schaubild – Roadmap eines Designsystems als Produkt. Auf dem Bild ist zu Lesen: Designsystem Product Transition. Auf der Roadmap sind drei Punkte zu lesen: DS as a UI Kit, DS as a Product und DS as a Service

"Für eine solide Markenführung brauchen wir im Unternehmen eine gemeinsame Sprache. Wir haben es Team übergreifend geschafft, ausgehend vom Zentrum zwischen Design und Development, eine solide Designkultur aufzubauen. Das Designsystem ist endlich Realität – es schont Ressourcen und gibt uns mehr Kontrolle über unsere Marke."