Case Study

Wohnsektion Möbelkonfigurator

Das Projekt

Die Wohnsektion fertigt edle Massivholzmöbel nach Maß und vertreibt diese als individuelle Maßarbeit über den Onlineshop wohnsektion.de .

Während bei normalen Esstischen eine Darstellung über Fotografien meist vollkommen ausreicht benötigt der Besucher bei der Planung eines Massivholzschranks auch ein optisches Feedback. Nur so können die Proportionen bei Maßänderungen wirkungsvoll abgebildet werden.

Die Komplexität der Möbelplanung soll durch einen entsprechenden Möbelkonfigurator umgesetzt und auch stark vereinfacht werden.

Anforderungen

Der Bereich Möbel & Interior ist von starker Emotionalität geprägt. Aus diesem Grund ist es der Wohnsektion wichtig ihre Besucher nicht von vorn herein in die Verwendung des Möbelkonfigurators zu pressen. Stattdessen sollen weiterhin Fotografien im Vordergrund stehen, der Konfigurator soll hier als optional verwendbare Hilfe fungieren.

Es ist gewünscht das der Besucher einfach, auch während der Möbelplanung, zwischen beiden Systemen wechseln kann. Außerdem soll der Schrank-Konfigurator folgende Anforderungen erfüllen:

Geringe Ladezeiten
Der Möbel-Konfigurator darf keine großen Anforderungen an die Ladezeit stellen. Alles muss flüssig laufen.
Desktop und Mobil nutzbar
Der Anteil der mobilen User steigt ständig. Dennoch wird im Möbelbereich gerne auch der stationäre PC genutzt. Der Konfigurator muss beides abbilden können.
Anzeige der wichtigsten Maße
Es wird eine Funktion zu Maßanzeige benötigt weil dies dem Besucher Sicherheit im Kaufprozess gibt.
Öffnen / Schließen Funktion
Für den Kunden ist es wichtig die Funktionsweise des Möbelstücks zu verstehen. Deshalb wird eine Funktion zum öffnen und schließen von Türen und Schubladen benötigt.
Realistische Materialverhalten
Hier ist es für den Kunden wichtig das insbesondere die Holzmaserung nicht gestaucht bzw. gestreckt wird.
Augmented Reality
Der Konfigurator soll über eine AR-Funktionalität verfügen damit Besucher das konfigurierte Möbelstück sofort zu Hause testen können.

UX und Wireframing

Maße, proportionale Aufteilung, Holzbeschaffenheit, Oberflächenausführung, Möbelfüße und Innenausstattung – eine Schrankplanung ist ein komplexer Prozess bei dem sich Auswahlen auch gegenseitig bedingen können. Gleichzeitig soll diese Planung intuitiv und einfach auch von Laien zu bewerkstelligen sein.

Hier startet also zunächst ein Wireframing – also ein Gittermodell das die Platzierung der einzelnen Funktionen verdeutlicht. Wichtig ist hierbei auf bereits erlernte Navigationsverhalten, wie z.B. den zwei Finger Zoom, zurück zu greifen.

Durch gezielte Farbgebung im Corporate Design wird der Nutzer anschließend durch den Planungsprozess geführt.

1. Konfiguration
Hier soll die eigentliche Möbel-Konfiguration über ein horizontales Slide-Out Menü erfolgen.
2. Tools
Hier werden die Werkzeuge der Hauptbühne eingeblendet. Dazu gehören die Anzeige von Maßlinien oder auch eine Öffungsfunktion der Möbelfronten.
3. Drehen
Mit der Rotationsfunktion kann das Möbelstück einfach gedreht werden. Mobil erfolgt das mit dem Finger, Desktop mit der Mouse.
4. Zoomen
Mit der Zoomfunktion kann das Möbelstück einfach vergrößert bzw. verkleinert werden. Wie üblich erfolgt das Mobil über zwei Finger, Desktop über das Mausrad.
5. Augmented Reality
Hier wird die AR Funktion gestartet, der Besucher kann das Möbelstück virtuell zu Hause testen

Funktion und Technik

Um geringe Ladezeiten zu gewährleisten wird zur Darstellung des Möbelkonfigurator das open-source framework x3dom genutzt. Die Funktion der Augmented Reality erfolgt über den ARCore von Android bzw. ARKit von Apple.

Eine Grundanforderung war das einfache Erstellen neuer Produkte ohne Programmierkenntnisse. Hierzu wurde ein Master-Artikel geschaffen aus dem sich Mitarbeiter das passende Produkt konfigurieren. Um den neuen Artikel im Shop einzustellen muss lediglich ein Code-Schnipsel per Copy & Paste im JTL Warenwirtschaftssystem eingefügt werden. Alle Funktionalitäten sind automatisch gegeben.

Über eine Teilen Funktion wird ein Short-Link der aktuellen Konfiguration erzeugt. Hiermit kann die Produktplanung ganz einfach weiter gegeben werden.

Da die Augmented Reality Darstellung zwingend ein Mobilgerät erfordert wird hier ein Fallback für stationäre PCs benötigt. Gelöst wurde dies über ein Modal-Window das einen Short-Link und auch einen entsprechenden QR-Code erzeugt.

Der fertige Konfigurator

In Zukunft gilt in der Wohnsektion: Möbelplanung aber einfach. Der fertige Konfigurator bietet den Besuchern die Möglichkeit Schränke bequem und ohne großes Fachwissen von zu Hause aus zu planen und auch gleich virtuell in den eigenen vier Wänden zu platzieren.

Wohnsektion Schränke nach Maß

Ein Besuch lohnt sich! Hier können Sie den Schrank-Konfigurator live erleben und neben bei noch andere, schöne Maßmöbel entdecken.

Live testen