Kundenterminal für Kaufland Europa

Erstellung einer Self-Service-Anwendung für CRM-Terminals

In diesem Projekt durften wir in vielerlei Hinsicht wieder über den Tellerrand schauen. Neben den Nutzern in Deutschland galt es auch, die oft unterschiedlichen Bedürfnisse und Erwartungen von Tschechen, Polen, Kroaten und weiteren europäischen Nationen unter einen Hut zu bringen, oder besser: das Konzept entsprechend vielseitig und doch pragmatisch zu strukturieren. Außerdem mussten verschiedene technische Lösungen in Einklang gebracht werden.

Der Kunde

Kaufland ist ein Unternehmen des Lebensmitteleinzelhandels mit Sitz in Neckarsulm, Deutschland. Es betreibt aktuell über 1470 Filialen und ist neben Deutschland in sieben weiteren Ländern vertreten. Der Lebensmittelvollsortimenter ist wie der Discounter Lidl ein Tochterunternehmen der Schwarz-Gruppe. In Zusammenarbeit mit den Kollegen von Kaufland Digital durften wir uns in den letzten Jahren um viele spannende Projekte kümmern, wie bspw. Themen aus dem Bereich der Kaufland App, strategischen Fragestellungen und UX-Lösungen für Mobile Payment oder Mobile Self-Service.

Das Projekt

In diesem Projekt ging es um die Erstellung einer Anwendung aus dem Ökosystem des Kundenbindungsprogramms des Unternehmens: Kaufland Card. Europaweit sind Terminals in den jeweiligen Filialen aufgestellt, durch die Kunden verschiedene Services und Angebote in Anspruch nehmen können. Die Anwendung, um die es hier gehen sollte, ermöglichte den Kunden die Verwaltung Ihrer Guthaben, die Nutzung von Coupons, das Abrufen von Informationen und vieles mehr. Eine Herausforderung war, dass zwei große Entwicklerteams synchronisiert werden mussten. Es gab einige technische Hürden zu nehmen, wodurch dem Konzept die Rolle zuviel, diese Probleme zu visualisieren, Feedback einzuholen und dann Lösungen anzubieten.

Team Setup

1 UX / Creative Director
1 Senior UX/UI Designer

Phase 1

Kick-Off

Mit dem Input des Kunden gingen wir in eine interne Ideation-Session, in der wir mögliche Flows, Ideen, Features und Szenarien durchspielten. Fragen und Diskussionspunkte dokumentierten wir, um sie nachträglich klären zu können. Auf diese Weise entstanden erste Flows auf Basis (hypothetischer) Szenarien, deren Richtigkeit wir mit dem Kunden abstimmten.

Phase 2

Discovery

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

Der Umfang an Features und Funktionen, die integriert werden sollten, war bereits durch parallele Angebote in diesem Bereich wie bspw. die Kaufland App gut umrissen. Herausfordernd war jedoch, die jeweiligen Nutzergruppen in den unterschiedlichen Märkten kennen zu lernen und zu berücksichtigen, ebenso wie die Lösung technischer Probleme. Daher veranstalteten wir einige Workshops und Abstimmungsrunden, in denen wir Ergebnisse und Lösungen vorstellten und einzelne Themen und Fragestellungen angingen.

Phase 3

Szenarien, Flows und Prototyping

Zusammen mit dem Kunden hatten wir die wichtigsten Szenarien und Anwendungsfälle für die zukünftige Anwendung definiert und grob skizziert. Außerdem gab es bereits eine Vielzahl von Ideen, um die User Experience für die Nutzer positiv zu beeinflussen. In dieser Phase ging es nun darum, diese Flows im Detail auszuarbeiten und schon jetzt mögliche Stolpersteine mit den Entwicklern zu finden und auszuräumen. Erst in dieser Phase wird so der Projekt-Scope wirklich fassbar. Vorhergehende Phasen sind als kreative Prozesse weitgehend ergebnisoffen, um keine Potentiale zu übersehen, die sich möglicherweise vorteilhaft auf den Erfolg des späteren Produkts auswirken können. Ziel dieser Phase ist die Etablierung eines ersten Prototypen der Anwendung, der geeignet ist, die Diskussion optimal zu unterstützen und Annahmen per UX Test abzuklären.

Frühes technisches Flowchart mit offenen Fragen

Szenarien eignen sich stets in hervorragender Art und Weise dazu, die unterschiedlichen Erwartungen und Ansichten der Beteiligten sichtbar zu machen und abzustimmen. Die Sicht auf den oder die Nutzer ist dabei oft abhängig von der Rolle des jeweiligen Projektbeteilgten. Ein Backend-Entwickler schaut meistens anders auf das Projekt als bspw. ein Mitarbeiter aus dem CRM-Team. Das wichtigste Ergebnis ist aber immer die Schaffung von Empathie für die eigenen Nutzer.

Szenario mit offenen Fragen

Wireflows vereinen Szenarien mit technischen Flowcharts und visualisieren bereits die Handlungsabläufe. Auf diese Weise gelingt ein hohes Maß an Abstimmung. Prototypen sind dann die nächste Ausbaustufe des Konzepts.

Wireflow in der Konzeptphase

Wireframes der Anwendung

Phase 4

Ergebnisse

Im Verlaufe des Projekts wurde klar, dass die Anwendung mit einem gewissen Grad an Komplexität ausgestattet werden musste, was eine Herausforderung für das Zusammenspiel der jeweiligen User Flows war. Hierbei war vor allem die Abstimmung mit den Entwicklern wichtig, die regelmäßig Feedback zu den Lösungsideen leisteten, so dass spätere Komplikationen während der Implementierung vermieden werden konnten. Als Single-Source-of-Truth diente uns der Projektbereich in Figma, in dem wir die Flows erstellten, den Prototypen bauten, das UI Design auf Basis eines Designsystems gestalteten sowie weitere Spezifikationen hinzufügten. Alle Stakeholder waren so in der Lage, sich zu jedem Zeitpunkt einen Überblick über den Stand des Projekts zu verschaffen. Die Entwickler konnten sich bei Abschluss des Projekts alle Assets sowie die CSS-Daten direkt aus der Designumgebung herunterladen, so dass weitere Aufwände für die Übergabe nicht entstanden.

UI Designs der Anwendung

Weitere Cases