DT-Elektronik | Vom Beratungswissen zum konfigurierbaren Produkt: Website mit Soundpaket-Konfigurator und Kirby-Backend
2024 – heute
DT-Elektronik entwickelt und installiert High-End Car-HiFi- und Multimedia-Lösungen: rückrüstbare Plug-&-Play-Soundpakete, individuelle Einbauten, Sicherheitssysteme und Sonderlösungen. Die Bandbreite reicht vom VW-Kleinwagen über Camper und Luxusmarken bis zu Booten und Oldtimern. Nach eigenen Angaben hat DT über 20.000 Fahrzeuge optimiert, im Team stecken mehr als 50 Jahre HiFi-Erfahrung.
Was entstanden ist: eine Website, auf der Kunden aus über 2.000 gepflegten Fahrzeugkonfigurationen das passende Soundupgrade finden, fünf Leistungsstufen vergleichen und eine konkrete Einbauanfrage senden, samt Paket, Optionen, Preis und Fahrzeugdaten. Dasselbe System dient im Showroom als Beratungsansicht und wird vom DT-Team eigenständig gepflegt.
2.000+Fahrzeugkonfigurationen, nach kurzer Schulung vom Team selbst eingepflegt
bis zu 80 %weniger Beratungsaufwand bei Paket-Anfragen (interne Einschätzung)
nahezu ×2organische Klicks in 15 Monaten (Search Console)
5Paketstufen, online und im Showroom dieselben Begriffe
Was sich für DT-Elektronik verändert hat
Vorher entwickelten Interessent und Berater aus einer kaum standardisierten Produktwelt gemeinsam eine Lösung: Die Angebotserstellung begann häufig mit grundlegenden Rückfragen, ohne Gewissheit, ob Anspruch und Budget zusammenpassen. Heute wählen Kunden ihr konkretes Fahrzeug samt Werkssoundsystem, vergleichen die passenden Pakete und senden eine bereits vorkonfigurierte Anfrage.
Nach interner Einschätzung spart das bei standardisierbaren Paket-Anfragen bis zu 80 Prozent des Beratungsaufwands. Teilweise fragen Kunden schon beim Erstkontakt gezielt nach einer Stufe wie „performance". Die fünf Paketnamen sind als Produktbegriffe angekommen, online wie im Ladengeschäft.
Vorher
Heute
Kunde beschreibt unspezifisch „besseren Klang"
Kunde wählt Fahrzeug und vorhandenes Soundsystem
Komponenten werden je Anfrage zusammengesucht
Passende Paketstufen liegen vorbereitet
Preisrahmen entsteht erst im Gespräch
Paketpreis inkl. Einbau und Einmessung steht online
Rückfragen zur Kompatibilität
FIN und Fahrzeugdaten kommen mit der Anfrage
Referenzen leben getrennt vom Angebot
Jeder Einbau wird zur verknüpften Referenzseite
Die Ausgangslage
Die alte Website
01
präsentierte Leistungen und Produktkategorien, wurde dem Anspruch des Unternehmens aber nicht mehr gerecht. Das Produkt- und Einbauwissen aus Jahrzehnten und tausende mögliche Fahrzeug-Kombinationen brauchten einen Weg nach draußen, der mit dieser Menge mitwächst.
Ziel war deshalb, die komplexe Produktpalette in klar
strukturierte, stufenweise Paketlösungen (Tiers)
02
zu überführen: konsistent gepflegt, online vergleichbar, im Showroom präsentierbar und für konkrete Fahrzeugsuchen auffindbar.
Fünf Paketstufen
audioboost, performance, excellence, high-end und ultimate: fünf Stufen vom Einstiegs-Boost bis zum audiophilen Vollausbau, für jedes kompatible Fahrzeug mit denselben Begriffen. Den Konfigurator bekamen dabei nur die standardisierbaren Soundupgrades; individuelle Multimedia-, Sicherheits- und Sonderlösungen bleiben beratungsorientierte Leistungsseiten.
Die
Mitbewerber-Analyse aus der Konzeptphase
03
zeigte im deutschsprachigen Fachhandel kein System, das Fahrzeugkompatibilität, gestufte Komplettpakete, zentrale Komponentenpflege, Preise und Einbaureferenzen in dieser Tiefe zusammenführt. Als eigenes Produkt- und Beratungssystem ergänzt es das bestehende Kassensystem.
![Mitbewerber-Analyse aus der Konzeptphase 03 Original aus der Konzeptphase: Ideenpool und Mitbewerber-Analyse [FigJam]](/media/cache/len3568-max/portfolio/dt-elektronik/ideenpool.png?q=80&fmt=auto&enlarge=0){kind=link}
Das System hinter dem Konfigurator
Hinter dem Konfigurator liegt eine Wissensstruktur, die den Weg vom Fahrzeug bis zur Anfrage abbildet:
Fahrzeugz. B. Cupra Leon (Typ KL)
Werkssoundsystemz. B. BEATS Soundsystem
Paketfamilieplattformbasiert, markenübergreifend einsetzbar
Leistungsstufeaudioboost · performance · excellence · high-end · ultimate
Komponenten & OptionenVerstärker, Subwoofer, Lautsprecher, Dämmung, Erweiterungen
Preis & Einbauanfrageinklusive Einbau und Einmessung
Eine Paketfamilie bedient dabei mehrere kompatible Fahrzeuge und auch mehrere Marken gleichzeitig: das „BEATS Soundsystem"-Paket etwa Cupra, Seat und VW auf gemeinsamer VAG-Plattform.
Komponenten werden zentral gepflegt
04
und aktualisieren sich in allen zugehörigen Paketen; der
Fahrzeugbaum ist bidirektional mit den Paketen verknüpft
05
, Beziehungen lassen sich von beiden Seiten prüfen.
Dadurch kann DT Komponenten und Preise an einer Stelle aktualisieren, Pakete über Fahrzeugplattformen wiederverwenden, Kompatibilitätslücken erkennen, bevor sie online falsche Ergebnisse zeigen, und neue Einbauten unmittelbar als verknüpfte Referenz veröffentlichen.
Modelliert wurde diese Struktur vor der ersten Oberfläche („Backend-first"): erst das Datenmodell, dann das Design. Fahrzeugkompatibilität und zentrale Pflege spielen nur so zuverlässig zusammen. Das
vollständige Planungsboard
06
und der
Original-Screencast aus der Konzeptphase (Video: 5:59)
07
zeigen den Stand von damals.
![vollständige Planungsboard 06 Original aus der Konzeptphase: das vollständige Planungsboard zu Backend und Datenstruktur [FigJam]](/media/portfolio/dt-elektronik/planung.jpg){kind=link}
Von der Auswahl zur qualifizierten Anfrage
Die
Fahrzeugauswahl
08
führt in wenigen Klicks zum passenden Paket, ohne Listen zu durchforsten. Jede Paketansicht zeigt neben den Komponenten den Paketpreis inklusive Einbau und Einmessung sowie optionale Erweiterungen mit Aufpreis. Interessenten sehen schon vor dem ersten Gespräch, ob sie eher bei „audioboost" oder „high-end" landen.
Ein Klick auf
„Einbautermin anfragen"
09
übernimmt Paket, gewählte Optionen, Preis und Fahrzeugdaten ins Formular; die FIN kann zur Kompatibilitätsprüfung gleich mitgegeben werden.
Für Kunden mit weiter Anreise (wegen seltener Konfigurationen kommen sie aus ganz Deutschland) erklärt die Seite den Montagetermin von Fahrzeugabgabe über Wartebereich und Leihwagen bis zur Übergabe, dazu Hotel- und Freizeitempfehlungen für längere Einbauten.
Online, Showroom und SEO aus denselben Daten
Die
Präsentationsansicht
10
stellt die fünf Stufen direkt vergleichbar dar und klappt einzelne Pakete für die konzentrierte Beratung auf. Dieselben Daten, die online den Konfigurator speisen, strukturieren so das Verkaufsgespräch im Showroom.
Das Team pflegt diesen Datenbestand selbst: Nach einer kurzen Schulung sind mehr als 2.000 Fahrzeugkonfigurationen, hunderte Komponenten und Pakete eigenständig entstanden. Auch Sonderlösungen wandern nach der Umsetzung ins System und werden über die
Einbaugalerie
11
für den nächsten Kunden sichtbar und direkt anfragbar. Jeder ausgeführte Auftrag wird zur dokumentierten Referenzseite, und die bringt über die Suche den nächsten Interessenten.
15 Monate nach dem Relaunch zeigt die
Search-Console-Auswertung
12
die Entwicklung: Ø-Position von 17 auf 7, und das ohne zusätzliche Content-Kampagne und ohne gezielten Backlink-Aufbau. Über die Hälfte der Klicks stammt aus Suchanfragen, die Google nicht einzeln ausweist; in der
Sistrix-Keyword-Auswertung
13
werden diese Longtail-Rankings einzeln sichtbar (etwa „porsche 991 facelift sound"). Rund ein Drittel der Suchklicks landet direkt auf einer Paket- oder Galerie-Seite, also genau auf den selbst gepflegten Inhalten.
Gestaltung & Fotografie
- Responsive Figma-Entwurf: 14 Mobile-First-Designprozess mit interaktiven Prototypen; die Paketvergleichs-Ansicht wurde danach im realen System weiterentwickelt.
- Gestaltungskonzept: Definition des gestalterischen Rahmens mit stilistischen Benchmarks aus dem Markt (siehe Ideenpool oben).
- Fotografie: Komplette Vor-Ort-Fotografie von Showroom, Werkstätten, Einbau-Beispielen und Team. Die Aufnahmen dienen zugleich als Vorlage für künftige Referenz-Fotos.
Technik
- Datenpflege an einer Stelle: Kirby CMS mit Custom-Backend 15 – relationales Inhaltsmodell im Flat-File-CMS, ohne zusätzliche SQL-Datenbank. Many-to-Many-Beziehungen zwischen Fahrzeugbaum, Paketen und Komponenten; saubere Trennung von Content und Business-Kern; Typhierarchie für Wiederverwendbarkeit und die Anbindung ans Kassensystem, damit Preisänderungen und Artikelpflege nicht doppelt anfallen.
- Qualitätssicherung im Redaktionssystem: Indikatoren im Modell zählen Lücken und Doppelbelegungen und zeigen sie als Ampel-Signal in den Tabellen-Spalten, bevor daraus online falsche Ergebnisse werden. Dazu Vorschau- und Schnellansichten sowie bidirektionale Verknüpfungen als Alltagshilfen für die Editoren.
- Kontextabhängige Bildverarbeitung: Je nach Einsatzort erzeugt das System automatisch passende Bildgrößen, Zuschnitte und Qualitätsstufen, von hochauflösenden Galerie-Heros bis zu komprimierten Listing-Vorschauen, orientierungsabhängig für Hoch- und Querformat.
- Datenschutz ohne unnötige Drittanbieter: Mathe-CAPTCHA statt Google reCAPTCHA, Karten als statische Bilder mit externem Aufruf erst bei Klick, lokal gehostete Schriften. Damit fließen kaum Daten an Dritte, ein Einwilligungsbanner ist nicht nötig.
- Frontend & Performance: Tailwind CSS, Mobile-First, gute PageSpeed-Werte auf Desktop und Mobil 16 trotz umfangreicher Bildergalerien und dynamischer Paketdaten
- Launch & Betrieb: Entwicklung in Live-Umgebung mit iterativem Testing gemeinsam mit dem Kunden; technische Durchführung des Livegangs inkl. Hosterwechsel mit DNS-Setup, Tracking und Monitoring
Impressionen der Webseite
Vom Fahrzeug zum Paket (Desktop):
Mobile:
Backend – die Wissensstruktur im Panel:
Weitere Einblicke in Frontend und Backend
Frontend – Desktop:
Frontend – Mobile:
Backend – Desktop/Mobile:
Live besuchen:
dt-wesel.de
Meine Rolle
Konzeption, UX/UI, Fotografie, Design (Figma), technische Architektur, Entwicklung (Kirby CMS, PHP, JS, Tailwind).
Datenmodell und Custom-Backend entstanden vor der ersten Oberfläche. Dazu iteratives Prototyping, Live-Testing, Deployment und Onboarding.
Weitere Case-Studies
Zu komplex für eine normale Website?
Wenn Produkte, Varianten und Abhängigkeiten sich nicht mehr sinnvoll in Unterseiten oder Excel-Listen abbilden lassen, hilft ein System wie dieses: gewachsenes Fachwissen, strukturiert als Datenmodell und nutzbar online wie im Verkaufsgespräch. Bei DT ist zuerst das Datenmodell entstanden und danach die Oberfläche. Der Einstieg dafür ist eine Aufnahme der vorhandenen Produktlogik.