DT-Elektronik | Website-Relaunch und Webentwicklung mit Custom-Kirby Backend
2024 – heute
DT-Elektronik entwickelt und installiert High-End Car-HiFi und Multimedia Lösungen.
Dazu gehören vor allem Soundpakete (rückrüstbare Plug & Play-Systeme) aber auch individuelle auch Installationen und Sicherheitssysteme für Boote, Oldtimer u.v.m.
Relaunch der Webseite mit Soundpaket-Konfigurator
Die alte Website
01
war in jederlei Hinsicht schwach und wurde dem Anspruch des Unternehmens nicht mehr gerecht.
Bei diesem Projekt ging es aber um mehr als DT ins passende Licht zu rücken: Ziel war es, die die komplexe Produktpalette in klar
strukturierte, stufenweise Paketlösungen (Tiers)
02
zu überführen – effizient präsentierbar, intuitiv konfigurierbar, und SEO-fähig. Das neue System sollte nicht nur informieren, sondern aktiv zur Conversion und Beratung beitragen.
Alleinstellungsmerkmal: Jetzt besitzt DT-Elektronik das erste Paket-Konfigurator-System dieser Art im deutschsprachigen Car-HiFi-Segment; als "Mini-ERP" ergänzt es das bestehende Kassensystem perfekt.
Konzept & Strategie
- Paketlogik: Aufbau eines relationalen Modells 03 aus Fahrzeugbaum, Komponentenbibliothek und Paket-Stufen; siehe dazu auch Original-Screencast (Video: 5:59) 04 aus der damaligen Konzeptphase
- Backend-first-Ansatz: Modellierung der Struktur erfolgte noch vor Design — mit Fokus auf SEO, Erweiterbarkeit und einfache Pflege mit Kirby CMS.
- SEO-ready by design: URL-Strategien, sprechende Slugs und Longtail-Optimierung von Beginn an mitgedacht.
- Gestaltungskonzept: Definition des gestalterischen Rahmens mit stilistischen Benchmarks aus dem Markt; Ideenpool mit Figjam 05 als Grundlage für Design und Umsetzung
- Fokus auf Usability und Social Proof: Kundenstimmen, Einbaugalerie und vielfache Bespiele; unmittelbare Verknüpfung mit verfügbaren Konfigurationen ("sofort bestellbar")
![relationalen Modells 03 Original aus der Konzeptphase: Planung des Backends und der Datenstruktur [FigJam]](/media/portfolio/dt-elektronik/planung.jpg){kind=link}
![Ideenpool mit Figjam 05 Original aus der Konzeptphase: Ideenpool und Mitbewerber [FigJam]](/media/cache/len3568-max/portfolio/dt-elektronik/ideenpool.png?q=80&fmt=auto&enlarge=0){kind=link}
Gestaltung
- Responsive-Figma Entwurf: 06 Mobile‑First Designprozess mit interaktiven Prototypen für die Webseite
- Gestaltung der Paketstufen (Tiers): audioboost, performance, excellence, high-end und ultimate sind jetzt bei den Kunden von DT-Elektronik als Produktbegriffe verankert
- Fotografie: Fotos vom Ladengeschäft/Shoowroom, Werkstätten, Einbau-Beispielen und dem Team; Hilfestellung für künftige Referenz-Fotos
Technik
- Relationales Modell ohne DB: Kirby CMS mit Custom-Backend; 07 saubere Trennung zwischen Content und Business-Kern (Fahrzeugbaum, Pakete, Komponenten) — (hierarchisch und logisch verknüpft) 08 — ermöglicht hohe Geschwindigkeit und konsistente, fehlerresistente Pflege; Typhierarchie sorgt für Wiederverwendbarkeit und Verknüpfung mit dem Kassensystem; Zukunftssicherheit für Preiserhöhungen, Artikelpflege etc.
- Qualitätssicherung: Indikatoren im Model zählen Lücken bzw. Doppelbelegungen – sichtbar in Tabellen-Spalten als Ampel-Signal für Editor:innen; Diverse QoL Verbesserungen (u.a. Vorschau- und Schnellansichten, bi-direktionale Verknüpfungen) für das Panel
- Frontend-Technik: Entwicklung mit Tailwind CSS, Mobile‑First, barrierearm, performant und suchmaschinenoptimiert 09
- Live-Deployment & UX-Testing: Entwickelt in Live-Umgebung mit iterativem Testing gemeinsam mit dem Kunden
- Launch-Support & Tracking: Technische Durchführung des Livegangs inkl. Hosterwechsel mit DNS-Setup, Tracking und Monitoring
Impressionen der Webseite
Frontend – Desktop:
Frontend – Mobile:
Backend – Desktop/Mobile:
Live besuchen:
dt-wesel.de
Ergebnis
- Schnellere Beratung: Nach interner Einschätzung bis zu 80% weniger Zeit pro Anfrage; wo eine Angebotserstellung früher öfters in Leere lieft, möchten die Kund:innen heute schon beim Erstkontakt bspw. das "performance" Paket haben (!)
- Perfekte Nutzerführung: Einfachste Fahrzeug- und Paketsuche mit optimaler Präsentation; 01 Kunden finden über wenige Klicks exakt das passende Paket für ihr Fahrzeug; kein Durchforsten von Listen, keine zeitfressende Rückfragen
- Bessere Abschlüsse im Laden: Die Tiers funktionieren auch offline – Im Showroom werden die Pakete zur Gesprächsgrundlage und Upselling wird erleichtert
- Starke SEO-Effekte: Dank der Mischung aus Einbaugalerie und Kategorie-Landingpages generiert die Seite schon jetzt Longtail-Traffic 02 – sogar ohne Backlink-Optimierung; so nahmen Kunden mit exotischen Konfigurationen weite Anreisen aus ganz Deutschland in Kauf um das passende Paket eingebaut zu kriegen
- Autonomie und Marketingselbstläufer: Nach einer kurzen Schulung hat das Team in wenigen Wochen mehr als 2000 Fahrzeugkonfigurationen, hunderte Komponenten und Pakete selbstständig eingepflegt. Auch Sonderlösungen wandern nach der Umsetzung direkt ins System — und werden so für den nächsten Kunden im Internet sicht- und bestellbar (!) das System wird so zum Selbstläufer.
Meine Rolle
Konzeption, UX/UI, Fotografie, Design (Figma), technische Architektur, Entwicklung (Kirby CMS, PHP, JS, Tailwind).
Relationales Content-Modell ohne DB: Fahrzeugbaum, Komponenten, Pakete – logisch verknüpft, fehlerresistent, erweiterbar. Custom-Backend mit Panel-Erweiterungen: Relationen, Indikatoren, Vorschauen, Editor-QoL.
Iteratives Prototyping, Live-Testing, Deployment & Onboarding