Mehr als 60 Designerinnen und Designer, intern und bei Agenturen, gestalten für Novartis: Web-Apps, CMS-Websites, mobile Apps und Produktmarken wie Cosentyx und Entresto. Zusammen liefern sie rund 40 bis 50 Projekte pro Jahr, in Angular, React, Vue und mehr.
Es gab keine zentrale, verbindliche Quelle für Tokens, Komponenten oder Patterns. Deshalb dauerte die Umsetzung lange, und das Nutzungserlebnis war uneinheitlich. Das erste Enterprise-System, WADS, kam 2021, erwies sich aber als zu starr. Im Design fühlte man sich eingeengt, die Entwicklung wartete bei jeder Änderung auf das Core-Team, und Migrationen dauerten Monate.
Könnte ein Designsystem jede Marke und jeden Tech-Stack bedienen, ohne zum Engpass zu werden wie sein Vorgänger?
Wir bauten es als OneDS neu auf und nutzten den Wechsel zu Figma als sauberen Neustart. Zwei Token-Ebenen trennen das Theme vom Core. Dadurch kann ein Produkt von Novartis zu Cosentyx wechseln, ohne dass Designdateien kaputtgehen. Die Komponenten folgen Material und werden als MUI-5-Pakete für React und Angular ausgeliefert, installiert über private NPM-Pakete. Design und Engineering übernahmen OneDS, und Migrationen schrumpften von Monaten auf Wochen.
Meine RolleProduct Owner, Lead UX. Ich verantwortete Produkt und UX von OneDS rund 12 Monate lang: Architektur, Tooling, Governance, das Einführungsprogramm und den Business Case gegenüber der Geschäftsleitung. Dabei arbeitete ich mit der Design- und der Engineering-Community sowie mit Führungskräften aus dem Business.
01
Lehrgeld bezahlt
Mein erstes System war ein inoffizielles, plattformübergreifendes UI-Kit in Sketch bei EF, mit grundlegenden Standards für Barrierefreiheit. Es verbesserte die Konsistenz, stiess aber bei der Führung auf Widerstand. Das lehrte mich früh, dass es bei Designsystemen zuerst um Menschen geht. Der erste Enterprise-Anlauf, WADS im Jahr 2021, kombinierte ein Kit in Sketch und Abstract mit Web Components in Stencil.js und Storybook. Für das Design war es zu starr, und die Entwicklung hing bei jeder Anpassung vom Core-Team ab.
Das EF-Kit und die Sketch-Library mit Atomen aus der WADS-Zeit: konsistent, aber in der Hand eines einzigen Teams.
02
Themes plus Plattformen ergibt Komponenten
OneDS beginnt mit einer einfachen Gleichung. Marken-Themes tragen Logo, Farbe und Schrift. Tech-Plattformen tragen die Eigenheiten jedes Browsers und Betriebssystems. White-Label-Komponenten sitzen dort, wo sich beides trifft. Wie ein gut gebauter Stuhl besteht das System aus Material, Struktur und Komponenten, und jede Ebene lässt sich ändern, ohne die anderen zu beschädigen.
Marken-Themes und Tech-Plattformen treffen sich in einem Satz White-Label-Komponenten.
03
Zwei Token-Ebenen, jedes Theme
Im Zentrum steht die Governance, die Plattformen und Themes verbindet. Eine Theme-Ebene über den Core-Tokens lässt dieselben Web-App-Komponenten von Novartis-Blau zu Cosentyx-Magenta wechseln, ohne Designdateien anzufassen. Neue Plattformen wie CMS-Websites und hybride Apps docken über dieselbe Struktur an, ebenso neue Marken wie Entresto.
Derselbe Header, dieselben Tabs, Buttons und Chips, über die Theme-Token-Ebene von Novartis auf Cosentyx umgestellt.
04
Produktionsreif im Code
Die Komponenten sind modular und kompatibel mit MUI 5, als Themes für React und Angular paketiert und in Storybook dokumentiert. Private NPM-Pakete, CLI-Installer und Automatisierungsskripte ersparten den Einrichtungsaufwand beim Einstieg. Die Roadmap erweitert den Core nach aussen, auf mehr Plattformen und mehr Marken, und Governance, Support und das Onboarding neuer Anwendungsfälle laufen ständig mit.
Die Dokumentations-Website Go/OneDS, auf der jedes Marken-Theme eine eigene Seite hat.
