Intuitiver Konfigurator für Schalldämmmaterialien
Ein laienfreundlicher Online-Konfigurator für Schalldämmprodukte von HBT-ISOL, der auch ohne technisches Vorwissen die passende Lösung vorschlägt, unterstützt durch visuelle Hilfen und 3D-Modelle.

Konfigurator-Startscreen
Ausgangslage
Der bestehende Online-Konfigurator von HBT-ISOL richtet sich an Fachpersonen wie Ingenieure und Architekten. Technische Begriffe und Eingabemasken setzen tiefes Vorwissen voraus, was Laien oft abschreckt. Die Anwendung bietet keine geführte Nutzererfahrung, keine Erklärungen und keine visuellen Hilfen, was die Produktauswahl für nicht-technische Nutzer erschwert.
Zielsetzung
Ziel war die Entwicklung eines laienfreundlichen Konfigurators, der Privatpersonen, Bauherren oder beratenden Stellen die Auswahl geeigneter HBT-ISOL-Produkte ermöglicht. Die Lösung sollte durch einfache Sprache, visuelle Unterstützung und eine modulare Struktur überzeugen und auf Desktop sowie mobilen Geräten nutzbar sein.
Der Ablauf in 3 Schritten
1. Auswahl
Bauteil im 3D-Modell anklicken, Einbausituation festlegen.
2. Berechnung
Benötigte Kennwerte für den Einbau angeben – live validiert.
3. Ergebnis
Produktempfehlung prüfen, vergleichen und als PDF exportieren.
Auswahl
Im ersten Schritt wählen Sie die Art der Anwendung aus. Durch ein anschauliches 3D-Modell können Sie die Einbausituation direkt visualisieren und das passende Bauteil mit nur einem Klick auswählen.
Berechnung
Basierend auf Ihren Eingaben berechnet der Konfigurator automatisch das passende Produkt für Sie. Alle relevanten Parameter werden übersichtlich dargestellt, um eine schnelle Anpassung zu ermöglichen.
Empfohlenes Produkt
Nach der Berechnung erhalten Sie eine klare Produktempfehlung mit allen relevanten Spezifikationen. Sie können das empfohlene Produkt mit anderen verfügbaren Produkten vergleichen oder als PDF exportieren, um es für Ihre Unterlagen oder die Bestellung zu nutzen.
Vergleichsansicht
Im Vergleichsfenster sehen Sie auf einen Blick die Eigenschaften mehrerer geeigneter Produkte. Farbige Markierungen und übersichtliche Tabellen erleichtern die Entscheidung, indem sie Unterschiede klar hervorheben.
Ergebnisse
Die Umsetzung des Projekts hat zu folgenden signifikanten Verbesserungen geführt:
- Ein laienorientiertes Next.js-Frontend mit modularem Formularsystem und responsivem Design
- Integration einer 3D-Visualisierung zur besseren Veranschaulichung von Einbausituationen
- Verbesserte Benutzerführung durch reduzierte Komplexität und kontextbezogene Hilfetexte
- Technisch saubere Umsetzung mit CI/CD, getrennter Architektur und geteiltem Headless-Backend
- Validierung zeigt signifikant bessere Bedienbarkeit für nicht-technische Zielgruppen
Die Resultate bestätigen, dass der neue Konfigurator den Anforderungen an eine benutzerfreundliche, laiengerechte Anwendung voll und ganz gerecht wird.
Technische Schlüsselbegriffe
- Usability
- Produktkonfigurator
- Next.js
- 3D-Visualisierung
- Headless CMS
- CI/CD
Kund:in

HBT-ISOL
Wladimir Engelhardt
Peter Merian-Strasse 25
4001 Basel
www.hbt-isol.ch