Mit der wachsenden Kunden- und Mitarbeiterzahl der Sygnum Bank wächst auch die Komplexität des Designs und der damit verbundenen Prozesse. In diesem Szenario kann ein gut fundiertes Designsystem den Produktteams helfen, erfolgreich zu sein.
Angleichung des Designs für alle Sygnum-Produkte.
Sparen Sie Zeit und Geld, indem Sie schneller produzieren.
Bauen Sie Vertrauen auf, indem Sie eine einheitliche Erfahrung bieten.
Als ich bei Sygnum anfing, gab es kein Designteam und keinen Designprozess. Bis dahin waren die Produktmanager zusammen mit den Front-End-Entwicklern für das Design zuständig. Sie leisteten zwar gute Arbeit bei der Entwicklung von Produkten in einer Startup-Umgebung, aber wir mussten diese Situation neu bewerten, um voranzukommen. Wir mussten unser Design zukunftssicher machen. Dazu mussten wir ein paar Schritte zurückgehen und die aktuelle Situation analysieren, bevor wir mit einer solideren Grundlage weitermachen konnten.
Das Herzstück des Designs war ein PDF-Dokument mit einigen Richtlinien zu Farben und Schriftarten, aber es war bei weitem nicht umfangreich genug, um das Produktdesign eines eBanking-Systems zu steuern.
Ich führte eine Analyse der aktuellen Produktdesigns durch, und es war sofort klar, dass wir einige Konsistenzprobleme hatten. Innerhalb unseres Gesamtprodukts hatten wir neun verschiedene Designstile, die alle aus separaten CSS-Repositories abgerufen wurden. Das bedeutet, dass die Designer und Entwickler für jedes Produkt alles noch einmal von Grund auf neu erstellen mussten.
Nun, da ich die Probleme erkannt hatte, musste ich eine Lösung vorschlagen.
Ich begann damit, auf Medium Artikel darüber zu lesen, wie andere in einer ähnlichen Situation das Problem angegangen waren, und untersuchte, wie andere Unternehmen Designsysteme erstellten.
Da das Designteam bei Sygnum noch in den Kinderschuhen steckte, beschloss ich, dass wir unser Designsystem mit bewährten Methoden beginnen sollten. Auf diese Weise brauchen wir nicht mit einem leeren Blatt Papier anzufangen und haben eine Reihe von Regeln als Ausgangspunkt. Deshalb haben wir uns entschieden, unser Designsystem auf Material UI aufzubauen. Dies würde uns die Sicherheit geben, ein System zu verwenden, das von Tausenden von Designern genutzt wird und auf eine über achtjährige Geschichte zurückblicken kann.
Sygnum arbeitet nach dem Agile-System, und so musste ich dem Vorstand die Möglichkeit eines Epic-Systems als Grundlage für unser Designsystem vorstellen. Dazu zeigte ich ihnen meine Analyse unserer aktuellen Systeme und zeigte ihnen Beispiele dafür, wie meine vorgeschlagene Lösung aussehen könnte. Ich habe auch verschiedene Präsentationen in verschiedenen Teams durchgeführt.
Ein weiterer Punkt, den wir berücksichtigen mussten, war die Frage, wie dies umgesetzt werden sollte. In der Struktur des Unternehmens gab es keinen einzigen Ansprechpartner für die Front-End-Entwicklung. Ich drängte auch darauf, dass wir diese Funktion schaffen, damit wir gemeinsam ein System aufbauen können, das nicht nur Designern, sondern auch Entwicklern hilft.
Die Tatsache, dass wir eine regulierte Schweizer Bank sind, stellt uns oft vor Herausforderungen bei der Software, die wir verwenden dürfen. Heutzutage ist fast alles cloudbasiert, und gemäß den Vorschriften müssen alle Daten auf lokalen Servern gespeichert werden. Das schränkte unsere Möglichkeiten bei den Tools, die wir verwenden konnten, ein wenig ein.
Glücklicherweise nutzte Sygnum bereits Figma, so dass die Entscheidung leicht fiel, dieses Designtool für unser Designsystem und unsere Dokumentation zu verwenden.
Die Komponentenbibliothek sollte in Storybook untergebracht werden. Dies würde es den Entwicklern ermöglichen, die kodierte Ausgabe unseres Entwurfssystems problemlos zu nutzen.
Wir begannen mit der Installation des offiziellen Material UI Figma Designsystems in unserem Sygnum Figma Team. Das grundlegende Designsystem sieht natürlich sehr Google/Android-orientiert aus. Wir wollten die Basis dieser Elemente beibehalten, ihnen aber einen individuellen Charakter verleihen.
Wir arbeiteten an einem neuen Thema für Sygnum und legten die Farben und Schriftarten fest, die wir verwenden wollten. Die Farbpalette in der aktuellen PDF-Datei mit den Richtlinien war sehr begrenzt, also arbeiteten wir daran, neue Farben einzuführen. Die größte Herausforderung bestand darin, dass unsere Hauptfarbe rot ist (eine Fehlerfarbe) und unsere Sekundärfarbe grau (eine Farbe für Behinderte). Daher mussten wir uns bei der Einführung von Farben etwas einfallen lassen, um dieses Problem zu umgehen. Die Schriftart, die wir für den Haupttext verwendeten, wird seit kurzem auch nicht mehr von Adobe unterstützt. Wir wollten also diese Schriftart ersetzen, ohne dass alle aktuellen Designs zerstört werden.
Als Nächstes arbeiteten wir an den Komponenten der Atomebene in Atomic Design. Wir wollten unser Designsystem mit den Basiskomponenten wie Schaltflächen, Warnmeldungen, Textfeldern, Breadcrumbs und Icons erden.
Wir bauten jede Komponente responsiv, mit drei verschiedenen Größen, um alle Bruchstellen des Bildschirms abzudecken. Wir haben auch darauf geachtet, dass wir alle möglichen Zustände abdecken. Zum Beispiel Standard, schwebend, ausgefüllt, Fehler und deaktiviert. Wir haben die Barrierefreiheit im Auge behalten und den Farbkontrast jeder Komponente mit dem Able Figma Plugin überprüft.
Schließlich gingen wir zu den komplexeren Komponenten über, darunter Moleküle, Organismen und Layouts.
Jetzt konnten wir sehen, wie sich unser Entwurfssystem zusammensetzt, und fühlen, wie es in der Praxis funktionieren würde.
Nachdem wir unsere Komponenten entworfen hatten, mussten wir sie in Code umsetzen. Wir arbeiteten mit einem zentralen Frontend-Team zusammen, um ein einziges Komponenten-Repository zu erstellen.
Es war uns sehr wichtig, sicherzustellen, dass unser neues Designsystem von jedem neuen Entwickler (oder Designer) übernommen und verstanden werden konnte. Deshalb haben wir jede Komponente ausführlich dokumentiert, damit jeder die Funktionalität und die Gründe für diese Funktionalität verstehen kann.
.png)
Das Designteam nutzte wöchentliche Abstimmungsrunden, um internes Feedback zu den Komponenten zu sammeln und Anpassungen vorzunehmen. Wir verwendeten auch Figma-Kommentare, um sicherzustellen, dass nichts verloren ging oder vergessen wurde.
Wir richteten einen Prozess ein, um die Entwickler über Änderungen an den Komponenten zu informieren und uns mitzuteilen, wenn sie zur Überprüfung bereit waren.
Das Kommunikationssystem, das bei Sygnum bereits vorhanden war, war die Verwendung von Jira. Daher war es eine leichte Entscheidung, dieses System weiter zu verwenden. Wir richteten ein Board speziell für dieses Projekt ein und erstellten Tickets, um uns gegenseitig Änderungen mitzuteilen. Die Designer wiesen Tickets für alle Änderungen zu, und die Entwickler wiesen Tickets zur Überprüfung zurück.
Das Sygnum Design System ist jetzt in Betrieb und wird für die Entwicklung und Herstellung von Produkten verwendet. Wie bei jedem technologiebezogenen System handelt es sich um ein lebendes Dokument, das sich ständig verbessern und weiterentwickeln wird. Wir werden uns stets bemühen, die neuesten Industriestandards zu erfüllen und unser Design so zu verbessern, dass es für alle Benutzer geeignet ist.
Wir hoffen, dass der nächste Schritt in unserer Entwicklung darin besteht, ein System für eine bessere Dokumentation und Zusammenarbeit mit anderen internen Teams wie dem Marketing einzuführen. Dies würde uns in die Lage versetzen, Assets wie Icons, Illustrationen und Fotos gemeinsam zu nutzen und bei Änderungen an Markenelementen wie Farben oder Schriftarten eine einzige Quelle der Wahrheit zu haben.
.svg)
.png){kind=small}
