Design Thinking UXR | UX | UI

openNow – mobile, prototypische Umsetzung einer Einkaufsunterstützung 

Header openNow

Mit openNow wird dem Benutzer die optimale Einkaufszeit von Lebensmittelgeschäften im gewünschten Umkreis angezeigt, damit er beim Einkaufen Zeit sparen kann. Die Umsetzung erfolgte mithilfe des Design Thinking Prozess. 

Wir kennen alle diese Situation. Der Kühlschrank ist leer und eigentlich muss man schnell einkaufen, aber wir haben keine Zeit oder Lust unsere wertvolle Zeit in vollen Läden zu verbringen. Dieses Hochschul-Projekt fand innerhalb eines interdisziplinären Teams statt. So können aus unterschiedlichen Disziplinen und Wissen, interessante Lösungen erarbeitet werden. 

Meine Rolle

Ich unterstützte bei der Desktop Recherche und streute die Umfrage unter der Zielgruppe. Anschließend führte ich ein Experteninterview durch. Das Verfassen der Persona, der Empathy Map, der Wireframes sowie Mockups vielen in meinen Zuständigkeitsbereich.

Das Team umfasste insgesamt vier Personen, davon waren drei aus dem Online-Marketing-Bereich. Die weiteren Methoden, die in diesem Projekt zum Einsatz kamen – wie das Brainstorming, Mindmapping, die User Journey, die Walt Disney Methode und die Entscheidungsmatrix führten wir als Gruppe gemeinsam durch.

PROZESS //

Desktop Recherche, Umfrage, Experteninterview; Persona, Empathy Map, User Journey; Brainstorming, Mindmapping, Walt-Disney-Methode, Entscheidungsmatrix; Wireframes, Mockups, Usability Test

ZEITRAUM //

Von Oktober 2017-Februar 2018

SOFTWARE //

Adobe CS 6 – InDesign, Illustrator, Xd, Sketch

Ziele

Innoviere! //

Das primäre Ziel in diesem Projekt war, mithilfe verschiedener Methoden ein innovatives Produkt zu entwickeln, um das Wohlbefinden der Zielgruppe zu verbessern, damit sie positive Erfahrungen sammeln können.

Design Thinking – aber richtig //

Den gesamten Design Thinking Prozess zu durchlaufen, was bedeutet, dass getätigte Schritte auch überdenkt werden müssen und gegebenenfalls nochmal wiederholt werden.

DESIGN CHALLENGE

Wie können wir den Menschen helfen, ihr Einkaufserlebnis im Einzelhandel angenehmer zu gestalten, damit sie positive Erfahrungen machen können?

DESIGN THINKING PROZESS

EMPATHIZE

Mittels Desktop Recherche, grundlegendes Wissen zum Thema Einkauf im Lebensmitteleinzelhandel erhalten & per Umfrage beim Nutzer 

In der Umfrage erforschten wir das Kaufverhalten der Zielgruppe, an der 56 Personen zwischen 18 und 59 Jahren teilnahmen.

In einem Experteninterview befragten wir den Leiter eines Supermarktes und zwei Verkäuferinnen zum Einkaufsverhalten der Kunden.

Folgende Erkenntnisse konnten wir zusammenfassend nach der Recherche-Phase feststellen:

openNow-Research-Grafik-10-10

Der Befragten empfinden die Wartezeit an den Kassen für zu lang.

openNow-Research-Grafik-08

Der Beftragten kaufen unter Zeitdruck ein.

openNow-Research-Grafik-10-09

Der Befragten hätten gerne Unterstützung.

DEFINE

Aus den Recherche Ergebnissen entstand Benutzerpersona Christina Maier

Das Ziel war, ein grundlegendes Verständnis für den künftigen Benutzer aufzubauen und ihn im Detail zu beschreiben. 

Mit den Ergebnissen aus der Recherche entwickelte ich die Persona. Christina Maier, 41 Jahre. Sie arbeitet als Managerin, ist verheiratet und Mutter. Dadurch ist ihr Alltag streng getaktet, wodurch sie für alltägliche Dinge wie einkaufen wenig Zeit hat. 

Persona Christina Maier

Mit der Empathy Map die Emotionen  von Christina Maier zum Thema veranschaulichen

Darauf aufbauend entwickelte ich die Empathy Map, welche die wichtigsten Merkmale enthält, die für die Personalisierung und Emotionalisierung des typischen Benutzers relevant sind.

Empathy Map Christina Maier

Die User Journey von Christina im gesamten Einkaufsprozess analysieren

Diese Methode hilft, die Gedanken, Aufgaben und Gefühle typischer Benutzer während und nach dem Einkauf zu zeigen, um ihre Bedürfnisse besser zu verstehen.

Es war es besonders wichtig herauszufinden, an welcher Stelle der Benutzer auf Schwierigkeiten stoßen könnte.

Dabei identifizierten wir insbesondere während des eigentlichen Einkaufs im Einzelhandel Verbesserungspotenzial, um diese Tätigkeit für Menschen angenehmer zu gestalten.

User-Journey-openNow

POINT OF VIEW

Wie kann Christina ihre wöchentlichen Einkäufe effizienter gestalten?

IDEATE

Ideen für die Lösung sammeln & bewerten

Mit Kreativ-Techniken werden Ideen gewonnen, bewertet und aussortiert. 

Durch diesen Prozess, kamen wir dem Produkt welches der Beantwortung der Design Challenge dient, näher. 

Trichter-Design-Thinking

Vom Brainstorming zum Mindmapping, um Ideen zu strukturieren und auszusortieren

Zunächst sammelten wir viele Ideen.

Dazu zog sich jeder in eine Ecke zurück, um sämtliche Ideen in Bezug zum Einkauf im Lebensmittelhandel schriftlich festzuhalten.

Mithilfe von Mindmapping strukturierten wir die Ideen, sortierten einige davon aus, die wir aus zeitlichen/personellen/wirtschaftlichen Gründen nicht realisieren konnten.

Mindmapping-02

Walt-Disney-Methode

Mit der anschließenden Walt-Disney-Methode nahmen wir jeweils eine Rolle (Träumer, Realist, Kritiker) ein, um von dieser Position aus die Ideen der Mindmapping Methode zu betrachten, diskutieren, auszusortieren und zwei davon zu konkretisieren. 

01 | NÄHRSTOFFAMPEL

Walt-Disney-Methode-2-5

02 | ÖFFNUNGSZEITEN-APP

Walt-Disney-Methode-3

Entscheidungsmatrix

Mit der Entscheidungsmatrix bewerteten wir die letzten beiden Ideen auf ihre Umsetzbarkeit, anhand verschiedener Kriterien und einer Gewichtung. 

Entscheidungsmatrix

Wir entschieden uns dafür, die Öffnungszeiten-App zu realisieren, weil sie im Gegensatz zur Nährstoffampel einen höheren Gesamt-Score aufweist.

PROTOTYPE

Wireframes mit Stift und Papier und das Farbkonzept

In der Prototyping-Phase begann ich damit, die Wireframes per Stift auf Papier zu entwickeln.

Der Fokus lag auf einer klaren und strukturierten Oberfläche, um den Benutzer nicht mit vielen Inhalten zu überfordern.

Diesen Vorgang durchlief ich zwei mal, bis die Wireframes gut genug waren, um daraus die Mockups zu realisieren.

Für das Farbkonzept ließ ich mich von der Pantone-Trendfarbe Ultra-Violett für das Jahr 2018 inspirieren. Dazu eine passende Schattierung, eine Komplementärfabe sowie neutrale Grautöne. Zum innovativen Produkt wählte ich die moderne Schrift Hero. 

Farbe-Font
openNow-Start

Eingabe der Start- und Zieladresse in die App

Der Benutzer tippt seine Start- und Zieladresse in das Inputfield der App. openNow zeigt dem Nutzer Vorschläge im Drop-Down Menü, wenn es zwischen der Eingabe und den vorhandenen Straßennamen Übereinstimmungen gibt.

Er bestätigt die Eingabe durch die Auswahl der Straße, per Klick. Anhand der Fortschrittsanzeige über dem Inputfield sieht er den Vorgang. 

Alternative Start- und Zieleingabe //
Durch Klick auf das Lokalisierungs-Icon wird der aktuellen Standpunkt bzw. den des Benutzers als Startadresse gewählt. Klickt der Benutzer auf das Herz Icon, kann er aus der Favoritenliste ein Lebensmittelgeschäft wählen.

Wie Christina Maier einen Lebensmittelladen auswählt

Nach der 1 Eingabe sucht openNow automatisch nach Lebensmittelläden zwischen der Start- und Zieladresse. 

Christina sieht auf der Karte das 2 Suchergebnis, das durch Warenkorb-Icons präsentiert wird. Ein Slider erscheint, in dem diese Lebensmittelgeschäfte dargestellt werden.

openNow-User-Flow

Die Strecke zum nächstgelegenen Geschäft am Zielort wird visualisiert dargestellt. Mit Klick auf den unteren Bereich der App, erscheint der 3 Dashboard-Button, mit dem Christina zurück ins 4 Hauptmenü gelangt.

Durch die strukturierte und klare Darstellung gewinnt Christina schnell einen umfassenden Überblick der Elemente.

Das Suchergebnis anzeigen

 

Im Slider werden die gefundenen Lebensmittelläden detaillierter dargestellt.

Dort sieht der Benutzer ein Foto des Geschäfts, den Namen, die Öffnungszeiten sowie die aktuelle Kundenfrequenz und ein Herz-Icon, mit dem er den aktiven Lebensmittelladen als Favorit markieren kann.

Zieht der Nutzer den Slider nach rechts/links wird das das entsprechende Geschäft im Slider aktiviert sowie die Route zu diesem Lebensmittelladen berechnet und visuell dargestellt.

openNow-Ergebnis-Fokus

Kundenfrequenz: immer dann einkaufen, wenn wenig los ist

Die Kundenfrequenz ist als Farbverlauf von rot nach grün dargestellt und zeigt an, wie stark besucht das Lebensmittelgeschäft zum Abruf der App ist.

  • Grün: wenig Kundenfrequenz, kurze Wartezeiten.
  • Orange: mittlere Kundenfrequenz, mittlere Wartezeiten.
  • Rot: wenig Kundenfrequenz, lange Wartezeiten.
Slider openNow
openNow-Ergebnis-Herz

Das Lieblingsgeschäft als Favorit hinterlegen

Im Slider kann ein Lebensmittelgeschäft durch Klick auf das Herz-Icon als Favorit gewählt und auch wieder abgewählt werden. Dadurch kann der Benutzer:

  • Per Schnellwahl im Inputfield sein Lieblingsgeschäft auswählen.
  • Benachrichtigungen auf das Smartphone erhalten.
  • Das Lieblingsgeschäft unter „Favoriten“ im Dashboard auswählen.
openNow-Bild mit Rechteck

Benachrichtigung aufs Smartphone erhalten

Ist ein Lebensmittelgeschäft als Favorit hinterlegt, wird eine Benachrichtigung auf das Smartphone des Benutzers gesendet, sobald der Laden durch wenig Kundschaft frequentiert ist. 

ITERATION & USABILITY-TEST

Feedback durch die Nutzer

Schon nach der Entwicklung der ersten Wireframes holte ich Meinungen von drei Personen aus der Zielgruppe ein. Dazu beschrieb ich ihnen die Idee, zeigte die Skizzen und den User Flow.

Das Feedback der Personen war grundsätzlich positiv, enthielt aber an zwei Stellen Potenzial zur Verbesserung:

  • Die genutzten Lokalisierungs-Icons auf der Karte ersetzte ich durch Warenkörbe und stellte diese größer dar. Damit ist die Bedeutung hinter den Warenkorb-Icons direkt für den Nutzer ersichtlich.
  • Der Fingertip an den Lokalisierungs-Icons tauschte ich durch einen Slider aus. So passen nicht nur mehr Informationen auf das Element, sondern der Inhalt ist für den Nutzer lesbarer.

Nach dem Entwickeln der Mockups führten wir einen Usability Test mit Personen aus der Zielgruppe durch. Dabei sollten sie mithilfe des entwickelten Klick-Prototyps ein Lebensmittelgeschäft in der Nähe der Zieladresse als Favorit markieren.

  • Alle fünf Teilnehmer führten diese Aufgabe ohne Probleme durch und konnten sich vorstellen, diese Anwendung künftig zu nutzen.
  • Die Warenkorb-Icons und der Slider wurden in diesem Usability Test sehr positiv durch die Teilnehmer wahrgenommen.

Rückblick &
Resümee

Positive Erfahrungen? //

Mithilfe der Methoden erarbeiteten wir in diesem Design Thinking Prozess ein innovatives Produkt, welches zu Wohlbefinden und damit auch zu positiven Erlebnissen beim Benutzer führt.

Hinterfragen – mach es intensiver! // 

Wir entwickelten zwar ein Produkt, welches zu positiven Erlebnissen beim Benutzer führt, dennoch hätten wir an der ein oder anderen Stelle – insbesondere im Research den künftigen Nutzer intensiver einbeziehen müssen, um das Produkt nutzerzentrierter zu gestalten.

Mini Usability Test mit Wireframes //

Es war eine gute Entscheidung, relativ früh in der Prototyping-Phase den Nutzer zu den entwickelten Wireframes zu befragen. Dabei waren drei Leute ausreichend, die uns ihre Verbesserungsvorschläge mitteilten.

© Yvonne 2021

Back to top Arrow