2024
Pax Versicherung
Eine neue Identität braucht mehr als eine neue Startseite. Das System dahinter habe ich zusammen mit der UX/UI-Designerin von Pax gebaut: eine UI-Komponenten-Library, in der die Marke eine Variable ist.
Gegeben
Eine Marke hält nur, wenn der hundertste Button aussieht wie der erste.
Angefangen hat es beim Kundenportal my.pax.ch: dahinter lagen Jahre an Anbauten und eine Architektur, die sich gegen jede Änderung wehrte. Jedes neue Feature dauerte länger, als es sollte. Der Auftrag war zweierlei auf einmal: ein neues UX/UI und ein Refactoring, tief genug, um das Portal von der alten Architektur zu lösen und den Code wieder einfach zu machen. Dann kam der Brand Refresh, und die Komponenten aus diesem einen Portal wurden zum Fundament einer gemeinsamen Library.
- /aDerselbe Button muss auf der Marketing-Website und in einem internen Werkzeug gleich aussehen und sich gleich verhalten, auch nach der nächsten Anpassung der Marke.
- /bDer neue Auftritt ruht auf zwei Farben: einem grünen Primary und einem tiefvioletten Secondary. Schreibt man sie fest in hundert handgebaute Komponenten, wird jedes Rebranding zum Durchsuchen jeder einzelnen Datei.
- /cDie öffentliche Website und die internen Apps teilen sich keine Laufzeitumgebung. Eine Library musste überall rendern, serverseitig gerenderte Seiten eingeschlossen, ohne dass ein Compiler im Browser landet.
- /dEine echte Produktoberfläche braucht Dutzende Komponenten, jede auf demselben Qualitätsniveau. Sonst vertraut niemand dem System genug und jeder baut sich seine eigenen.
Beweis
Die Marke ist eine Variable. Komponenten nennen nie eine Farbe. Ein Button fragt nach --background-brand, ein Eingabefeld nach --border-focusring. Diese semantischen Namen lösen sich über eine Token-Pipeline aus Figma zum Pax-Grün und zum tiefen Violett auf. Tauscht man die zwei Markenwerte, kleidet sich die ganze Library neu ein, hell und dunkel, ohne dass eine einzige Komponentendatei angefasst wird. Das ist die Grenze zwischen einem Komponenten-Baukasten und einem Designsystem.
#8ccd0f primary#3c0078 secondary--background-brand löst den Rest auf
Zwei Markenfarben, eine ganze semantische Schicht.
Grün und Tiefviolett sind die einzigen Markenentscheide. Flächen, Text, Rahmen, Fokusringe und Zustände lesen alle aus semantischen Tokens, die sich zu diesen beiden auflösen. Design entscheidet in Figma, der Code folgt. Ändert man die Marke an einer Stelle, zieht alles nach, weil ausserhalb der Token-Schicht niemand weiss, dass es Hex-Werte gibt.
Brand-Primitives → semantische Tokens → Komponenten
Hell und dunkel aus einer Quelle.
Ein Theme ist nichts weiter als ein zweiter Satz aufgelöster Werte. Weil Komponenten semantische Tokens konsumieren und nie rohe Farben, ist der Dark Mode kein zweites Stylesheet, das jemand pflegen muss. Er ergibt sich aus demselben Mechanismus: automatisch über prefers-color-scheme oder erzwungen über ein Data-Attribut.
Dieselbe Komponente, zwei aufgelöste Themes
Wie die Library auf jede Oberfläche kommt
Die Library ist vollständig ahead-of-time kompiliert und serverseitig renderbar, also tragen dieselben 84 Komponenten die öffentliche Website und die internen Apps aus einem Paket. Jede Komponente bringt eine Storybook-Story auf ui.pax.ch mit. Das System ist ein durchblätterbarer Katalog.
Eine Quelle, jede Oberfläche
Umbau
Aus einem unwartbaren Portal wurde eines, auf dem sich wieder schnell bauen lässt.
Der Umbau löste das Kundenportal my.pax.ch von der alten Architektur und vereinfachte es so weit, dass neue Features wieder schnell Platz finden und aus Reibung Fluss wurde. Die Komponenten-Library wuchs im selben Umbau, also war jedes neue Primitive an dem Tag in einem echten Produkt bewiesen, an dem es geschrieben wurde.
- An die alte Architektur gekoppelt
- Jedes Feature dauerte länger als nötig
- Jede Änderung zog sich durch den ganzen Code
- DX: Reibung
- Entkoppelt und wartbar
- Neue Features sind wieder schnell gebaut
- Library im echten Produkt erprobt, während sie wuchs
- DX: Fluss
Stimmen
Nahezu eigenständig verantwortete er das Redesign unseres Kundenportals. Das Portal diente als Grundlage für eine gemeinsame Komponenten-Bibliothek, die heute produktiv in mehreren Applikationen eingesetzt wird.
Zu zweit haben wir ein Designsystem inklusive eigener Angular-UI-Library im Brand Refresh aufgebaut und erfolgreich auf mehrere digitale Produkte ausgerollt. Besonders geschätzt habe ich sein Mitdenken und seine proaktive Arbeitsweise.
Du hast einen wesentlichen Beitrag zur Entwicklung und Einführung unserer Pax UI Libraries geleistet und erfolgreich die Brücke zwischen Digital Sales und Software Engineering gebaut.
Q.E.D.
- /01 Zwei Markenfarben kleiden die ganze Library neu ein, hell und dunkel, ohne eine Komponente anzufassen. ↳ /b
- /02 Eine Quelle der Wahrheit: Figma-Tokens fliessen in den Code, so driften Design und Engineering nicht mehr auseinander. ↳ /a
- /03 Vollständig AOT-kompiliert und SSR-sicher, also läuft ein Paket auf jeder Oberfläche. ↳ /c
- /04 84 Komponenten, jede dokumentiert und durchblätterbar auf ui.pax.ch. ↳ /d
- /05 Trägt das neue pax.ch und die internen Applikationen von Pax aus einer einzigen Library. ↳ /a · /c
- /06 Vom Altbestand losgelöst: neue Features finden wieder schnell Platz, aus Reibung wurde Fluss. ↳ Umbau