B2B-Marktplatz
Neuausrichtung der Marke, Designsystem, Productflows
Ausgangslage
Worum es ging
Ein B2B-Marktplatz für Musik, über Jahre gewachsen. Neukonzeption der User Experience und Produktinnovation setzten ein neu konzipiertes User Interface voraus.
Die Modernisierung lief auf mehreren Ebenen gleichzeitig: Markenstrategie, modularisiertes UI und tokenisierte Übergabe an die Umsetzung inklusive Dokumentation, mit der das Team nahtlos weiterarbeiten kann. Etwas Bestehendes zu überarbeiten und weiterzuentwickeln ist schwerer, als eine Marke neu zu zeichnen.
Der Prozess
Erst die Foundations, dann die Komponenten
Die Marke bekommt eine neue Form, ohne dass die Beziehung zu den Bestandskunden reißt, während das Produkt umgestellt wird.
Das umfangreiche Set an Komponenten wurde anhand des Bedarfs der geplanten Flows ermittelt. Doch zuvor wurden die Foundations angelegt: Variable Collections für Farbe, Typografie, Abstände, Radien und Elevation, jeweils für Dark Mode und Light Mode. Die Modi sind nicht gespiegelt: wo ein Kontrast nicht trug, bekam die Rolle im anderen Modus einen eigenen Wert.
Die Werte liegen als semantische Tokens vor. Komponenten greifen auf Rollen zu wie text/primary oder surface/component, nie auf feste Farbwerte. Ein Moduswechsel ist damit eine Frage der Laufzeit. Die Gestaltungsarbeit steckt in den Tokens und wurde einmal gemacht.
Darauf die Komponenten
Buttons, Icon Buttons, Inline Links, Text Inputs und zusammengesetzte Felder. Jede hat eine kleine, vorhersagbare Menge an Properties. Bei zusammengesetzten Komponenten erscheinen die Eigenschaften der inneren Elemente direkt am äußeren, über Exposed Instances. Das spart das übliche Weiterreichen von Properties und die Fehler dabei.
Parallel wurden UX-Writing-Richtlinien erarbeitet, die unmittelbar in den Prototype-Build in die Microcopy einfließen konnten.
Auf dieser Grundlage entstanden die ersten drei essenziellen Produkt-Flows. Sie wurden in Figma mit KI-Unterstützung prototypisiert und an den Engineering-Partner übergeben, der agentisch arbeitet.
Die Dokumentation liegt nicht daneben, sondern bei der Komponente in Figma und wurde parallel zum Build festgehalten: Anatomie, Properties als Tabelle, Zustandsmatrix und Hinweise für die Migration älterer Versionen. Alle Frames folgen demselben Muster, sodass Engineering das Format einmal lernt.
Des Weiteren wurde ein Projekt-Handover als .md-Datei mit allen Informationen zum Designsystem, den Entscheidungen, die getroffen wurden, und dem Build übergeben.
Ergebnis
Was es gebracht hat
Die Marke ist neu aufgestellt, das Designsystem geliefert, Engineering kann damit nahtlos weiterarbeiten. Dark Mode und Light Mode standen von Anfang an gleichwertig nebeneinander, ein Nachrüsten entfällt. Die Komponentenbibliothek ist kleiner, weil Varianten zusammengefasst wurden. Das senkt den Pflegeaufwand. Die Bibliothek hängt in Storybook, die Dokumentation in Figma und als Markdown-Datei. So bleibt das Wissen im Unternehmen, lesbar für das Team und für seine Werkzeuge.