M3 Glass

Herausforderung

M3 Glass Technologies kam mit einer fertigen Website zu Redwerk und wollte ein Konfigurationstool erstellen, um das Online-Erlebnis ihrer Kunden zu verbessern. In einem physischen Geschäft können Kunden schnell einen Berater um Hilfe bitten; beim Online-Kauf bleiben jedoch nur das Ausfüllen des Kontaktformulars oder die Selbstbedienung. Während das erste Szenario frustrierend und zeitaufwändig sein kann, kann das zweite in ein leistungsstarkes Engagement-Tool verwandelt werden. Kunden haben nichts gegen Selbstbedienung, solange sie einfach das bekommen, was sie brauchen. Konfiguratoren sind in gewisser Weise virtuelle Verkaufsassistenten, die die Vorlieben der Kunden sammeln und dann mit verfügbaren Artikeln abgleichen. Von der Autoauswahl bis hin zum Glasdesign werden Konfigurationstools heute in vielen Branchen eingesetzt.

M3 Glass Technologies bat uns, ein interaktives Visualisierungstool zu entwerfen, damit Kunden ihre Ideen zum Leben erwecken können. Neben der Möglichkeit, ein Muster auszuwählen, seine Größe und Farbe anzupassen, war es wichtig, den Designs der Kunden einen realistischen Touch zu verleihen. Dafür musste M3 Glass 3D-Modelle einer Glastür und einer Wand erstellen, auf die Muster aufgebracht werden konnten. Ebenso wichtig war es, den Glasdesign-Konfigurator einfach zu bedienen und zu verstehen zu machen.

Eine der Hauptanforderungen war, das Design responsiv zu gestalten, mit Fokus auf einem großen Mac, den neuesten Versionen von iOS- und Android-Tablets und einem normalen Laptop. Natürlich wollten wir das interaktive Tool auch mobilfreundlich gestalten.

Wir mussten auch sicherstellen, dass alle Muster in den verschiedenen Versionen der folgenden Browser gut aussehen: Chrome, Edge, Safari und Firefox.

Lösung

Das Designteam erstellte separate 3D-Bilder einer Glaswand und eines Bodens, damit die Muster aus dem Katalog des Kunden später auf diesen transparenten Hintergründen überlagert werden konnten. M3 Glass Technologies stellte uns den Musterkatalog zur Verfügung, und unsere Aufgabe war es, das Muster mit Hilfe von HTML und CSS auf das Glasmodell zu übertragen. Wir mussten auch die Bildperspektive berücksichtigen, damit das Glasdesign realistisch aussieht. Um die Grafiken unabhängig von der Transformation perfekt zu machen, verwendeten wir das SVG-Format.

Darüber hinaus haben unsere Designer eine Benutzeroberfläche für das interaktive Tool erstellt, damit die Kunden von M3 Glass ihre Glasdesign-Ideen leicht visualisieren und das verfügbare Muster nach ihren Wünschen anpassen konnten.

Die Online-Interaktiv-Tool-Benutzeroberfläche besteht aus:

• Musterauswahltafel
• Mustergrößenanpassung mit Design-Tipps
• Farbkreis sowohl für das Muster als auch den Hintergrund
• Hintergrundauswahltafel
• Schaltfläche „Neues Design erstellen“
• Formular zur Anforderung der Designüberprüfung
• Formular „Mein Design senden“
• Dankesseite mit der Option, ein PDF-Mockup des erstellten Glasdesigns herunterzuladen

Wir ließen uns davon leiten, dass die Benutzeroberfläche nicht vom Produkt selbst ablenken sollte. Daher entschieden wir uns für ein einfaches, neutrales Design mit Fokus auf die Zielgruppe. Da die meisten M3 Glass-Kunden reifere Menschen sind, gaben wir einige Handlungstipps, überladen jedoch die Benutzeroberfläche nicht mit unwichtigen Details. Das Endprodukt verfügt über alle notwendigen Funktionen und ist einfach zu bedienen und zu navigieren.

Entwicklung

Zunächst arbeiteten wir mit den CSS-Masken- und Hintergrundeigenschaften, um das erforderliche Muster anzuzeigen; jedoch unterstützt Edge diesen Ansatz nicht, sodass wir eine andere Möglichkeit zur Anzeige der Bilder finden mussten. Wir mussten die SVG-Farbe/das Muster im Backend ändern, und wir taten dies für alle möglichen Website-Module.

Wir verwendeten Transformationsmatrizen für Glasmuster in SVG. Alles funktionierte gut, aber wir bemerkten, dass nicht alle Designs angepasst wurden (einige änderten sich nicht in der Farbe, während andere in der Struktur verzerrt waren). Daher mussten wir alle Vorlagen überprüfen und sie in dasselbe Format bringen.

Danach konnten wir die korrekte Projektion und Farbe anzeigen, die es uns ermöglichte, das Endergebnis an den Endbenutzer zu senden.