Brand Onboarder
Ein Figma-Plugin führt durch die Anlage einer Marke und die Eingabe ihrer Gestaltungsgrundlagen. Änderungen werden vor dem Anwenden als Vorschau geprüft.
01 Ausgangspunkt
Die Kundenbegleitung
auf der Roadshow zeigen.
Möbelhändler sollten direkt erleben können, wie die geplante App ihre Kunden begleitet. Dafür brauchten wir einen klickbaren Ablauf, der sich im Gespräch vorführen ließ. Der Roadshow-Prototyp machte aus der Produktidee eine konkrete Erfahrung.
Ein Beispiel ist der Bereich „Bestellungen“: Kunden finden dort alles rund um ihre Käufe. Größere Planungsprojekte bleiben davon unterscheidbar, weil etwa eine Küche zusätzliche Beratung, Renderings und Unterlagen umfasst.
- Beratung
- Bestellung
- Lieferung
- Service
Die zusammenhängende Kundenbegleitung bildete den Ausgangspunkt des Roadshow-Konzepts.
02 Designsystem
Gemeinsame Komponenten.
Unterschiedliche Marken.
Produktstruktur und Designsystem entwickelten wir gemeinsam. Aus konkreten Abläufen entstanden wiederverwendbare Bausteine. Beim Einsatz auf den Screens wurde sichtbar, welche Inhalte und Zustände noch fehlten.
Für unterschiedliche Möbelmarken trennten wir Gestaltungsgrundwerte von ihrer Bedeutung in der Oberfläche. Komponenten greifen etwa auf „primäre Aktion“ oder „sekundärer Text“ zu. Die Marke bestimmt die zugrunde liegenden Werte.
Dabei zeigte sich: Markenanpassung umfasst auch Typografie und Radien. Diese Unterschiede mussten sich durch das System ziehen, ohne jede Komponente pro Marke neu aufzubauen.
Die gemeinsame Grundlage verbindet die Arbeit in Figma mit Flutter und Widgetbook.
03 Meine Eigeninitiative
Die Markenanpassung
mit eigenen Werkzeugen unterstützen.
Die Vision einer App für mehrere Marken kam vom Kunden. Meine Lösung dafür war ein gemeinsamer Brand Contract: Er legt fest, wie Markenwerte in Figma und Code verwendet werden. Brand Onboarder und Brand Engine schlug ich während der Arbeit am Designsystem vor und setzte sie selbst mit KI-Unterstützung um.
FurniLoy Brand Onboarder
Brand Engine
Eine gemeinsame Regelbasis verarbeitet und prüft die Markendaten für Figma und die Flutter-Übergabe. Dazu gehören beispielsweise Kombinationen von Text- und Hintergrundfarben sowie Typografie und Radien.
Figma-Plugin und Code-Generierung verwenden dieselben Regeln. So bleibt die Markenlogik an einer Stelle nachvollziehbar.
04 Prototyp & Erprobung
Verhalten erproben.
Orientierung prüfen.
Auch den funktionalen Web-Prototyp konzipierte und implementierte ich selbst mit KI-Unterstützung. Eingaben, Filter, Couponaktivierung und Navigation reagierten auf die Nutzung. Damit konnten wir Verhalten untersuchen, das über das Wechseln zwischen Screens hinausgeht.
Ein Maze-Test mit neun Antworten lieferte konkrete Hinweise zur Orientierung:
Lieferstatus früher zeigen
Der aktuelle Stand einer Lieferung sollte innerhalb des Küchenprojekts präsenter sein.
Zugänge verständlicher machen
Standorte wurden unter „Mehr“ gesucht; Coupons unter anderen Begriffen oder über andere Wege erwartet.
Die Rückmeldungen machten vor allem Handlungsbedarf bei Informationshierarchie und Bezeichnungen sichtbar.
Ergebnis & mein Beitrag
Weitere Marken auf derselben Grundlage gestalten.
Eine gemeinsame App-Grundlage lässt sich an verschiedene Möbelmarken anpassen. Brand Contract, Figma-Plugin und Brand Engine machen diese Anpassung wiederverwendbar und halten die Regeln für Design und Code zusammen. Das schafft die Basis für den Ausbau auf weitere Händler.
Klickbare Kundenbegleitung
Ein Roadshow-Prototyp machte das Konzept für Gespräche mit Möbelhändlern erlebbar.
Designsystem & Markenwerkzeuge
Gemeinsame Komponenten, Brand Onboarder und Brand Engine unterstützen die Anpassung an unterschiedliche Marken.
Funktionaler Web-Prototyp
Interaktive Abläufe ermöglichten die Untersuchung von Bedienung und Orientierung.
Meine eigene Umsetzung umfasst Brand Onboarder, Brand Engine und Web-Prototyp. Die eigentliche App und das Backend liegen beim Entwicklungsteam.
