TL;DR: Das Produkt in Aktion
Angewandte Design-Thinking-Methoden
Recherche und Problemdefinition
Ziel des Projekts war die Entwicklung einer Rezepte-App mit Gesundheitsfokus, da gesunde Gerichte zur Gesundheitsförderung beitragen und ungesunde Ernährung das Risiko schwerwiegender Erkrankungen erhöht. Ein Mindmapping half mir, die möglichen Ursachen für das Problem der ungesunden Ernährung zu identifizieren und Hypothesen aufzustellen.
„Ungesunde Ernährung ist der größte Risikofaktor der Welt. […] Etwa elf Millionen Menschen sterben jährlich aufgrund ungünstiger Ernährung. Die meisten Todesfälle gehen auf Herz-Kreislauf-Erkrankungen zurück.“
Bartens, W., 2019. „Ungesunde Ernährung ist der größte Risikofaktor der Welt“. Süddeutsche Zeitung. Verfügbar unter: www.sueddeutsche.de/gesundheit/ernaehrung-risikofaktor-todesfaelle-1.4396727 (abgerufen am 23.08.2024)
Zielgruppenanalyse
Im Rahmen meiner Recherche habe ich zwei Hauptgruppen innerhalb der Zielgruppe der gesundheitsbewussten Menschen identifizieren: Zum einen jene, die gesund bleiben wollen und zum anderen diejenigen, die gesund werden möchten. Diese Erkenntnis diente als wichtige Grundlage für die Rekrutierung der User-Interview-Teilnehmenden, denn die Bedürfnisse und Motivation dieser beiden Gruppen sind unterschiedlich und müssen entsprechend berücksichtigt werden.
Die Zielgruppe lässt sich in zwei Gruppen mit unterteilen: diejenigen, die gesund bleiben möchten, und jene, die gesund werden wollen.
User-Research (User-Interviews und Online-Umfrage)
User-Interviews
Für die User-Interviews habe ich vier Personen befragt, die alle motiviert sind, sich gesund zu ernähren oder dies bereits tun. Besonders wichtig war mir, auch Personen einzubeziehen, die unter chronischen Erkrankungen oder Lebensmittelunverträglichkeiten leiden.
Online-Umfrage
Zusätzlich habe ich Online-Umfragen durchgeführt, um zu erfahren, um bessere Entscheidungen zu treffen, meine Hypothesen zu stützen und neue Erkenntnisse zu gewinnen. Bei der Auswahl der Umfrage-Teilnehmenden habe ich bewusst auf Präferenzen verzichtet, um allgemeine Erkenntnisse darüber zu gewinnen, wie die Mehrheit über Rezepte, Kochen, Einkaufen und Ernährung denkt. Die App soll nicht nur gesundheitsbewusste Personen ansprechen, sondern auch jene, die sich bisher nicht gesund ernähren und dies ändern möchten.
Ziel der Online-Umfrage war es, die App so zu gestalten, dass sie eine breite Masse anspricht, um eine größere Nutzerbasis zu erreichen. Dadurch wird der Zugang zu gesunder Ernährung und der kommerzielle Erfolg der App erhöht.
Erkenntnissysnthese (Insights)
Zusammen mit der quantitativen Methode, der Online-Umfrage, habe ich Hypothesen stützen können und Keys-Insights abgeleitet. Das Affinity Mapping half mir dabei die Daten zu clustern, um übergeordnete Muster zu identifizieren.
Key-Insights
Die folgenden User-Insights verdeutlichen die Bedürfnisse, Ziele, Frustrationen, Wünsche und Erwartungen der Teilnehmenden aus den Interviews und Umfragen. Dabei fiel mir beispielsweise auf, dass Berufstätige im Homeoffice unterschiedliche Bedürfnisse haben als jene, die im Büro arbeiten, da die Kochmöglichkeiten eingeschränkt sind.
User-Personas
Für die Erstellung der User Personas habe ich die beiden aus der Zielgruppenanalyse ermittelten Hauptgruppen berücksichtigt: Gesundheitsbewusste Menschen, die gesund bleiben wollen (Eike) und jene, die gesund werden wollen (Miriam).
User-Persona 1
Eike arbeitet zuhause, kocht spontan und ist impulsiv.
Eike arbeitet zuhause, kocht spontan und ist impulsiv.
User-Persona Nr. 2
Miriam muss bestimmte Lebensmittel meiden und andere bevorzugen.
Miriam muss bestimmte Lebensmittel meiden und andere bevorzugen.
Customer Journey Maps
Um zu verstehen, wie Menschen Aufgaben oder Ziele erreichen, habe ich ihre Motivation, Denkweise und Gefühlslage in Form einer User Journey Map abgebildet. Dieses mentale Modell erleichtert es, mich in die Nutzer:innen hineinzuversetzen sowie die genauen Abläufe und erforderlichen App-Funktionen für beide Gruppen zu identifizieren.
User Stories und Job Stories
Die User Stories habe ich aus den Erkenntnissen der Customer Journey Maps sowie der Wettbewerbsanalyse entwickelt, wobei ich bei letzterem die Stärken, Schwächen, Chancen und Möglichkeiten anderer Rezepte-Apps berücksichtigt habe. Nach der User-Research-Analyse habe ich nur die für die Personas relevanten Funktionen festgelegt, die für das Minimal Viable Product (MVP) sowie für mögliche zukünftige Erweiterungen im Rahmen von Updates relevant sind.
Die User Stories basieren auf den Customer Journey Maps und der SWOT-Analyse, die ich durch zusätzliche Stories für zukünftige Erweiterungen ergänzt habe.
User-Flows
Für die drei größten User-Bedürfnisse habe ich User Flows erstellt, um die Schritte und Ziele der Nutzer:innen klar darzustellen und frühzeitig potenzielle Reibungspunkte zu identifizieren. Der hier dargestellte User Flow war der herausforderndste und half mir, die Eingabe unerwünschter und bevorzugter Zutaten während des Onboardings so zu entwerfen, dass sie kurz und benutzerfreundlich ist.
Die Lösungen
Eingabe unerwünschter und bevorzugter Zutaten
Die Nutzer:innen können in der App gezielt Lebensmittel auswählen, die sie entweder nicht vertragen oder einfach nicht mögen. Dadurch werden Gerichte, die diese Zutaten enthalten, automatisch aus den Suchergebnissen ausgeschlossen. Nutzer:innen auch bevorzugte Zutaten auswählen, die zur Linderung von Krankheitssymptomen beitragen oder die Gesundheit fördern. Gerichte mit diesen Zutaten werden in den Suchergebnissen priorisiert angezeigt.
Durch die Festlegung von zu meidenden oder bevorzugten Lebensmitteln wird eine unkomplizierte Personalisierung der Suchergebnisse ermöglicht, die jederzeit angepasst werden kann.
Die Möglichkeit, ganze Kategorien wie „tomatenbasierte“ oder „milchhaltige“ Zutaten mit einem Klick auszuwählen, ermöglicht eine schnellere und einfachere Eingabe. Alternativ können auch nur einzelne Zutaten innerhalb einer Kategorie individuell ausgewählt werden, je nach Präferenz. Die Auswahl kann optional während des Onboardings erfolgen und jederzeit in den Profileinstellungen erweitert oder geändert werden.
Health-Score
Der Health-Score gibt an, wie gesund ein Gericht ist. Beim Erstellen eines Rezepts werden die Zutaten mit einer Lebensmitteldatenbank abgeglichen, die Nährwertangaben enthält. Ein automatisiertes Programm berechnet die Gesamtwerte der Nährstoffe, indem es die Angaben der einzelnen Zutaten summiert. Anschließend wird ein „Health-Score“ ermittelt, der dem Nutzer hilft, gesündere Entscheidungen zu treffen.
Detaillierte Nährwertangaben
Die Nutzer:innen können so mehr über die genauen Nährstoffe ihrer Mahlzeiten erfahren.
Bürogeeignete Gerichte
Miriam (User Persona Nr.1) hat hier die Möglichkeit nur bürogeeignete Gerichte anzeigen zu lassen. Hierbei handelt es sich um Gerichte, die kalt genossen werden können und nicht flüssig sind, um einen sicheren Transport zu gewährleisten.
One-Pot-Gerichte für weniger Abwasch
Eike (User Persona Nr. 2) möchte hinterher weniger abwaschen. Der Express-Filter „One-Pot“ ermöglicht eine schnelle und gezielte Suche nach One-Pot-Gerichten.
Lebensmittellexikon
Das Lebensmittellexikon bietet Nutzer:innen umfassende Informationen zu den Vor- und Nachteilen von Lebensmitteln sowie deren Nährwertangaben. Die Infoseiten können auch über die Zutatenliste der Rezeptseiten aufgerufen werden.
Einkaufsliste
Die Einkaufsliste hilft dabei, keine Zutaten zu vergessen, und ermöglicht das Hinzufügen eigener Lebensmittel oder Produkte. Bereits abgehakte Zutaten werden durchgestrichen und am unteren Ende der Liste aufgeführt, um den Nutzern eine klare Übersicht darüber zu geben, was sie bereits haben. Dadurch können versehentlich abgehakte Zutaten problemlos wieder zurückgesetzt werden. Dies löst ein häufiges Problem anderer Rezepte-Apps, bei denen Nutzer oft nicht bemerken, wenn sie eine Zutat versehentlich abgehakt haben.
Usability Tests
Für die Usability-Tests habe ich quantitative und qualitative Methoden angewandt und bei einem Ansatz diese Ansätze kombiniert.
Quantitative Tests: Acht unmoderierte Tests mit dem Tool „Maze“ (www.maze.co), das unter anderem Heatmaps zur Visualisierung der Klicks erstellt.
Qualitative Tests: Zwei persönlich moderierte Tests, bei denen ich ihre Vorgehensweisen beobachtete und direkt Rückfragen stellten konnte.
Außerdem moderierte ich einen persönlichen Test mit Maze, bei denen die Teilnehmenden freier agieren konnten, da keine direkte Nähe bestand. Ziel war es herauszufinden, ob die Nutzung eines Computers im Vergleich zu einem Smartphone Vorteile bietet. Diese Methode ermöglichte es mir, ihre Bewegungen im Nachhinein zu analysieren und mich währenddessen auf spontane Rückfragen zu konzentrieren.
Rainbow Spreadsheet
Klassifizierung der Usability-Probleme: Die Schwere der Usability-Fehler wurden nach der Bewertungsskala von Jakob Nielsen klassifiziert.
Umsetzungsaufwand der Optimierungen: Geringfügige Fehler, insbesondere kosmetischer Natur, die schnell behoben werden können, sollten angegangen werden, sobald die schweren Fehler erledigt sind. Hierfür habe ich zusätzlich eine eigene Priorisierungmethode angewandt:
Quick Win = Schnell umzusetzen
Moderat = Mittlerer Aufwand
Aufwendig = bevorzugt umzusetzen bei Usability-Fehlern mit einer Bewertung von 3 oder 4
Die Usability-Test-Ergebnisse habe ich als Rainbow Spreadsheet dokumentiert:
Moderat = Mittlerer Aufwand
Aufwendig = bevorzugt umzusetzen bei Usability-Fehlern mit einer Bewertung von 3 oder 4
Die Usability-Test-Ergebnisse habe ich als Rainbow Spreadsheet dokumentiert:
Iterationen der auffälligsten und schwerwiegendsten Fehler
Fehler Nr. 1 — Alle Lebensmittel werden nicht auf einmal abgewählt
Teilnehmende benutzen nicht die „Alles abwählen-Funktion“, nachdem die die Aufgabe bekommen haben eine geringe Anzahl an Lebensmitteln auszuwählen.
Fehler Nr. 2 — Das Übersehen von Lebensmitteln
Teilnehmende fanden einige Lebensmittel nicht, da sie nicht wussten, dass sie dazu scrollen müssen.
Die Teilnehmenden sollten die Lebensmittel H-Milch, Milch, Milchpulver, Sahne und Vollmilch auswählen.
Iterationen
1. Zu Beginn sind alle Zutaten deaktiviert, um sicherzustellen, dass Nutzer nur wenige Klicks benötigen, wenn sie eine geringe Anzahl an Lebensmitteln auswählen möchten. Wenn alle Zutaten ausgewählt werden sollen, könnten sie eher auf „Alles mit #Milch“ klicken.
2. Ein dezentes Pfeil-Icon am unteren Rand des sichtbaren Bereichs dient als „Overflow-Indikator“. Nutzer erkennen den Pfeil und ahnen, dass die Checkliste länger ist. Sie können darauf tippen, um den Inhalt nach oben zu wischen, oder einfach scrollen.
Fehler Nr. 3 — Warnsymbol sorgt für Irritation und Ablenkung
Teilnehmende sind irritiert oder empfinden das rote Warnsymbol als störend.
Hintergrund: Die Darstellung von Gerichten, die unerwünschte Zutaten enthalten, kann optional aktiviert werden. Diese Funktion basiert auf der Erkenntnis aus Interviews, dass einige Teilnehmende unverträgliche Zutaten durch verträgliche Alternativen ersetzen möchten.
Iterationen
Ein kreisförmiges Warnsymbol wird (vermutlich) weniger als Fehler und eher als ein warnender Hinweis wahrgenommen.
Der Schieberegler hat im ausgeschalteten Zustand ein Kreuz-Symbol, um die Barrierefreiheit zu erhöhen.
Das Warnsymbol ist nicht mehr in der unteren rechten Ecke der Rezeptfotos platziert sondern dezent neben den Rezepteigenschaften. Es wirkt nicht mehr störend und ist schneller wahrnehmbar, als wenn es auf einer rötlichen Flache eines Fotos stehen würde.
Fehler Nr. 4 — Probleme beim Auffinden der Einkaufsliste
Drei Teilnehmende finden die erstellte Einkaufsliste nicht, spät oder erstellen eine neue Einkaufsliste, nachdem sich der Feedback-Screen nach 2000 ms automatisch auflöste und der User zur Rezepte-Seite zurückkehrte.
Iteration
Navigationsoptionen: Dauerhafte Einblendung der Optionen „Zurück zum Rezept“ und „Zur Einkaufsliste“ durch zwei Buttons:
Vorteil: Nutzer:innen können in Ruhe selbst entscheiden, ob sie zur Rezepte-Seite oder zur erstellten Einkaufsliste gelangen möchten. Dadurch wird die Aktion transparenter und besser nachvollziehbar.
Die Gestaltung
Logo
Für das Logo habe ich eine verspielte, organische Schrift gewählt, die sich von der Konkurrenz abhebt und der App einen hohen Wiedererkennungswert verleiht. Während viele Rezepte-Apps auf funktionale, minimalistische Schriften setzen, bietet diese Schrift eine emotionale Ansprache, die perfekt zu Leafy, dem sympathischen Maskottchen der App, passt.
Typografie
Die moderne und neutrale Schrift Open Sans habe ich aufgrund ihrer hervorragenden Lesbarkeit ausgewählt. Besonders bei Zutatenlisten und Zubereitungsanleitungen ist eine klare Darstellung entscheidend. Ein weiteres Kriterium ist die gute Lesbarkeit von Open Sans auch bei geringer Schriftgröße.
Farben
Die Grundfarben der App sind Grün, Orange und Violett.
Grün symbolisiert Gesundheit und frische Lebensmittel, wird für Wortmarke und für das Maskottchen verwendet.
Orange hebt Bestätigungsaktionen wie das Speichern von Änderungen hervor (z. B. bei der Auswahl von Zutaten).
Violett unterstützt die Navigation und Auswahlmöglichkeiten, z. B. in der Tab-Leiste oder bei den Filter-Möglichkeiten.
Buttons, die weniger auffallen sollen, werden dezent als Outline-Variante eingesetzt.
Style Guide
Barrierefreiheit
Die App erfüllt die Kontrastanforderungen gemäß dem WCAG-Standard AA. Für alle Bildelemente habe ich Alt-Texte geschrieben. Zudem habe ich alle Touch Targets wie Buttons und Links so umgesetzt, dass sie für alle Nutzer:innen, einschließlich Personen mit kognitiven oder motorischen Einschränkungen, gut bedienbar sind. Diese erfüllen den WCGA-Standard AAA.
In den Einstellungen kann die Option Leichte Sprache aktiviert werden. Ein Beispiel für die Umsetzung der Leichten Sprache und der barrierefreien typografischen Gestaltung findet sich in den Zubereitungsschritten (siehe dazu den nächsten Punkt: Leichte Sprache).
Leichte Sprache
In den Einstellungen kann die Option Leichte Sprache aktiviert werden. Ein Beispiel für die Umsetzung der Leichten Sprache und der barrierefreien typografischen Gestaltung kann man am Beispiel der Zubereitungsschritte sehen.
Interaktiver Click-Dummy
Vielen Dank fürs Ansehen!
Wenn meine Case Study dich überzeugt hat, kontaktiere mich gerne auf LinkedIn.