lichtwerk

Online-Konfigurator für individuelle Lichtkonzepte

Architekten und Planer online erreichen: Mit lichtwerk und dem innovativen „serio“-Konfigurator zum maßgeschneiderten Leuchtensystem.

Ausgangssituation

lichtwerk ist mehr als ein Leuchtenhersteller. Das Traditionsunternehmen aus Königsberg in Bayern versteht sich als „Werkstatt des Lichts“. lichtwerk legt den Fokus auf lichttechnische und gestalterische Beratung für Planer und Architekten – vom Konzept bis zum fertigen Projekt.

„serio“ ist ein multifunktionales Direkt-Indirekt-Leuchtensystem. Es bietet vielfältige Möglichkeiten für die Allgemein- und Akzentbeleuchtung – bis hin zum Aufbau komplexer Lichtlandschaften. Unter dem Motto „Individuelle Lichtkonzepte: Einfach gestalten“ ist es eine besonders attraktive Lichtlösung für Architekten und Planer.

Diese anspruchsvolle Zielgruppe möchte lichtwerk digital erreichen: Mit einem Online-Konfigurator für das Leuchtensystem „serio“.

Flexibilität und Beratung digital erleben

Es gibt eine Auswahl an Lichtleisten- und Lichtbandsystemen anderer Leuchtenhersteller auf dem Markt. „serio“ hebt sich ab durch hohe Flexbilität und Anpassbarkeit.

Was zeichnet lichtwerk aus? lichtwerk ist kein Massenproduzent, sondern punktet mit Beratung und individuellen Produkten. Architekten und Lichtplaner können daher auf besondere Unterstützung während der Planung vertrauen und einzigartige Projekte kreieren.

lichtwerk hat die Chance, sich mit einer Online-Lösung auf Augenhöhe mit den Großen der Branche klar zu positionieren. Die Herausforderung: Wie können Architekten und Lichtplaner die Felxibilität des Produkts und die Stärken in der Beratung online erleben?

Ein intuitiv bedienbarer Online-Konfigurator wird zum Wettbewerbsvorteil.

Kundenbindung als Schlüssel

Digitaler Kundenkontakt wird immer wichtiger. Das war schon vor der Corona-Krise so, wird nur jetzt besonders sichtbar. lichtwerk hat das verstanden und plant mit dem serio-Konfigurator einen neuen digitalen Touchpoint – für den Erstkontakt und als Arbeitserleichterung für Bestandskunden.

Das Ziel: Einfache Berechnung, schnelle Kostenschätzung. Architekten und Planer können ihre Konzepte in einem frühen Stadium auf Machbarkeit prüfen und die Daten in ihre Planung übernehmen. Ein schneller Kontakt zu lichtwerk und individuelle Beratung sind weiterhin jederzeit möglich.

Am Ende steht eine hohe Kundenbindung durch einfache Handhabung, schnelle Beratung und echten Mehrwert.

Neue digitale Prozesse

Das neue Online-Tool ist eine Chance, neue Vertriebsprozesse zu etablieren. Kundenprojekte werden direkt im Konfigurator berechnet und dann gemeinsam mit dem Kunden besprochen.

Es entsteht ein zentraler Ort im Unternehmen für serio-Projekte. So können die Berater von lichtwerk Lichtplaner und Architekten besonders effektiv bei ihren Vorhaben unterstützen. Möglich durch gebündeltes Wissen über die Kundenprojekte. Am Ende steht eine Win-Win-Situation: Starke Kontakte für den Vertrieb und ein echter Mehrwert für Planer und Architekten.

Neue Workflows erleichtern nicht nur die Arbeit mit Kunden. Auch intern können Konfigurationen genutzt werden: Eine neue Schnittstelle zwischen Planungsabteilung und Vertrieb entsteht.

Ein Online-Konfigurator: einfach und emotional

Ein Online-Konfigurator erleichtert den Einstieg mit „serio“. Er macht Produktvorteile sichtbar und liefert schnelle Ergebnisse. Ohne Hürden, ohne Login.

In so wenig Schritten wie möglich liefert der Konfigurator Zeichnung und Kalkulation einer Basiversion des innovativen Leuchtensystems. Detaillierte Anpassungen sind im Nachgang jederzeit möglich. Die Daten für Berechnungen kommen direkt aus dem PIM-System (Produktinformationsmanagement) von lichtwerk.

Kunden können erstellte Zeichnungen jederzeit herunterladen und in ihre Planungssoftware importieren. Die Formate Relux und DXF stehen hier im Fokus. Weitere Downloads (z.B. Ausschreibungstexte, Anleitungen) und eine Anfrage der Planung bei lichtwerk stehen zur Verfügung.

Die Planungen werden gespeichert und sind jederzeit abrufbar. lichtwerk erhält eine Übersicht über alle Konfigurationen und kann sie auch selbst erstellen.

Agile Entwicklung mit React

Der Konfigurator wird schrittweise mit React JS entwickelt. Zunächst geht eine Basisversion mit schneller Kalkulation und den wichtigsten Downloads (Highlight: Relux) an den Start. So wird früh Feedback aus dem Betrieb gesammelt. In einer zweiten Version stellt das Online-Tool zusätzliche Download-Formate und weitere Funktionen bereit.

So gelingt ein emotionales, einfaches Produkt – ständig weiterentwickelt auf Basis von Nutzerfeedback und Erfahrungen.

Schneller Einstieg in die Konfiguration

Die Landingpage für den Konfigurator zeigt Alleinstellungsmerkmale des serio-Systems: beleuchtete Ecken, individuelle Winkel und den Endlosdiffusor. Projektfotos zeigen Highlights und Einsatzmöglichkeiten. Sie inspirieren Planer und Architekten.

Mit wenigen Klicks wird das Grundprodukt „serio“ konfiguriert. Der Benutzer wählt Montageart und Lichttechnik. Anhand einer reduzierten Zeichnung werden Form und Abmessungen eingestellt. 

Schon jetzt erscheint der Systempreis und eine Zeichnung als Download für Relux.

In sehr kurzer Zeit entsteht ein Ergebnis, mit dem man als Lichtplaner arbeiten kann.

Daten und Berechnung

Grundlage für alle Berechnungen sind die Produktdaten aus dem PIM-System von lichtwerk. Es liefert alle kombinierbaren Einzelteile des Leuchtensystems. Doch welcher Aufbau, welche Formen sind möglich? Welche Kombination ist die beste und was kostet sie am Ende?

Eine komplexe Berechnungslogik gibt Antwort auf diese Fragen. Der Benutzer erhält als Ergebnis automatisch die beste Konfiguration für seine Eingaben. Ziel ist nicht nur eine preisgünstige Variante, sondern auch ein optisch ansprechendes System. Möglichst gleichförmige Linien sollen ein einheitliches Bild ergeben. Schließlich geht es hier um die Ansprüche von Architekten und Lichtplanern.

Bei jeder Berechnung werden millimetergenaue Positionsberechnungen gespeichert. Das ist später wichtig für unterschiedliche Exportformate und die exakte Weiterverarbeitung in anderen Programmen.

Detailkonfiguration mit Zeichnung

Auf einer Zeichenfläche können User das konfigurierte System betrachten, zoomen und verschieben – wie in einem Grafikprogramm. Einzelne Leuchtenelemente werden einfach bearbeitet, hinzugefügt oder entfernt. Auch besondere Module stehen jetzt zur Verfügung, z. B. Stromschienen mit Spots. Eigene Eck-Winkel oder besondere Farben bietet lichtwerk auf Wunsch an. Darauf machen passende Hinweise aufmerksam.

Nutzer können nahezu alle Details anpassen. Und das in einer Ansicht. Auch die Konfiguration des ganzen Systems, wie die Gehäusefarbe, dimmen oder nicht dimmen.
Technische Daten wie der Systempreis oder die Gesamtleistung passen sich live an.

Zusätzlich „denkt der Konfigurator mit“ und versucht dem Nutzer Fehler zu ersparen. Als Beispiel: Ein Leuchtenaufbau in Karree-Form bleibt immer symmetrisch. Änderungen auf einer Seite werden daher automatisch gespiegelt. Zusätzlich hat jedes System eine maximale Leistung. Diese kann nicht überschritten werden.

Konfigurations-Infos und Downloads

Der Ergebnis-Screen dient als Gesamtübersicht. Er enthält alle wichtigen Daten und Downloads zur Konfiguration und den einzelnen Artikeln. Eine Zusammenfassung kann als PDF erzeugt werden.

Nutzer können Daten zum eigenen Lichtprojekt ergänzen und direkt bei lichtwerk anfragen. Gespeicherte Planungen werden über einen Link oder die Konfigurationsnummer aufgerufen und versendet. lichtwerk hat eine Ansicht aller gespeicherten Konfigurationen zur Verfügung. Im CMS TYPO3 sind Überblick und Analyse möglich.

Das Download-Center bietet die Projektdaten für Planer, Monteure oder Elektriker. Jeder Nutzer kann sich ein Downloadpaket nach Wunsch zusammenstellen. Die Highlights: DXF- und Relux-Export ermöglichen den nahtlosen Übergang in gängige Zeichenprogramme der Lichtplanung. Produktinfos wie Ausschreibungstexte, Datenblätter und Montageanleitungen sind neben der detaillierten Artikelliste selbstverständlich.

React-Anwendung

Der Konfigurator soll sich wie eine Software anfühlen. Aber natürlich ohne Installation, direkt im Browser. Eine schnelle Anwendung, direktes Feedback ohne Neuladen – das ist das Ziel.

Die Lösung ist React. Eine JavaScript-Bibliothek speziell für die Umsetzung von User Interfaces.

Das JS-Framework ist weit verbreitet (technische Grundlage für alle facebook-Produkte) und hat eine starke Community. Clevere Softwareprinzipien garantieren einen sauberen Entwicklungsprozess.

React ist die perfekte Basis für ein langlebiges Projekt. Komponentenbasiertes Arbeiten ermöglicht eine schnelle Weiterentwicklung und neue Projekte auf der gleichen technischen Basis – z. B. für eine native iPad-App.

User Experience und Interface Design

Wie können wir Planern helfen, besonders schnell ihre Lichtkonzepte zu prüfen? In gemeinsamen Workshops ging es darum, wie Architekten und Planer arbeiten, was Ihnen wichtig ist und welche Details im ersten Schritt wegfallen können. Bedienkonzepte wurden zunächst über Prototypen getestet und dann kontinuierlich weiterentwickelt.

Im Gegensatz zu anderen Tools auf dem Markt beschränkt sich der serio-Konfigurator für die erste Berechnung bewusst auf die nötigsten Parameter. Benutzer erhalten so eine schnelle erste Kalkulation als Erfolgserlebnis. Optionen wie die Gehäusefarbe kommen später. Weniger Optionen heißt weniger kognitiver Ballast („cognitive load“) und höhere Benutzerfreundlichkeit („usability“).

Der Konfigurator setzt auf bekannte Bedienkonzepte. Er ist erstellt als Desktopanwendung. Das Zoomen und Verschieben der Zeichenfläche funktioniert mit dem Mausrad. Erste Versionen wurden schrittweise überarbeitet, damit sie ähnlich funktionieren wie die Software von Architekten und Planern. Klassische Browserfunktionen wie die Zurück-Taste funktionieren wir gewohnt. Das macht den Einstieg für Kunden besonders leicht und erhöht die Usability. Zusätzlich geben Tooltipps an vielen Stellen Hinweise zur Bedienung.

Das Design der lichtwerk-Website ist Grundlage für das Erscheinungsbild des serio-Konfigurators. Es wurde gezielt reduziert und durch neue Bedienelemente an die Ansprüche eines User-Interfaces angepasst. Mit dem klaren Fokus auf Übersicht und Durchgängigkeit finden sich Konfigurationsdaten im gesamten Prozess an derselben Stelle. Die Navigationsleiste gibt jederzeit Orientierung.

Das Interface lebt von seinem hohen Kontrast: ruhiger Hintergrund, viel Schwarz auf weiß für hohe Lesbarkeit. Die Akzentfarbe Orange lenkt gezielt das Auge und hebt klare Call-to-Actions hervor.

Individuelle Lichtkonzepte: Digital gestalten

Mit der Lichtlösung für Architekten und Planer hat sich lichtwerk klar online positioniert. Der Online-Konfigurator für das System „serio“ erreicht die Zielgruppe erfolgreich mit bereits über 600 Konfigurationen. Auch intern wird das Tool gerne und viel genutzt.

Doch das System ist noch lange nicht „fertig“. Mit zahlreichem Nutzerfeedback wird der Konfigurator gemeinsam weiterentwickelt. Unter dem Motto: „Individuelle Lichtkonzepte: Digital gestalten.“

Leistungen

  • Digitales Benutzererlebnis
  • Prozessdigitalisierung
  • Schnittstellen und Integration
  • UI/UX Design
  • Wireframes und Prototyping
  • Moodboards und Screendesign
  • React und Frontend-Entwicklung
  • TYPO3 CMS