Case Study – Scaling design for consistency and speed

CONTEXT
Das Telefónica Design System wird für 12 Marken eingesetzt (3 eigene und 9 Partner). Es umfasste 75+ Komponenten und wird aktiv von 50+ UX/UI Designer:innen genutzt, um Produkte für alle Marken zu entwickeln. Gleichzeitig standen wir vor der Aufgabe, das System nachhaltig zu skalieren und die Zusammenarbeit zwischen Design und Development zu optimieren.

CHALLENGE
– Arbeit mit 12 separaten Figma Libraries: jede Änderung musste 12-fach gepflegt werden → hoher Aufwand & Inkonsistenzen
– Design-to-Code Handover war fehleranfällig
– Token-Architektur zu komplex und schwer pflegbar
– Komponenten-Dokumentation lückenhaft und unübersichtlich

APPROACH
– Einführung von Figma Dev Mode & „Inspect Mode“ im Token Studio Plugin → präziseres Handover
– Neue Struktur für Komponenten-Dokumentation inkl. Workflows, Creation- & Review-Guidelines
– Design Tokens neu aufgebaut: klare Layer-Struktur, Alias-Level, dokumentiert und teamweit abgestimmt
– Komponenten modernisiert & tokenisiert (u. a. Checkbox, Input, Select, Tabs, Carousel …)
– Durchführung von Workshops zu Token-Architektur & Figma Variables

IMPACT
– Wechsel von 12 separaten Figma Libraries auf eine zentrale Library
– 10x Effizienzsteigerung in Pflege & Entwicklung → Änderungen nur einmal nötig
– Deutlich höhere Konsistenz & Qualität über alle Marken hinweg
– Whitelabel-Ansatz deutlich gestärkt → schnelleres Rollout für Partnerbrands
– Nachhaltige Skalierbarkeit → weniger Komplexität, schnellere Innovation