Busch-Jaeger — Labeling Tool, UX/UI & Web Development

Projekt · Labeling Tool, UX/UI & Web Development

See it. Label it. Done.

Branche: Elektro- & Gebäudetechnik
Rolle: Konzept, UX/UI & Entwicklung
Aufgabe: WYSIWYG-Beschriftungstool für 1.500+ Produkte

#labeling
#wysiwyg
#uxui
#webdevelopment
#configurator
#pdf
#tooling
#b2b

Ausgangssituation

1,500+ products. Endless label options.

Busch-Jaeger bietet eine enorme Produktvielfalt im Bereich Schalter und Gebäudetechnik. Viele dieser Produkte lassen sich individuell beschriften, mit Texten, Symbolen, unterschiedlichen Schriften, Größen und Farben.

Was technisch möglich war, musste für Nutzer aber auch einfach beherrschbar werden.

Gerade bei größeren Projekten, etwa in der Architektur, reicht es nicht, einzelne Labels irgendwie zu erstellen. Es braucht ein System, das große Mengen an Beschriftungen präzise, konsistent und effizient abbildet.

Herausforderung

Customization shouldn’t feel complicated.

Die Herausforderung lag nicht in der Auswahl selbst, sondern in der direkten visuellen Kontrolle.

Nutzer sollten sofort sehen, was sie eingeben und wie das Label später auf dem realen Produkt wirkt. Gleichzeitig musste das Tool für über 1.500 Produkte funktionieren, mit unterschiedlichen Flächen, Formaten und Besonderheiten.

Und genau da wird aus einem simplen Konfigurator ein echtes technisches System.

Busch-Jaeger — modulare UI-Komponenten des Beschriftungstools, Case-Study von digitalbynature

Ansatz

What you see is what you get.

Unser Ansatz war ein echter WYSIWYG-Editor.

Text eingeben, Schrift auswählen, Größe und Farbe anpassen, Symbole ergänzen und direkt sehen, wie das Ergebnis auf dem Produkt aussieht.

Keine abstrakte Vorschau. Kein Rätselraten. Sondern eine direkte visuelle Übersetzung der Eingabe auf das jeweilige Busch-Jaeger Produkt.

Lösung

Built for every label. Every product.

// 01
WYSIWYG Editor

Der Kern des Tools ist die direkte Vorschau. Alle Eingaben werden unmittelbar auf dem ausgewählten Produkt dargestellt. Nutzer können Schriften, Schriftgrößen, Farben und Symbole kombinieren und das Ergebnis direkt kontrollieren. Was konfiguriert wird, sieht man sofort.
// 02
1.500+ Produkte

Das System wurde so aufgebaut, dass es mit der kompletten Schalter-Sparte von Busch-Jaeger funktioniert. Über 1.500 Produkte mit unterschiedlichen Formen und Beschriftungsflächen werden im Tool berücksichtigt. Damit eignet sich die Anwendung sowohl für einzelne Beschriftungen als auch für größere Projekte mit vielen unterschiedlichen Produkten.
// 03
Download oder Bestellung

Nach der Konfiguration endet der Prozess nicht bei der Vorschau. Labels können direkt als PDF heruntergeladen und selbst ausgedruckt werden. Alternativ lassen sie sich kostenlos auf unterschiedlichen Folien und Papieren bestellen. So wird aus dem digitalen Editor direkt ein fertiges, nutzbares Ergebnis.
// 04
Built for Architects

Gerade bei größeren Gebäuden entstehen schnell sehr viele Beschriftungen. Das Tool unterstützt deshalb auch Anwendungsfälle, bei denen ganze Gebäude systematisch beschriftet werden müssen. Einheitliche Gestaltung, schnelle Anpassungen und direkte Ausgabe machen den Prozess deutlich effizienter.
// 05
The Triton Challenge

Nicht jedes Label ist flach. Beim Produkt Triton liegt die Beschriftungsfläche auf einer Krümmung. Dadurch konnten Buchstaben nicht einfach linear platziert werden. Für diese Anwendung haben wir die Krümmung mathematisch berechnet und die Position jedes einzelnen Buchstabens entsprechend angepasst. Damit sieht die Beschriftung im Editor so aus, wie sie später auch auf dem realen Produkt erscheint.

Eindrücke

From input to product.

Text, Symbol, Farbe, Format und Produktansicht greifen direkt ineinander. Aus einem komplexen Beschriftungsprozess wird eine Anwendung, bei der Nutzer jederzeit sehen, was sie gerade gestalten und was am Ende tatsächlich herauskommt.

Busch-Jaeger — der Ablauf vom Produkt über den Label-Editor bis zu Download und Druck, Case-Study von digitalbynature

Busch-Jaeger — Typografie-System des Beschriftungstools mit der Schrift Averta, Case-Study von digitalbynature

Ergebnis

Complex logic. Simple experience.

Aus einer riesigen Produktwelt und unzähligen Beschriftungsoptionen wurde ein zentraler Editor, der individuelle Labels schnell, präzise und direkt am Produkt konfigurierbar macht.

Über 1.500 Produkte, verschiedene Schriften, Farben, Symbole, PDF-Ausgabe, Bestellprozess und Sonderlösungen wie die Triton-Krümmung greifen in einem System zusammen.

Für Nutzer einfach. Im Hintergrund technisch ziemlich anspruchsvoll.

1.500+ Produkte im Tool abgebildet
WYSIWYG Jede Änderung sofort am Produkt sichtbar
Flexibel PDF-Download oder kostenlose Bestellung
Präzise Selbst gekrümmte Label-Flächen mathematisch korrekt berechnet

Busch-Jaeger — Labeling Tool, UX/UI & Web Development

1,500+ products. Endless label options.

What you see is what you get.

WYSIWYG Editor

1.500+ Produkte

Download oder Bestellung

Built for Architects

The Triton Challenge