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.

Text
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

FHNW

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

FHNW

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

FHNW

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

FHNW

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

Logos

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

Team

Florian Christ
Nicola Liechti

Betreuerin
Norber Seyff

Nitish Patkar