Beauty Card-Webseite für Douglas

Ein Kundenbindungsprogramm, das die Nutzer lieben

Die konsequente Fokussierung auf die Nutzer*innen spielt nicht erst bei der Entwicklung eines digitalen Produkts eine Rolle. Schon bei der Suche nach dem passenden Angebot für die eigenen Kunden ist sie ein wichtiges Grundprinzip, auch und besonders bei komplexer Enterprise Software. Warum Unternehmen durch eine menschzentrierte Herangehensweise die besten Voraussetzungen für Ruhm und Ehre – und glückliche Nutzer*innen – haben, möchten wir mit diesem Artikel zeigen. Am Beispiel des Weltmarktführers im Bereich der Wetterdaten – Stormgeo – erfährst du, mit welcher Methodik du Nutzerzentrierung von Anfang an integrierst und so Produkte schaffst, die echte Probleme lösen.

Der Kunde

Douglas ist Europas führender Anbieter für Premium-Beauty und Health. Mit seinen rund 1.900 Filialen erwirtschaftete das Unternehmen im Geschäftsjahr 2020/21 einen Umsatz von 3,1 Milliarden Euro in den Bereichen Parfümerie, dekorative Kosmetik, Haut- und Haarpflege sowie Nahrungsergänzung, Gesundheit und Accessoires. Mit einer Digital First-Strategie baut Douglas sein umsatzstarkes E-Commerce als auch das Filialerlebnis konsequent aus. Dem unternehmenseigenen Kundenbindungsprogramm "Beauty Card" kommt dabei in den jeweiligen europäischen Märkten eine wichtige Rolle zu und sollte durch uns neu gestaltet werden.

Das Projekt

Die "Beauty Card" ist das unternehmenseigene Kundenbindungs- oder Treueprogramm. Bis dato war das digitale Erscheinungsbild der Beauty Card-Webseite sowohl visuell veraltet als auch problematisch, was die Handhabung durch die Nutzer anging. Im Zuge des Projekts sollte eine neue eigenständige Webseite mit stark optimierter User Experience und modernem UI erstellt werden. Die größte Herausforderung war hierbei, dass es in den unterschiedlichen europäischen Märkten des Unternehmens verschiedenartige Mechaniken für die Beauty Card gab, die jeweils berücksichtigt werden mussten, ohne dass es zu komplex wurde.

Team Setup

2 Senior UX/UI Designer

Phase 1

Kick-Off

Gemeinsam mit dem Team von Douglas in Düsseldorf führten wir Workshops durch, um ein tieferes Verständnis der Aufgabenstellung zu erlangen und mögliche Wissenslücken in Bezug auf den Markt, die Kunden und die breitere Produktstrategie zu schließen. Begleitend hierzu führten wir Expert Reviews der bestehenden Assets und Maßnahmen durch. Außerdem war es nötig die Mechaniken des Treueprogramms in den Märkten (Italien, Deutschland, Niederlande usw.) zu studieren und kennenzulernen.

Expert Review der bestehenden Beauty Card-Website

Workshop & Ideation

Phase 2

Discovery

Bestätigung unserer Ausgangshypothese und Identifikation der zu bewältigenden Probleme

Zunächst galt es zu erfassen, was bereits an Infrastruktur, Mechaniken und Features in den jeweiligen Märkten vorhanden war und dies zu dokumentieren. Was konnten wir übernehmen? Was musste verbessert werden? Was wussten wir über die Meinungen der Nutzer? All dies musste in einen Zusammenhang gebracht werden. Auch gab es bereits Daten aus verschiedenen Tests, die im Vorfeld stattgefunden hatten. Zu diesem Pool an Daten kam nun die Neuausrichtung der Unternehmensstrategie hinzu. Was sollte in Zukunft anders werden und wie konnte dies bewerkstelligt werden, ohne die Nutzer zu verprellen?

Die Ergebnisse dieser Phase müssen immer wieder so visualisiert werden, dass eine Abstimmung mit allen Projektbeteiligten und Entscheidern stattfinden kann. Hier hilft uns die Erfahrung aus jahrelanger Projektarbeit sowie das Verständnis für die Kollegen aus den unterschiedlichen Gewerken.

Skizze der Informations-Architektur inkl. Use Cases

Technisches Flowchart

Phase 3

Prototyping und Iteration

Sind die Anforderungen der Beteiligten, des Unternehmens sowie der Nutzer erst einmal aufgelistet und priorisiert, startet der eigentliche kreative Prozess. Die jeweiligen Anforderungen müssen ihrer Wichtigkeit nach berücksichtigt werden, ohne dass die finale Lösung fade und und überladen ausfällt. Es gilt den "Joy of Use" einzufangen, also den Spaß an der Interaktion mit der Anwendung für den Nutzer spürbar zu machen. Es entstehen Szenarien, User Flows, Wireflows und Wireframes, die immer wieder zur Diskussion gestellt und geschliffen werden.

Wireframes für Desktop- und Smartphone-Viewport

Weitere Wireframes inkl. Grid

Hi-Fi-Prototypen sowie Wireflows im finalen UI Design geben eine gute Übersicht über den Scope. Jeder Projektbeteiligte kann sich so schnell und einfach eine Übersicht verschaffen. Vor diesem Hintergrund wird auch die Projektplanung viel einfacher.

Wireflow aus der Spezifikation der Anwendung

Wireflow für ein spezifisches Registrierungs-Szenario

Phase 4

Ergebnisse

Am Ende des Projekts, das in diesem Fall nicht agil angelegt war – auch wenn es Abstimmungen mit Entwicklern gab –, erstellten wir eine umfangreiche Dokumentation in Confluence, in der das Design, die Interaktionen und Flows visualisiert und beschrieben wurden. Die Screens sowie die einzelnen Design-Elemente und -Komponenten wurden für die Entwickler per Zeplin verfügbar gemacht. Es gab Varianten für die unterschiedlichen Ausprägungen in den jeweiligen Märkten.

Beschreibung von landesspezifischen Design-Varianten

Design unterschiedlicher Zustände für Elemente und Ansichten

Einige Screens im mobilen Viewport

Detailansicht der Beauty Card-Website auf dem Smartphone

Und was wurde aus dem Projekt?

Viel Zeit und Liebe wurde in das Projekt investiert. Monat um Monat bastelten wir an einer Lösung für das CRM-Programm von Douglas, das innerhalb des Unternehmens nach ohne Beispiel gewesen wäre. Leider sollte es dieses Leuchtturmprojekt nicht ins Licht der Welt schaffen: die weltweite Covid-Pandemie macht uns einen Strich durch die Rechnung. Hart von den Auswirkungen getroffen musste Douglas sehr schnell einen absoluten Sparkurs einschlagen, wodurch es leider zu einer Einstellung dieses Projekts kam.

Eine positive Seite hatte diese Entwicklung: wir hatten immer empfohlen, die Beauty Card als wichtiges Element der Unternehmensstrategie in viel stärkerem Maße zu integrieren und zu einem festen Bestandteil der douglas.de zu machen. Durch unser Projekt wäre im Gegensatz dazu eine Insel geschaffen worden, mit einer vordergründig tollen User Experience zwar, aber mit Problemen für das Zusammenspiel mit dem übrigen E-Commerce-Ökosystems.

Weitere Cases