Wenn eine in Großbritannien ansässige HR-Firma sich an Unravel mit dem Auftrag wandte, ein Designsystem zu entwickeln, was das Ziel hatte, ein einheitliches Aussehen und Gefühl für mehrere Softwareprodukte zu gewährleisten. Das Produktportfolio des Unternehmens umfasst intelligente Softwarelösungen für HR, Lohn- und Gehaltsabrechnung, LMS und Rekrutierung. Diese unterstützen HR-Teams bei einer reibungslosen Arbeitsweise und liefern gleichzeitig wertvolle Einblicke für die Personalstrategie.
Da diese Produkte von anderen Unternehmen genutzt und an deren Branding angepasst werden, muss das Designsystem das White Labelling auf einfache Weise unterstützen.
Lesen Sie weiter, um zu erfahren, wie wir das geschafft haben.
Kompatibel mit allen externen Frameworkss
Einer unserer Ansätze beim Design war es, so wenige externe Bibliotheken wie möglich zu verwenden. Mithilfe von Webkomponenten konnten wir ein Set von Komponenten zusammenstellen, das für jedes Projektteam funktioniert, gleich welches Framework es verwendet (Angular, React, Vue usw.).
Interaktion und Aufmerksamkeit stehen beim konzentrierten Lernen im Vordergrund. Aus der Perspektive des Designers ist es allerdings genauso wichtig, die Vorgehensweise des Nutzers im Lernprozess zu verstehen. Warum verhalten sie sich unerwartet und was ist das für ein Verhalten? Folgen sie dem Lernpfad so, wie wir es erwarten? Mit einem UI-Audit mussten wir Störungen und Ablenkungen identifizieren, die die Lernerfahrung beeinträchtigen und zu einer Ablehnung der Schulung führen könnten.
Einfach anpassbar für weitere Marken
Im Kontext von Designsystemen bezeichnet White Labelling die Möglichkeit, ein Designsystem so anzupassen und zu branden, dass es zur visuellen Identität eines spezifischen Produkts, einer Dienstleistung oder eines Unternehmens passt. Mit anderen Worten: Sie können Ihr Branding, einschließlich Farben, Logos und anderer visueller Elemente, auf ein Designsystem anwenden, sodass es sich nahtlos in das Gesamtbild Ihrer Marke einfügt.
White Labelling trifft auf Barrierefreiheit
Leonardo ist Adobes Tool zur Erstellung, Verwaltung und gemeinsamen Nutzung von barrierefreien Farbsystemen für UI-Design und Datenvisualisierung.
Dies ermöglicht einfaches White Labelling: Der Endkunde gibt lediglich eine Hauptmarkenfarbe an. Das Tool erstellt daraus automatisch eine vollständig barrierefreie Farbpalette.
Automatisierung von Änderungen am Design während der Entwicklung
1. Änderung in Figma
Z. B. ein Designer aktualisiert eine der Komponenten.
2. Aktualisierung der Bibliothek
Wenn die Aktualisierung fertig ist, erfolgt eine Synchronisierung mit der Komponentenbibliothek.
3. Code-Aktualisierung über API
Da Figma den Zugriff auf Bibliotheken über eine API ermöglicht, kann ein Entwickler mit nur einem Aufruf den Code auf den neuesten Stand des Designs bringen.
Die Reise einer Komponente
1. Recherche
Bewertung, welche Eigenschaften eine bestimmte Komponente haben muss.
2. Entdeckung
Das Designteam trifft sich mit den Entwicklern und der QS + 
Überprüfung der Barrierefreiheit.
3. Design
Entwerfen der eigentlichen Komponenten in Figma.
4. Entwicklung
Designelemente werden in Webkomponenten kodiert.
5. QS
Sicherstellung, dass die Entwicklung dem Design entspricht + Überprüfung der Barrierefreiheit.
6. Implementierung
Die Komponenten in einem realen Szenario einsetzen.
