Wie bereits in den vergangenen Blogposts erläutert, optimieren wir durch den Einsatz von Web- und Cloud-Technologien sowie mittels Standards und Automatisierung die nachhaltige Effektivität und Effizienz im Umgang mit unserer zukünftigen Anwendungslandschaft.
Eine fachliche Anforderung, die mit dieser Zielsetzung hervorragend vereinbar ist, war der Relaunch des Corporate Designs der Deutschen Vermögensberatung im Jahr 2020, der zum Ziel hatte, ein neues und einheitliches Markenbild im digitalen Umfeld einzuführen sowie kontinuierlich und zentral zu managen.
Ausgangslage
Unsere Softwarelösungen werden von einer Vielzahl an unterschiedlichen Entwicklungsteams in verschiedenen Einheiten und Organisationen betreut. Die Arbeit dieser dezentralen Teams führte bisweilen zu inkonsistenten und ineffizienten Nutzererfahrungen innerhalb unserer Anwendungslandschaft. Dies lag vor allem daran, dass fachliche Anforderungen von jedem Team eigenständig in User-Interfaces übersetzt und Design-Entscheidungen individuell interpretiert wurden. Ohne fest definierte Vorgaben fehlten für die VermögensberaterInnen oft übergreifend wiedererkennbare Interaktionselemente und Muster in ihren täglichen Arbeitswerkzeugen.
Auch intern führte diese Art der Design- und Entwicklungsarbeit zu optimierungsfähigen Abstimmungsprozessen und Aufwänden. Neue Anforderungen – fachlich oder durch die VermögensberaterInnen angeregt – wurden dementsprechend oft langsamer umgesetzt. Qualitätsmerkmale wie zum Beispiel eine konsistente Responsivität stellte jedes Team einzeln vor Herausforderungen.
Das Design-System als Lösungsansatz
Als Antwort auf die fachliche Anforderung unserer Markeneinheit und die geschilderte Ausgangslage entstand daher die Idee für das Design-System, das in der Folge bei unseren Teams der compeople entwickelt wird.
Hauptmotivation unseres Design-Systems ist in erster Linie das Konzept einer zentralen und übergreifenden Definition sowie das Management der mit dem Corporate Design verbundenen allgemeingültigen Design-Komponenten.
Zur prozesshaften Etablierung und Unterstützung dieses Systems haben wir eine UX-Gilde mit einem Buddy-System eingeführt, um diese Allgemeingültigkeit und damit eine breite Verwendbarkeit von Komponenten zu erreichen. UX-Designer, -Researcher, Anwendungsentwickler und Markenexperten stehen so kontinuierlich miteinander im Austausch. Design-Lösungen werden gemeinsam diskutiert und Entscheidungen innerhalb eines fortlaufenden Prozesses verbindlich getroffen und dokumentiert.
Das System selbst soll die Bereitstellung dieser allgemeingültigen Komponenten End2End ermöglichen, d.h. von der Konzeption bis zum konkreten Einsatz. Die Standard-Komponenten des Design-Systems werden dabei im hauseigenen Markenportal beschrieben inkl. aller Individualisierungsmöglichkeiten im Design. Auch Anwendungsentwickler finden eine zugeschnittene Dokumentation mit Guides, API-Beschreibungen und Live-Beispielen vor.
Um eine möglichst schnelle und effiziente Durchdringung des Systems zu erreichen, sollen alle unsere Entwicklungsteams die bestehenden Komponenten für ihre Anwendungen nutzen und neue, eigene Komponenten ähnlich einem Open-Source-Produkt den übrigen Teams zur Verfügung stellen können. Wenn eine neue Web-Anwendung konzipiert wird, werden meist die gleichen Basis-Bestandteile benötigt. Dies kann zum Beispiel ein Header sein, der dem Nutzer immer ähnliche Funktionen anbietet und durch die Anwendung navigiert.
Der User-Flow für die VermögensberaterInnen muss dabei auch im Übergang zu anderen Anwendungen gut funktionieren. Einheitliche Interaktionselemente und -muster schaffen hierbei Orientierung. Im ersten Schritt haben wir daher dafür gesorgt, dass über das Design-System schnellstmöglich allgemeingültige Basis-Komponenten zur Verfügung gestellt werden, die jedes Entwicklungsteam einsetzen kann. Lösungsvorschläge zu Spezialanforderungen, die nur für einen individuellen Kontext aufkommen, werden aktuell in den dezentralen Entwicklungsteams erarbeitet und nach zentralem Review durch die UX-Gilde als allgemeingültige Komponente umgesetzt.
Die Existenz eines solchen Design-Systems garantiert allerdings per se noch keine guten Benutzeroberflächen. Insbesondere für fachlich komplexe Anforderungen, z.B. an Tabellen oder Listen, müssen intuitive und auch responsiv überzeugende Lösungen gefunden werden. Durch die Vorteile des Design-Systems gewinnen alle Beteiligten allerdings mehr Zeit für diese konzeptionelle Arbeit.
Design-System im Detail
Das Design-System ist eine Bibliothek, die wiederverwendbare Benutzeroberflächen mittels modularer (UI)-Komponenten an einer zentralen Stelle zur Verfügung stellt. In den Komponenten ist das Design-Konzept des Unternehmens definiert und umgesetzt: sowohl visuell in Form von Design-Elementen als auch funktional in Form von Code. Prinzipien und Guidelines geben die gestalterische Ausrichtung der Marke vor. Zentrale Qualitätsvorgaben wie eine konsequente Responsivität auf mobilen Endgeräten werden heute durch das Design-System in allen bereitgestellten Komponenten out-of-the-box mitgeliefert. Die Entwicklungs-Teams der einzelnen Anwendungen können sich auf diese Qualität verlassen und sich auf anwendungsspezifische Herausforderungen konzentrieren. Um allen internen Anwendern eine optimale Qualität zu liefern, hat sich das Design-System-Team auf einen strengen Reviewprozess geeinigt. Eine hohe Testabdeckung durch über 4.000 Screenshot-Tests und die Möglichkeit, alle Komponenten in verschiedenen Betriebssystemen und Browser zu testen, hat die Anzahl Release-verhindernder Bugs auf ein Minimum reduziert und ermöglicht uns gleichzeitig kurze Release-Zyklen.
1. Design
Bei der Bereitstellung der Design-Komponenten haben wir uns für Figma als zentrales Prototyping-Tool für alle Designer entschieden. Figma erfüllt dabei vor allem den Anspruch an maximale Kollaboration im Team und bietet sehr gute Möglichkeiten, teamübergreifend zentral gepflegte Komponenten-Libraries zur Verfügung zu stellen.
Darüber hinaus folgt das Design-System dem Atomic-Design Prinzip, bei dem Basiselemente und -komponenten auf kleinster Ebene definiert und beliebig miteinander zu funktionalen Interaktionselementen zusammengesetzt und erweitert werden können (mehr zu diesem Thema findet ihr hier). So kann selbst das Design komplexer Oberflächen methodisch aufgebaut werden. Auch der dahinterliegende Code ist entsprechend logischer aufgebaut. So lassen sich Code-Segmente schneller identifizieren und Änderungen schneller durchführen.
Der zentrale Ansatz des Design-Systems ermöglicht uns darüber hinaus übergreifende Weiterentwicklungen beim Thema Barrierefreiheit. Erste Maßnahmen waren hier die Definition eines Schemas für hohe Kontraststärke, die Festlegung einer Hierarchie in der Typographie oder die vollunterstütze Tastatur-Navigation. Begleitet werden diese Maßnahmen mit ausführlichen Usability- und UX-Writing-Vorgaben.
Unser Ziel ist es, dem W3C Double-A-Standard zu entsprechen und so unsere Anwendungen auch für NutzerInnen mit Sehschwäche oder Handicap leicht bedienbar und somit nutzbar zu machen.
2. Technik
Die einzelnen Design-System Elemente werden als HTML Web Components umgesetzt. Web Components ist ein W3C Standard, der von allen modernen Browsern (Chrome, Edge, Firefox) unterstützt wird. Bei der Implementierung nutzen wir das Framework „stencil.js“ , um möglichst kompakten, wiederverwendbaren HTML-Code zu erstellen. Damit erreichen wir für unsere Anwender minimale Ladenzeiten.
Mit Blick auf die Performance haben wir verschiedene Alternativen untersucht. Im Beispielsfall von Angular haben wir in der Vergangenheit im Bereich der Ladezeiten häufig Probleme identifiziert, weil stets Teile des Angular-Frameworks zur Laufzeit nachgeladen werden. Das Problem ist bekannt und soll auch in neueren Versionen adressiert werden. Stencil.js hingegen generiert optimierte Builds, die unter anderem Polyfills enthalten und es daher ermöglichen, auch auf älteren Browsern lauffähig zu sein. Die Builds haben keine Abhängigkeiten zu anderen Bibliotheken und sind sehr klein, damit bleiben die Ladezeiten gering.
Für Stencil.js spricht daneben, dass es leicht zu erlernen und einfach zu verwenden ist; es bietet Unterstützung für TypeScript sowie JSX. Mit JSX können Entwickler komponentenbasierte Benutzeroberflächen erstellen, indem sie HTML-ähnliche Elemente in JavaScript-Code schreiben. JSX kommt auch im bekannten Web-Framework „React“ zum Einsatz.
Ein einfaches Beispiel zum Erstellen einer Web Component „my-first-component“ mit Sencil.js, die einen übergebenen Namen als Text ausgibt, könnte wie folgt aussehen:
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'my-first-component',
})
export class MyComponent {
@Prop() name: string;
render() {
return (
<p> Mein Name ist {this.name} </p>
);
}
}
Nach dem Kompilieren kann die Web Component in einer HTML-Seite wie folgt genutzt werden:
<my-first-component name="Nena"></my-first-component>
Als Ergebnis wird auf der Seite der Text „Mein Name ist Nena“ ausgegeben. Um Sencil.js zu nutzen, ist wie bei fast allen Frameworks im Web Umfeld node.js und npm eine Voraussetzung. Einen guten Einstiegspunkt zur Orientierung in Stencil.js könnt ihr hier finden.
Unsere HTML Web Components können mit vorhandenen Frontend-Frameworks (wie z.B. Angular, React oder Vue.js) genutzt werden, basieren aufgrund der Nutzung der Web Components aber nicht selbst unmittelbar auf einem dieser Frameworks. Damit erhöhen wir die Nutzbarkeit in verschiedenen Umfeldern und Entwicklungs-Teams, während wir gleichzeitig die Lernkurve zum Einsatz der Komponenten minimieren.
Ein konkretes Beispiel für die Einbindung des Design-System wollen wir an unserer Beratungsanwendung “Vermögensplanung Digital” zeigen. Neben der Herausforderung die fachliche Komplexität gemeinsam mit unseren Fachbereichen konsistent verständlich und intuitiv bedienbar zu designen, arbeiten wir auch technisch mit verschiedenen Entwicklungsteams sowie Teams unserer Produktpartner, was die Umsetzungskomplexität zusätzlich treibt. Um mit diesen verschiedenen Umsetzungsteams eine Lösung umzusetzen, die der Nutzer – vor allem bezüglich der Benutzeroberfläche – als seamless wahrnimmt, nutzen wir Micro-Frontends (implementiert mit dem Luigi-Framework, Details hierzu in diesem Artikel). Ohne ein gemeinsames Design-System wäre die Abstimmung dieser einzelnen Frontend-Komponenten unter den verschiedenen Teams nur mit hohem Aufwand und Abstimmung zu erreichen – und auch nach Fertigstellung wären durchgehende und einheitliche Anpassungen nur schwer zu realisieren und/oder mit hohem Wartungsaufwand verbunden.
Um das Design-System wie im Fall von “Vermögensplanung Digital” in React nutzen zu können, muss zunächst über NPM das Package integriert werden:
npm install @dvag/design-system@1.4.0
npm install @dvag/design-system-react@1.4.0
In der Root-Index.html Datei muss dann für unseren eigenen DVAG Font ein CSS referenziert werden:
<link rel="stylesheet" href="/path/to/css-directory/design-system.css" />
Danach kann das Design System in React genutzt werden, hier am Beispiel von Tag DxText, für die Darstellung von Text als Headline:
import { DxText } from "@dvag/design-system-react";
function SomeReactComponent() {
return <DxText type={"h1"}>Headline in DesignSystem</DxText>;
}
Damit Entwickler einfach mit dem Design System arbeiten können, haben wir eine entwicklerzentrierte Dokumentationsseite angelegt. Diese Dokumentation beinhaltet einen interaktiven Teil, innerhalb dessen die einzelnen Web Components direkt sichtbar sind, ihre HTML-Beispiele live geändert werden können und dabei das Ergebnis der Änderung sofort sichtbar ist.
Das Design-System im Einsatz
Mit bisher über 50 bereitgestellten UI-Komponenten und einer breiten Verwendung des Design-Systems in unserer Anwendungslandschaft haben wir inzwischen den Reifegrad einer Version 1.0 erreicht. Die Marken-Experten der Deutschen Vermögensberatung haben uns dabei tatkräftig begleitet, um sicherzustellen, dass der Look-and-Feel des Design Systems in die Ziele der DVAG-Brand einzahlt.
Es stellte sich als eine organisatorische Herausforderung dar, mit über 15 verschiedenen Entwicklungsteams an unterschiedlichen Standorten und Organisationseinheiten, alle Stakeholder über Fortschritte und Neuerungen des Design-Systems auf dem Laufenden zu halten. Zu diesem Zweck bietet die DVAG Design- und Entwicklercommunity unterschiedliche Formate für Release News, Q&As und Review-Runden an. Das Design System Team bietet darüber hinaus 1:1 Coachings an und nimmt, wann immer möglich, an Sprint Reviews und Usability Tests der dezentralen Entwicklungsteams teil.
So werden inkonsistente Lösungen und User-Flows für die Nutzer unserer Anwendungen identifiziert und konsequent durch einen einheitlichen Standard ersetzt. Da der Umstieg auf das Design-System nicht zeitgleich für die gesamte Anwendungslandschaft erfolgen kann, werden die Backlogs des Teams aus strategischer Sicht priorisiert und mit den jeweiligen Produkt-Roadmaps der Anwendungen abgeglichen.
Neben den Erleichterungen für die konkrete Anwendungsentwicklung bietet das Design-System auch den Vorteil, dass aus funktionalen und fachlichen Anforderungen in kürzester Zeit ein Prototyp erstellt werden kann, mit dem interne Stakeholder aufgrund der Anschaulichkeit schneller und transparenter Entscheidungen treffen können.
Mit der Beschleunigung des Prototyping-Prozesses können auch unsere VermögensberaterInnen einfacher in die Neu- und Weiterentwicklung von Anwendungen involviert werden. Ihr Feedback fließt jetzt an zentraler Stelle in das Design-System ein und beeinflusst so die Anwendungslandschaft übergreifend - ein signifikanter Schritt für unsere Nutzerorientierung. Mithilfe des beschleunigten Prototypings konnten wir VermögensberaterInnen bereits in über 39 Usability Tests in das Vorhaben involvieren.
Fazit
Mit dem Design-System haben wir ein weiteres zentrales Element implementiert, das sich hervorragend mit den Erwartungen unserer VermögensberaterInnen und Fachbereichen sowie unseren Ansprüchen an das Management und die Weiterentwicklung einer zukunftsfähigen Anwendungslandschaft vereinbart.
Kundenfokus & Effektivität:
- Durch die flächendeckende Verwendung des Design-Systems bieten wir unseren VermögensberaterInnen eine optimierte und konsistente User Experience über die gesamte Anwendungslandschaft hinweg.
- Das Design-System ermöglicht uns, Feedback unserer Kunden und interner Stakeholder (Fachbereiche und Management) früher und effektiver einzuholen und die Erwartungshaltungen an Interface und Experience besser zu managen. So lassen sich Entscheidungen im Sinne unserer Kunden besser und schneller treffen.
- Unseren Entwicklungsteams und entwicklungsnahen Einheiten erlaubt das Design-System im Rahmen der definierten Standars weitgehende Freiheit und Autonomie bei Entwicklung, Integration und Test ihrer jeweiligen Services und der entsprechenden Fachlichkeit sowie den Fokus auf die kritischen und komplexen Arbeiten in Konzeption und Entwicklung.
- Durch die Zentralisierung von Marken-Assets im Design System, hat unsere Markeneinheit nun ein sehr effektives Werkzeug an der Hand, um künftige Änderungen am Markenbild zentralisiert und übergreifend vorzunehmen. Die Aufwände für die jeweiligen Anwendungen werden durch die Zentralisierung signifikant minimiert und ermöglichen auch kleinere und fortlaufende übergreifende Design-Anpassungen ohne Kostenvorbehalte oder einer Verlangsamung der sonstigen Weiterentwicklung.
Effizienz:
- Die Wiederverwendbarkeit der Design- und Entwicklungsleistungen beschleunigt die gesamte Konzeption und Umsetzung bei gleichzeitig geringen Kompromissen in puncto Umsetzungsgeschwindigkeit und Komplexität. Vor allem die deutliche Reduktion von Abstimmungsaufwänden bringt Vorhaben zur Erneuerung der IT-Landschaft deutlich schneller voran und ermöglicht ebenfalls ein sehr effizientes Prototyping.
- Wir vermeiden redundante Konzeptions- und Entwicklungsaufwände und erreichen so eine signifikante Kostenersparnis in der Frontend-Entwicklung. Auch das Bug-Fixing findet im Design-System an zentraler Stelle statt und reduziert so die individuellen Aufwände in den jeweiligen Anwendungen.
Neben dem System selbst sind die teamübergreifende Kommunikation und Zusammenarbeit auf diesem Gebiet entscheidend für den Erfolg. Nur wenn alle Stakeholder gemeinsam und konsequent dieselben Ziele verfolgen und Prozesse leben, ist eine konsistente User Experience über die gesamte Anwendungslandschaft hinweg realisierbar.
Bewerbung beim UX Design Award 2023
Wir wagen den Vergleich auf Augenhöhe mit anderen Unternehmen und UX-Pionieren und nehmen mit unserem Design-System am UX Design Award 2023 teil! Macht euch selbst einen Eindruck mit unserem offiziellen Bewerbungsvideo.
Das Voting für den Public Choice Award ist gestartet und wir würden uns riesig über eure Stimme freuen!