Produktkonfigurator erstellen - Getting started Auf diesen Seiten finden Sie alle benötigten Schritte, um einen 3D Produktkonfigurator zu erstellen, beginnend bei der Marktanalyse, der Konzeption, dem Prototyping und der Implementierung.

Der Erstellung eines Produktkonfigurators gehen einige gut durchdachte Schritte der Konzeption voraus, um nichts dem Zufall zu überlassen und stets den späteren Nutzer in den Mittelpunkt zu stellen. In unserem Lean-Workflow arbeiten wir mit Ihnen an folgenden Teilaufgaben:

Die kostenlose und unverbindliche Beratung bildet den Auftakt unserer gemeinsamen Arbeit. Unser weiterer Workflow zur Erstellung eines Produktkonfigurators orientiert sich an der Lean-Startup Idee, d.h. wir nehmen nichts als gegeben hin und testen, studieren und interviewen eine User-Testgruppe bei der Konfrontation mit den von uns erstellten Wireframes, Mockups und funktionalen Prototypen. Parallel zum UX-Testing wird der Konfigurator bereits innerhalb des 1. Scrum-Sprints an den Shop und andere Systeme (PIM, CRM, ERP) des Kunden angebunden, um die nahtlose Integration zu Testen. Gesteuert durch ihr iteratives Feedback wird die Go-Live-Funktionalität komplettiert. Die einzelnen Steps sehen Sie nun im Überblick (für weiterführende Links bitte aufklappen).

1. Ziele des Konfigurators und Ort festlegen

Welche Ziele verfolgen Sie als Hersteller, Händler oder Affiliate mit dem Konfigurator im Bereich der Customer Journey? Möchten Sie eher Interesse und Begeisterung für Ihr Produktportfolio wecken und ein explorativ-inspirierendes Erlebnis erschaffen (Typ Attractor-Explorer) oder sollen bereits gut informierte Nutzer den Kauf abschließen und ihr Traum-Produkt kreieren können mit einem  technisch-detaillierten visuellen Konfigurator (Typ Builder-Customizer)?

Außerdem muss der Ort festgelegt werden, an dem der Konfigurator Ihre Nutzer bedienen wird. Beliebte Orte sind Produkt-Landing-Pages, Produkt-Detail-Seiten, Produkt-Kategorie-Seiten oder auch eigenständige One-Pager

2. Auswahl der Parameter

Ein Explorer-Produktkonfigurator mit dem Ziel Interesse und Begeisterung zu wecken die Auseinandersetzung, das Engagement zu stärken wird sich nur mit den aus Nutzersicht wichtigsten Parametern befassen, während der Produktkonfiguratoren des Customizer-Typs  versuchen eine umfangreiche Konfiguration zu ermöglichen, soweit es für das Bedienkonzept sinnvoll ist. Die Parameter werden anhand der Nutzungshistorie bzw. bekannter Support-Anfragen ausgewählt. Für jeden Parameter werden dann Skalen und Ausprägungen bestimmt, abhängig von der Herstellbarkeit, der  Nachfragesituation und des auszuprägenden Alleinstellungsmerkmals.

3. Bedienkonzept & Navigation festlegen

Was empfinden Ihre Nutzer als natürlichste Auseinandersetzung in der Erstellung Ihres Produktes? Dieser Frage widmen wir uns in diesem Schritt und durchdenken anhand von User-Stories verschiedenen Arten der Einstellbarkeit von Produktoptionen. Es könnte auf eine Schritt-für-Schritt Navigation hinauslaufen, welche den Vorteil hat, dass kein wichtiger Schritt vergessen wird (wird oft genutzt bei Builder-Customizer-Konfiguratoren), oder wir setzen auf sichtbare Handles oder Pins innerhalb der Produktvisualisierung, welche dem Nutzer erlaubt, nur bestimmte Produktvarianten zu erkunden (wird oft bei Attractor-Explorer-Konfiguraten genutzt)

4. GUI-Layout bestimmen

Jetzt geht’s ans Eingemachte. Wo finden Bedienfelder, Erklärtexte, der Produktpreis, Produkthinweise und natürlich die am meisten Raum einnehmende Produktvisualisierung auf der Bühne ihren Platz. Alle benötigten GUI-Elemente werden layouted (deutsch: platziert) unter Einhaltung der Regeln für gutes Design (Beachtung von Grid-Strukturen, Bündigkeit der Elemente, Links-nach-Rechts Leserichtung, Above the Fold Sichtbarkeit, erwartete Nutzererfahrung u.v.m.). Als Ergebnis halten wir dann ein Wireframe für responsive mobile-Porträt und Desktop-Landscape Proportionen in den Händen.

5. UX-Tests durchführen

Wir wissen erst, ob unser Layout funktioniert, wenn wir es mit den Nutzern „ausprobiert“ haben. Das Wireframe aus dem vorherigen Schritt der Layout-Erstellung wird nun in statische und dynamische Anteile aufgesplittet, so dass wir eine vollständig User-Session mit simulierter, reaktiver Software durchführen können (und das schon jetzt, ohne dass eine Zeile Code programmiert werden musste). Dieses Paper-Prototyping fördert wichtige Einblicke in das Verhalten und die Annahmen Ihrer Nutzer zu Tage. Mit diesen Feedback-Runden „echter“ Test-User wird die User-Experience entscheidend weiterentwickelt.

6. Umsetzung der Produktvisualisierung

Ein Großteil der Emotion wird über das Produktbild übertragen. Hierfür werden unsere 3D-Modeller und Produktfotografen aktiv und zerlegen anhand der getroffenen Parameter und ihren Ausprägungen das Produkt in die Grundbausteine. Dieses werden dann in unserer Renderfarm live zusammengesetzt und für den Nutzer-Client auf Basis der aktuellen Konfiguration bereitgestellt.

7. Visuelles Design der GUI

Unsere Grafiker legen die Farb- und Formgestaltung, sowie die Typographie des Konfigurators fest. Hierbei orientieren wir uns an der Produktwelt, der Marke, dem Corporate Design und den Erwartungen Ihrer Zielgruppe.

8. Frontend-Programmierung & Shop-Anbindung

Zeitlich parallel zum Schritt 6 & 7 wird das Frontend mit Hilfe von responsiven Frameworks programmiert. Hier kommen uns viele Jahre Erfahrung in der Erstellung & Testen von GUI-Frontends zu Gute. Außerdem wird die Warenkorb-, Checkout- & Preis-Schnittstelle des Shops an den Konfigurator angebunden, so dass konfigurierte & bestellte Produkte korrekt ausgezeichnet und verbucht werden.

9. Go Live - official release

Alles ist startklar, das Marketing ist in den Startlöchern und ein weiteres Highlight Ihrer Webpräsenz geht live, um die schönsten Produktwünsche Ihrer Kunden  mit individuell angepassten Details wahr werden zu lassen. Well done!

Sie wollen mehr wissen über unsere Arbeitsweise und internen Abläufe? Lesen Sie gerne weiter und kommen Sie bei Fragen gerne auf uns zu!

Beratung bei der Entscheidungsfindung

Alles muss sitzen. Technologie, Ansprache, Visualisierung. Viele Gewerke sind bei der Erstellung eines Produktkonfigurators beteiligt und alle sollen stets das gemeinsame Ziel vor Augen haben. Dies geht nur mit einer soliden Betreuung und gut durchdachten Konzeption. Wir unterstützen ihr Entwicklungsteam mit unserem Know und Prozesswissen und beraten Sie bei den vielen Entscheidungen, die getroffen werden müssen weiter lesen.

Produktkonfiguratoren entwerfen

Am Anfang steht nicht so sehr das Wort, als vielmehr das (visuelle) Konzept. Um einen Produktkonfigurator zu entwerfen, müssen Seitenlayout, Bedienkonzept, Farb- und Form-Design, sowie das Interaction-Design bestimmt werden. Dies wird oft iterativ angelegt, um sich Stück für Stück zu verbessern und bei jedem Schritt User-Feedback einfließen zu lassen weiter lesen.

Produktkonfiguratoren implementieren

Alles voller Source Code! All die schönen Konzepte und Designs bedeuten nichts, ohne dass unsere Entwickler diese realisieren. Mit ihren magischen Kenntnissen in der Kunst des Programmierens erblicken Meisterwerke in Javascript, Java, PHP, Python, CSS, HTML5 das Licht der Welt weiter lesen.