UX Support für Kaufland

Der Auftrag

‍Zunächst starteten wir mit dem Auftrag, das UX- und UI-Design für zwei strategisch wichtige Projekte zu verantworten: es ging um die Integration von Mobile Payment- sowie Mobile Self Scan-Features in die Kaufland App. In der Folge wurden wir mit weiteren Aufgaben betraut. Über das Design hinaus ging es vielfach auch um strategische Themenstellungen, um Research, Testing, Product Ownership, Training interner Mitarbeiter und Illustration.
‍
Auf diese Weise wurden wir zu einer Art verlängerter Werkbank von Kaufland Digital, da wir schnell und flexibel auf die unterschiedlichsten Bedarfe eingehen und dennoch überzeugende Ergebnisse liefern konnten.

UX- und UI Design-Support

Mobile Payment
Die App mit der digitalen Kundenkarte war bereits vor uns in den Märkten eingeführt worden und wurde hier von einer großen Nutzerbasis regelmäßig genutzt. Ziel war es das Nutzererlebnis über alle Touchpoints hinweg zu personalisieren und attraktiver zu gestalten. Der App sollte hier eine zentrale Rolle zukommen und das Engagement der Kunden hier wesentlich gesteigert werden.

Als ein wichtiger Baustein in der digialen Strategie wurde hier die Möglichkeit des mobilen Bezahlens identifiziert. Durch die Integration einer Mobile Payment-Lösung in die Kaufland App sollte es außerdem möglich sein, Vorteile wie Rabatte und Treuepunkte direkt zur Anwendung zu bringen. Unsere Aufgabe war es zunächst alle business- und nutzerseitigen Anforderungen zu sammeln und in Einklang zu bringen. Außerdem mussten mögliche Lösungswege mit den technischen Möglichkeiten abgeglichen werden. Hier lag auch tatsächlich der Schwerpunkt unserer Arbeit: im ständigen Dialog mit den Entwicklern musste der bestmögliche Weg zwischen optimaler Usability für den Nutzer und technischer Machbarkeit gefunden werden. Hierzu erstellten wir technische Flowcharts und diskutierten diese mit dem Team bis wir eine tragfähige Lösung gefunden hatten. Diese Lösung wurde dann im Rahmen eines Nutzertests auf ihre Usability geprüft.
Unsere UI Designerin lieferte hierzu dann die entsprechenden UI Designs für die Umsetzung für iOS und Android.

Mobile Self Scanning
Dieses Thema gehörte zum Bereich des Self-Checkouts. Kunden sollten mithilfe dieses Features Waren in der Filiale selbständig per Barcode scannen und damit in den digitalen Warenkorb legen können. Am Ausgang des Einkaufsbereichs kann dieser Warenkorb dann an bereitgestellten Terminals oder per integrierter Mobile Payment-Funktion bezahlt werden. Eine solche Funktion bietet viele Vorteile für den Handel und nicht nur, wenn es an Personal mangelt, sondern erweitert zusätzlich den Kundenservice und ermöglicht längere Öffnungszeiten.

Unsere Arbeit war hier dem Vorgehen bei der Mobile Payment-Lösung sehr ähnlich: die Bedürfnisse der Nutzer, die strategischen Ziele des Unternehmens sowie die technische Machbarkeit mussten analysiert und in einem Konzept für die Umsetzung spezifiziert werden. Dabei stellten wir mithilfe von Nutzertests sicher, dass die Usability der gefundenen Lösung stets gewährleistet war.
Auch in diesem Fall wurde das Team von einem UI Designer unterstützt, der die jeweiligen visuellen Assets für die Integration in die Kaufland App erstellte.

Rapid User Testing

Nutzertests gehören zum Standard-Verfahren, in dem wir digitale Produkte gestalten. Wir tun dies prinzipiell nutzerzentriert und gewährleisten auf diese Weise, dass die Anforderungen des Nutzers nicht aus dem Fokus geraten. Dies kann nämlich bei der oft intensiven Beschäftigung mit den Zielen des Unternehmens sowie den technischen Möglichkeiten schnell passieren.
Solche Tests sollten stets im Verhältnis zu dem stehen, was an Erkenntnissen gewonnen werden soll und kann. Ein großes Maß an Pragmatismus ist daher vonnöten, auch um Budgets zu schonen,

Unsere Kollegen bei Kaufland konnten wir mit einem sehr flexiblen und eben auch sehr verhältnismäßigen Ansatz überzeugen: es vergingen jeweils nur wenige Tage zwischen der Identifizierung von Testszenarien bis zur Vorstellung von Ergebnissen. So konnten wir Optimierungen am Produkt in kurzen Sprüngen erreichen. Wir verließen uns hierbei schwerpunktmäßig auf Remote-Nutzertests, die für die Beantwortung unserer Fragen ideal waren.

CRM-Terminal

In diesem Projekt ging es um die Erstellung einer Anwendung für das unternehmenseigene Kundenterminal. Europaweit sind diese Terminals in den Filialen aufgestellt, damit Kunden verschiedene Services und Angebote in Anspruch nehmen können. Die Anwendung, um die es hier gehen sollte, ermöglichte den Kunden die Verwaltung von 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 zufiel, diese Probleme zu visualisieren, Feedback einzuholen und dann Lösungen anzubieten. Von zentraler Bedeutung waren auch hier wieder Flowcharts bzw. Wireflows, die einen realitätsnahen Eindruck von Interface und dahinterstehender Logik vermittelten. Nach unserer Erfahrung lassen sich hierüber mit allen Stakeholdern Abstimmungen schaffen, auch wenn diese jeweils nicht immer dieselbe "Sprache" sprechen.

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.

Discovery
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.

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.

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.

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.

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.
‍
Das Projekt wurde erfolgreich zum Abschluss gebracht und die Anwendung europaweit ausgerollt.

Strategische Themen und Research

Unsere Kollegen aus dem Bereich Research und Digitalstrategie haben nicht nur maßgeschneiderte Workshops organisiert und durchgeführt, sondern auch wertvolle Studien zu relevanten Digitalisierungsthemen für die Kollegen von Kaufland erstellt. Mithilfe dieser fundierten Informationen konnten interne Entscheidungsprozesse maßgeblich unterstützt werden. Zusätzlich hat spielten sie eine bedeutende Rolle bei der Weiterbildung interner Mitarbeiter bei Kaufland im Marketingbereich. Durch ihr umfassendes Wissen und die praxisorientierte Herangehensweise konnten Marketingstrategien weiterentwickelt und verbessert werden. Ein weiterer Mehrwert waren professionell erstellte Vorlagen für interne Diskussionen und Meetings. Diese haben es dem Kunden ermöglicht, wichtige Themen im Zusammenhang mit der Digitalisierung strukturiert und effektiv zu besprechen.

App Store Optimization (APO)

Im Rahmen dieses Projekts ging es um die Optimierung der Seite der Kaufland-App im App Store. Hierbei musste zum einen der Text für die Auffindbarkeit im Store hinsichtlich relevanter Schlüsselbegriffe optimiert werden, andererseits mussten die angezeigten Bilder den Nutzer dazu veranlassen, die App auch tatsächlich zu installieren. Die Entscheidung hierzu fällt der durchschnittliche Nutzer innerhalb weniger Sekunden, daher muss die Botschaft der Bilder schnell und eindeutig zu erfassen sein.
Da die App von Kaufland in vielen europäischen Märkten zur Verfügung steht, mussten Texte und Bilder entsprechend sprachlich angepasst und für die jeweiligen Anzeige-Formate aufbereitet werden.

Illustration

Illustrationen transportieren Emotionen, sie machen es aber auch einfacher bestimmte Sachverhalte zu erklären. Daher kamen sie auch bei Kaufland in den unterschiedlichen Projekten zur Anwendung. So wurde das Intro der App, das der Nutzer nach der Installation zu sehen bekommt, bebildert. Oder Illustrationen kamen bspw. in Präsentationen zum Einsatz, um bestimmte Use Cases zu erläutern.

Wie bei Kaufland so setzen wir die Arbeit von Illustratoren auch allgemein selten im Rahmen von dauerhaften Workstreams ein. Die Entscheidung für den Einsatz wird fast immer aus dem Kontext heraus getroffen. Da hilft es sehr, dass wir über ein Netzwerk von sehr fähigen, aber auch stilistisch sehr heterogenen Illustratoren verfügen. Dadurch können wir direkt auf die passenden Experten zugehen und zusätzliche Aufwände oder Verzögerungen im Projektablauf vermeiden.