Haustürkonfigurator

See live project

Herausforderung

Die Neuffer Fenster+Türen GmbH bietet ihren Kunden eine ausführliche Beratung rund um das Thema Fenster und die Möglichkeit, ihre Fenster individuell zu konfigurieren. Dabei kommt ein komplexer, mehrstufiger Konfigurator zum Einsatz, der dem Kunden von der Einstellung von Größe, Material und Farbe bis hin zur Auswahl der Verglasung zahlreiche Möglichkeiten bietet. Da die Neuffer Fenster+Türen GmbH neben Fenstern auch Rollläden, Fensterbänke, Balkon- und Terrassentüren anbietet, fiel die Entscheidung, zur Erweiterung des Portfolios auch Haustüren zu integrieren.

Lösung

Die Konfiguration einer Haustür ist ebenso kompliziert wie die eines Fensters, jedoch gibt es viele verschiedene Varianten, die das Design einer Tür maßgeblich beeinflussen können. Um dem Kunden eine Visualisierung anbieten zu können, habe ich die technischen Möglichkeiten recherchiert und zusammen mit der Entwicklungsabteilung einen ersten Proof of Concept erstellt. Die Visualisierung wurde in verschiedenen Schichten aufgebaut, bis ein vollständiges Bild der Haustür entstand. Dazu habe ich in Sketch eine umfangreiche Bibliothek entwickelt, die alle Optionen darstellen konnte. Die Bibliothek basierte auf speziell erstellten Vektorgrafiken, die als SVG exportiert und im Vorschaufenster mit Texturen versehen wurden. Ich verwendete 3D-Tools wie Blender, um eine Kulisse für die Eingangstür zu erstellen. Der größte Teil der Arbeit wurde jedoch im Konfigurator selbst erledigt. Für die Visualisierung des Konfigurators habe ich ein eigenständiges Designsystem auf Basis von Brad Frosts Atomic Design entwickelt, das ich dann auf die anderen Konfiguratoren übertragen habe.

Das Ergebnis

Neuffer Fenster+Türen konnte vor allem durch den Einsatz des neuen Haustürkonfigurators seinen Umsatz auf rund 30 Millionen steigern und machte zuletzt mit einem Werbespot, in dem Boris Becker die Hauptrolle spielte, Schlagzeilen.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

No items found.