Produkt-Konfigurator2015

Crazy Factory Konfigurator

Crazy Factory — Produktkonfigurator für kreative Shop-Nutzer
Kunde
Crazy Factory
Projekt
Produkt-Konfigurator
System
AngularJS
Umsetzungsdauer
8 Monate

3D-Konfigurator für kreative Shop-Nutzer

Plugs, Tunnel, Fake-Plugs und Ansteckbuttons: Zwischen diesen vier Grundvarianten können die Besucher des Crazy Factory-Shops wählen, wenn sie ihr neues Schmuckstück selbst gestalten wollen.

Im Shop sieht alles einfach aus: Produkt aussuchen, Größe wählen, Foto hochladen, Filter ausprobieren, Text oder Clipart hinzufügen, alles nochmal in 3D anschauen und fertig.

Doch wie so oft, wenn etwas ganz leicht wirkt, stecken dahinter viele, viele Stunden Arbeit, penible Konzeption und natürlich komplexe Programmierung. Was also kann der Konfigurator und was steckt dahinter?

Unabhängiges System

Unser Konfigurator ist ein geschlossenes System, das über Schnittstellen (API) mit dem Shop kommuniziert. Das pixolith-Entwicklerteam nutzte dafür die Stärken von AngularJS und gehörte damit zum Zeitpunkt der Entstehung des Konfigurators zu den Ersten, die diese Technologie in einer derart komplexen Applikation nutzten.

Alles live und in 3D

Auf die kreativen Shop-Nutzer wartet eine 3D-Konfiguration, die ihnen sämtliche Änderungen an ihrem gewählten Produkt live anzeigt - und das sogar 100% mobile - für damalige Verhältnisse eine kleine Sensation!

Egal ob der User ein Foto hochlädt, dieses mit einem Filter bearbeitet, einen Text hinzufügt oder die Buchstaben auf dem Schmuckstück hin und her schiebt, er sieht in der 3D-Ansicht sofort und lebensecht, wie das Endprodukt aussehen wird.

Dafür haben wir von allen Produkten, die im Konfigurator gestaltet werden können, 3D-Modelle erstellt. Sämtliche Design-Änderungen werden dem User ohne Verzögerung auf dem jeweiligen 3D-Modell angezeigt und eine Rotationsansicht macht die Betrachtung aus verschiedenen Winkeln möglich.

Usability

Bei der Realisierung des Projekts lag unser Fokus immer darauf, den Usern die Handhabung des Konfigurators so einfach wie möglich zu machen – besonders, da Konfiguratoren damals noch nicht zum Standard gehörten (erst recht nicht mit kompletter Mobile-Funktionalität).

Neben einer intuitiven Anordnung des Menüs und dem Einsatz selbsterklärender Icons gaben die Hilfstexte Orientierung: Unsere Texter entwarfen diese in enger Zusammenarbeit mit den Entwicklern und klickten sich zum Schluss mehrfach als User durch das System, damit keine Funktion übersehen wurde. An allen wichtigen Stellen leiten die Texte besonders Erstbenutzer des Konfigurators sicher durch den kreativen Gestaltungsprozess.

Ab in den Warenkorb!

Die Live-Preisberechnung gibt bei jedem Schritt volle Transparenz. Wenn der Nutzer am Ende mit seinem Ergebnis zufrieden ist, legt er sein Produkt wie alle anderen einfach in den Warenkorb und kann natürlich auch mehr als ein Exemplar bestellen.

Hinweis zum aktuellen Konfigurator

Der hier beschriebene Konfigurator ist nicht mehr im Live-Einsatz und wurde durch eine Umsetzung einer anderen Agentur abgelöst. Der aktuelle Crazy Factory-Konfigurator entspricht daher in Konzept und technischem Ausmaß nicht dem von uns entwickelten Produkt.

Projekt-Highlights

Live-3D-Rendering
AngularJS 1
Drag&Drop-Editor
Live-Ansicht aller Änderungen
Motiv selbst auswählbar
Fotos und Text kombinieren
Farben auswählen
Vier verschiedene Grundprodukte
Größenanzeige in cm oder inch
Rotationsansicht