Puzzle: ein Storybook-Designsystem für eine ganze Produktorganisation

Die Aufgabe

Wenn mehrere Produktteams jeweils eigene Buttons, Modale und Formularfelder bauen, sieht das Produkt nicht mehr wie ein Produkt aus, und jede Barrierefreiheits-Korrektur muss mehrfach gemacht werden. Eine gemeinsame Bibliothek löst das nur, wenn die Teams sie auch übernehmen — womit Dokumentation und Stabilität Teil des Engineering-Problems werden.

Umsetzung

• Eine gemeinsame Komponentenbibliothek entstand, jede Komponente in Storybook dokumentiert, sodass die Übernahme nicht davon abhing, den Autor zu fragen.
• Die API-Oberfläche blieb bewusst klein und Änderungen wurden sorgfältig versioniert — ein Breaking Change in einer geteilten Bibliothek ist ein Breaking Change in allen Produkten zugleich.
• Beiträge zu Dispatcher, einem eigenen State-Management-Werkzeug, das neben der Bibliothek eingesetzt wird.
• Die Bibliothek wurde dauerhaft gepflegt statt ausgeliefert und liegengelassen — genau die Phase, in der die meisten Designsysteme still eingehen.

Ergebnis

• Eine Komponentenbibliothek, teamübergreifend übernommen statt mehrerer auseinanderlaufender.
• Oberflächenkonsistenz und Barrierefreiheits-Korrekturen einmal und zentral umgesetzt.
• Eine dokumentierte, versionierte Abhängigkeit, die andere ohne Rückfragen nutzen konnten.

Beteiligte Leistungen

• React- und Next.js-Entwicklung

  React-Frontends, die schnell bleiben, während das Produkt wächst.