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.
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.
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.
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.
Z. B. ein Designer aktualisiert eine der Komponenten.
Wenn die Aktualisierung fertig ist, erfolgt eine Synchronisierung mit der Komponentenbibliothek.
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.
Bewertung, welche Eigenschaften eine bestimmte Komponente haben muss.
Das Designteam trifft sich mit den Entwicklern und der QS +
Entwerfen der eigentlichen Komponenten in Figma.
Designelemente werden in Webkomponenten kodiert.
Sicherstellung, dass die Entwicklung dem Design entspricht +
Die Komponenten in einem realen Szenario einsetzen.