Purrint®-Konfigurator

Personalisierfeature als UX&UI Case Study

Purrint® ist ein eCommerce-Projekt für personalisierte Bekleidung und Lifestyle-Produkte für Katzenliebhaber, für das ich neben dem Corporate Design und Shop auch den Online-Konfigurator entwickelt habe.

Der Konfigurator sorgt dafür, dass Kunden ihr Haustier schnell und exakt nachbauen können. Sie erhalten eine personalisierte Produktvorschau und können die Konfigurationen nachhaltig speichern und wiederverwenden. Damit unterscheidet er sich grundsätzlich von Konkurrenzprodukten.

In dieser Marktnische soll eine hochwertige Lösung gefunden werden, die Katzenliebhaber rundum begeistert, indem sie ihr eigenes Tier perfekt nachbilden können.

Vorgaben & Features

Entwicklung des Online-Konfigurators im Shop mit Hilfe von Best Practice UX- und Designmethoden
Einhaltung der Corporate Design-Richtlinien von Purrint® im Frontend
Entwicklung des Konfigurator-Backends im Design-Einklang mit dem Backend der CMS-Software

Umsetzung

Wireframing & Erstellung mehrerer interaktiver Prototypen
Usability-Testing in mehreren Durchläufen
Planung des Aufbaus und technischer Funktionsweise
Development des Frontends und des Backends mit HTML, CSS und Vue.js
Zusammenarbeit mit einem Full-Stack-Developer zur Umsetzung des Backends

Inhaltsverzeichnis

Funktionsweise

Stakeholder

Grobes Konzept in Figma

Erste Umsetzung in HTML

Neues Design als interaktiver Figma-Prototyp

Interaktiver HTML & JS-Prototyp

Funktionsweise

Status Quo

Bei etablierten Personalisier-Anwendungen wählt der Besucher eine Grafik aus einer Liste, die für ihn am nächsten an sein gewünschtes Tier heran kommt. Bislang ist die Ähnlichkeit zur Katze des Besitzers nicht hoch und die Konfiguration durch lange Dropdown-Listen mühsam und unübersichtlich. Verlässt der Besucher die Produktseite, muss er seine Katze komplett neu konfigurieren, auch wenn ein anderes Produkt dieselbe Grafik verwendet.

Der Konfigurator von Purrint® lässt den Kunden eine Katze erstellen, indem er die Rasse, Muster und Farben separat auswählt. So können Produkt-Illustrationen in Ebenen aufgebaut werden, die verschiedenen Mustern entsprechen und automatisch eingefärbt werden. Dadurch wird die Konfiguration universell einsetzbar und der Kunde bekommt die Möglichkeit, eine Katze zu erstellen, die seiner eigenen sehr genau entspricht.

Stakeholder

Wer hat Einfluss auf das Projekt

Es ist wichtig die Interessen der verschiedenen Stakeholder in dem Projekt zu definieren. Der wichtigste davon ist der Kunde. Die Interessen der anderen Parteien werden dem des Kunden untergeordnet.

Der Kunde will ein einfach zu bedienendes Feature, mit dem er schnell zu tollen Ergebnissen kommt
Der Illustrator will einen einfach zu bedienenden Backend-Editor, bei dem er seine Illustrationen schnell und leicht für den Kunden erstellen kann
Der UX/UI-Designer will ein einfach & gut mit Features anzureicherndes Programm
Der Programmierer will ein einfach zu programmierendes und zu wartendes Programm

In der Position des Designers muss das Konzept des Konfigurators allen vier Parteien (Kunde, Illustrator, Designer & Programmierer) zu Gute kommen und diese Bedürfnisse berücksichtigen.

Grobes Konzept in Figma

Erster Entwurf

Da die Bedürfnisse des Kunden die wichtigsten sind, wurden die Kontaktpunkte des Kunden zuerst entworfen.

Der Kunde interagiert primär auf der Produktseite des Purrint®-Shops mit dem Konfigurator, wo er parallel zur Konfiguration seiner Katze auch eine Live-Vorschau auf dem Produkt seiner Wahl verfolgen kann. Der Rest der Produktseite ist zu diesem Zeitpunkt schon in einem High Fidelity-Status.

Oben ist der erste Entwurf des Konfigurators mit Position auf der Produktseite. Es war angedacht, Konfigurationen in Slots anzuzeigen, die man mit einem Klick ausklappen kann, um sie zu bearbeiten. Die einzelnen Einstellungen einer Katzen-Konfiguration sollte über farbige Buttons geregelt werden.

Weitere Konfigurationsmöglichkeiten, die vom jeweiligen Motiv abhängen, wie z.B. die Farbe der Bettdecke, sollten zusätzlich darunter aufgeführt werden.

Erste Umsetzung in HTML

1. Usability Test

Dieser grobe Entwurf aus Figma diente als Basis für den ersten HTML-Dummy, der parallel mit dem HTML-Dummy des Shops selbst erstellt wurde. Damit führte ich den ersten Usability Test durch und nutzte die Erkenntnisse für den nächsten Entwurf.

Identifizierte Probleme

Einige Auswahlen, wie z.B. wenn der Konfigurator mit Hunden nachgerüstet wird, beeinflussen das, was danach angezeigt wird und können für Verwirrung sorgen
Muster sind durch die Kreisdarstellung nicht gut zu erkennen und bieten keine Möglichkeit zur Feinabstimmung. Außerdem sind sie nicht sehr zugänglich, wenn der Name nur beim Hovern sichtbar wird
Größere Farbpaletten werden schnell unübersichtlich
Die Vielfalt der Konfigurationsmöglichkeiten können erschlagend wirken

Neues Design als interaktiver Figma-Prototyp

Zweiter Entwurf & 2. Usability Test

Als Lösungsversuch entwarf ich einen Step-by-Step-Wizard in Figma.

Durch die Darstellung in einzelnen Schritten wirkt die Auswahl nicht mehr überwältigend und der nächste nötige Schritt zur fertigen Konfiguration wird klar kommuniziert
Die Muster werden jetzt an einem Katzenmodell angezeigt, damit man erkennt, wie genau sie aussehen, dadurch wird auch eine sehr individuellere Konfiguration möglich
Um den Status der Konfiguration jederzeit zu erfassen, ist in (fast) jedem Schritt ein Live-Modell eingebaut, was direktes Feedback gibt
Ein großer Kritikpunkt an Step-by-Step-Wizards ist, dass der Benutzer sich im aktuellen Schritt gefangen oder gegängelt fühlt. Die Fortschrittsleiste dient dazu, Benutzern jederzeit die Möglichkeit zu geben, zu vorherigen Schritten zurück zu springen und eine Orientierung zu haben.

Der Step-by-Step-Wizard wurde im 2. Usability Test durchweg hervorragend aufgenommen. Auch wenn es noch einige kleine Probleme gab.

Vom Test habe ich ein Rainbow-Spreadsheet angelegt, der eine gute Übersicht über alle Problemfälle und meine Lösungsideen gibt. Der Test bestand aus 2 Aufgaben im Konfigurator und einem offenen Gespräch im Anschluss.

Probleme

Ein wiederkehrendes Argument für den ersten Listen-Entwurf war die gefühlte Konfigurationsgeschwindigkeit gegenüber dem Wizard.
- Allerdings wurde die Statusleiste oft nicht auf den ersten Blick als klickbar wahrgenommen, was dem entgegenwirken würde.
- Das Live-Modell der Katze wurde so gut aufgenommen, dass keiner der Tester darauf verzichten wollte und 50% es sogar ohne Nachfrage direkt so erwähnten. Das würde das Listen-Design aber noch schwerfälliger machen.
- Ultimativ entschied ich mich dafür, das Wizard-Design beizubehalten. Unter anderem, weil ein ein Großteil der Tester angab, über Smartphone Käufe zu tätigen und die Liste auf Smartphone sehr unübersichtlich werden würde.
Katzen-Entwürfe bleiben erhalten, auch wenn man sie nicht mehr für das Produkt benutzt. Das hat die Tester verwirrt.
Der „Tier erstellen“-Button war grau und wurde von einem Tester als inaktiv wahrgenommen.
Die Farbauswahl wurde als Liste dargestellt, was ab einer größeren Auswahl wieder sehr unübersichtlich werden würde.

Interaktiver HTML & JS-Prototyp

Dritter Entwurf & 3. Usability Test

Mit den Insights aus dem 2. Usability Test setzte ich mich an die 2. HTML-Dummy-Version, diesmal mit Vue.js, um einen weiteren Test auszuführen. Vorteile des HTML/JS-Prototypen waren, dass das Live-Modell wirklich live auf die Inputs reagieren und eine Katze daraus erstellen konnte. Erstmalig konnten Leute tatsächlich ihre eigene Katze bauen, statt einen vorgegebenen Pfad zu gehen.

Durch das responsive Design konnten Tester den Test jetzt auch auf ihrem favorisierten Endgerät abschließen und damit sehr nahe an das echte Verhalten eines Kunden kommen.

Problemlösungen

Der „Tier erstellen“-Button ist nun weiß statt grau mit einem grünen Plus-Button darin, damit man ihn als klickbar wahrnimmt. Auf Desktopgeräten helfen zusätzlich Hover-Effekte
Die Farbauswahl ist jetzt ein Dropdown, was den Farbschritt wesentlich übersichtlicher macht
Die Statusleiste ist in dem Grün gestaltet, was durchgehend für Buttons verwendet wird

Im dritten Test zeigte, dass das Design funktioniert und die Zielgruppe begeistert. Die Zielgruppe konfiguriert problemlos eine Katze nach der anderen. Von 10 Testern hatte nur eine Person Probleme, eine Funktion zu finden. Alle Tester gaben an, Spaß beim Konfigurationsvorgang zu empfinden.

Das Ziel, einen Konfigurator für den Kunden zu bauen, der schnell und einfach zu bedienen ist und der Katze des Kunden möglichst nahe kommt, wurde damit übertroffen. Die Tester wendeten freiwillig mehr Zeit auf, um ihre Konfiguration zu perfektionieren.

Den Prototypen kann man mit diesen Anmeldedaten selber ausprobieren:
Benutzer: finya
Passwort: miezekatze

Zum Prototypen