Signal Iduna

Vielseitiges Design System für kreative Gestaltung und reibungslose Entwicklung
Design System

Für Signal Iduna haben wir ein vielseitiges, frameworkunabhängiges Design System konzipiert und entwickelt, das als zentrale Grundlage für Design und Entwicklung dient. Ziel war es, ein System zu schaffen, das sowohl interne als auch externe Teams bei der einheitlichen Umsetzung der digitalen Markenidentität flexibel, effizient und zukunftssicher unterstützt.

Desktop Ansicht des Signal Iduna Design Systems in Anwendung

Approach & Technologie

Unser Ansatz konzentrierte sich auf ein enges Zusammenspiel von Design und Entwicklung.
Entscheidende Design-Elemente und Dokumentationen wurden direkt aus Figma in Storybook integriert, das als Single Source of Truth diente. Dadurch entstand eine klare, nachvollziehbare Verbindung zwischen Design-Guidelines und der technischen Umsetzung.

Für die Frontend-Komponenten setzten wir auf Lit.dev - eine moderne Lösung auf Basis von Web Components. So bleibt das Design System unabhängig von spezifischen Frameworks und kann flexibel in verschiedenen Projekten und Umgebungen eingesetzt werden.

Mobile Ansichten des Signal Iduna Design Systems in Anwendung

Unsere Lösung

Das neu entwickelte Design System bildet heute den zentralen Ankerpunkt der digitalen Markenkommunikation von Signal Iduna. Es ermöglicht eine konsistente Nutzung von Design-Elementen über alle Plattformen hinweg und fördert die Zusammenarbeit zwischen Designern und Entwicklern.

Dank der dokumentierten und wiederverwendbaren Komponenten konnten redundante Aufwände erheblich reduziert und Entwicklungsprozesse deutlich beschleunigt werden.
Das Ergebnis ist ein skalierbares, modernes System, das kreative Gestaltung, technologische Agilität und Markenharmonie miteinander vereint.

Verwendeter Technologie-Stack

Figma
Lit
Webpack

Herausforderungen und wie wir sie gelöst haben:

Herausforderungen

  • Uneinheitliches Design
    Inkonsistente Designs und redundante Komponenten über mehrere Teams hinweg
  • Kommunikationslücken zwischen Teams
    Mehraufwand aufgrund von fehlender Verbindung von Design & Entwicklung
  • Abhängigkeit von spezifischen Frameworks
    Eingeschränkte Wiederverwendung und Skalierbarkeit bestehender Systeme
  • Fehlende Effizienz
    Mehrfache Erstellung von ähnlichen Komponenten in unterschiedlichen Teams

Lösungen

  • Frameworkunabhängiges Design System Gemeinsame Grundlage für alle Teams, um eine einheitliche Markenwelt zu garantieren
  • Integration von Figma in Storybook
    Zentrale Single Source of Truth für alle Komponenten, Guidelines & Spezifikationen
  • Lit.dev Web Components
    Frameworkunabhängige Umsetzung für Flexibilität in verschiedenen Projekten
  • Zentraler Komponenten-Hub
    Effiziente, konsistente Entwicklung und geringeren Pflegeaufwand