Darstellung der App taste buddies
Projekte navigate_next

taste buddies

2021

taste buddies

Mit taste buddies ist Kochen endlich kein Hexenwerk mehr: Die App hilft dir dabei, deine Lieblingsgerichte jederzeit und Schritt für Schritt nachzukochen. Hier kannst du auf die Rezepte und Tipps deiner Freunde und Familie zugreifen, dich mit ihnen austauschen und auch selbst Rezepte hinzufügen.

taste buddies liefert dir eine übersichtliche Auswahl an Gerichten, die dir schmecken: Geschmacksgarantie statt Entscheidungsnot!

Charaktere der App
people_outline

Team: Zusammenarbeit mit Celia Krämer und Louise Tritschler im 2. Semester an der HAWK Gestaltung Hildesheim

checklist

My Tasks: Anwendung von UX-Methoden, Research, Testing, Prototyping, Animation

devices

Tools: Marvel, Figma, Whimsical, Adobe Audition, After Effects, Illustrator, InDesign, Photoshop

Darstellung der App taste buddies

Entdecke tolle Rezepte deiner Freunde, lade selbst Rezepte hoch und füge die benötigten Zutaten direkt auf deine Einkaufliste hinzu.

taste buddies in 90 Sekunden

Der Prototyp auf einem Blick

Du vermisst das Rezept deines Buddies? Kein Problem – Einfach anklopfen und nachfragen! Anschließend kannst du das leckere Rezept sogar noch weiterempfehlen.

Interessiert an der Dokumentation? – Alle Infos gibt es hier.

expand_more

Zielstellung

Die riesige Auswahl an Rezepten im Internet überfordert einen oft. Daher stellen Fertiggerichte für viele Menschen eine schnelle Lösung dar, jedoch ist diese Alternative oft teurer und ungesünder als der Griff zu frischen Zutaten. Aus diesem Grund stellten wir uns die Frage: Wie können Menschen mit wenig Kocherfahrung dazu motiviert werden, öfter frisch und ausgewogen zu kochen?

Mithilfe einer App soll möglich gemacht werden, die Rezepte von Freunden und Familie, welche einem bereits geschmeckt haben, ganz einfach nachzukochen. Durch eine Überschaubare Auswahl und eine Schritt für Schritt Anleitung, soll die Lust am Kochen gesteigert werden und somit der Verzehr von Fertiggerichten verhindert werden.

Der Weg zum Ziel: UX-Methoden

Durch verschiedene UX-Methoden konnten wir ein nutzerfreundliches Produkt erschaffen und sicherstellen, dass dieser es schlussendlich intuitiv versteht und somit nutzen kann.

Double Diamond

Während des gesamten Prozesses haben wir uns am Double Diamond Modell orientiert, welches uns dabei verhalf die Bedürfnisse der Nutzer gezielt zu verstehen und einzusetzen. Die einzelnen Phasen (Research, Definieren, Entwickeln und Testen) durchliefen wir dabei nie linear, sondern immer iterativ. So haben wir im Prozess immer mehr Wissen dazu gewonnen, Probleme erkannt und bestimmte Teile so lange überarbeitet, bis wir ein durchdachtes und ansprechendes „Endprodukt“ erzielten.

Double Diamond
Brainstorming

Brainstorming

Mithilfe der Brainstorming Methode überlegte sich Jeder einzelne von uns, welche Funktionen die App haben könnte. Anschließend stimmten wir gemeinsam ab, mit welchen Ideen wir weiterarbeiten wollten. Durch diese Methode konnten wir die besten Ideen von Jedem mit einbeziehen, uns gegenseitig inspirieren und die Ideen ausbauen.

Stakeholder Map

Durch eine Stakeholder Map stellten wir fest , welche Akteur*innen für unser Produkt relevant sind und welche Zielgruppe wir damit erreichen wollen. Dabei haben wir festgestellt, dass die Hauptzielgruppe Menschen umfasst, welche nur wenig Erfahrung im Kochen haben und das Kochen erlernen möchten. Darüber hinaus wollen wir auch die Menschen erreichen, die am Kochen interessiert sind, ihre Rezepte mit anderen austauschen und sich inspirieren lassen möchten.

Stakeholder Map
Marktrecherche

Marktrecherche

Um einen Eindruck vom Wettbewerb zu erhalten, analysierten wir diverse Anbieter auf dem Markt, welche ebenfalls Apps zum Thema „Kochen“ und „Kochen lernen“ anbieten. Hierbei unterschieden wir in positive und negative Beispiele. So konnten wir herausfinden, was für den Nutzer hilfreich oder auch störend sein könnte, um diese Erkenntnisse in unserer App zu beachten. Grundsätzlich ist uns bei der Recherche aufgefallen, dass viele Apps sehr überladen sind und somit gerade Kochanfänger mit ihrer riesigen Auswahl überfordern könnten.

Personas

Um ein Gefühl dafür zu bekommen, wie unsere Zielgruppe lebt, handelt und denkt, erstellten wir fiktive Personas, die stellvertretend für unsere Zielgruppe stehen und typische Merkmale dieser Menschen aufweisen. Diese bildeten die Grundlage für unsere späteren Hauptcharaktere Paula und Anton, welche die App symbolisch begleiten.

Personas
User Journey Map

User Journey Map

Um zu verstehen, welche sogenannten „Gain- und Painpoints“ während des Kochenprozesses bei den Nutzern auftreten, erstellten wir eine User Journey Map. Entlang der unterschiedlichen Touchpoints erkannten wir verschiedene Problemstellen und konnten diese in unseren späteren Designprozess integrieren und optimieren. Dazu erstellten wir exemplarisch für unsere Personas einen möglichen Handlungsablauf und stellten fest, dass zwar Interesse am Kochen und einer ausgewogenen Ernährung besteht, dieses jedoch durch Überforderung, zeitlichem Aufwand und ungenügend Informationen begleitet wird.

User Flow Chart

Mithilfe eines Flow Charts definierten wir den Aufbau und die Funktionen der App. Hierbei handelt es sich um ein Flussdiagramm, was dem Zweck dient, frühzeitig Logik-Fehler zu erkennen, sowie einen logischen Ablauf der einzelnen Seiten und ihrer Interaktionsmöglichkeiten für den User zu visualisieren. Zudem ist ein User Flow Chart enorm hilfreich, um undurchdachte Abläufe aufzudecken und um im Team ein gemeinsames Verständnis des Aufbaus der App zu erhalten.

User Flow Chart

Konzeption des Prototypens

Die App soll durch ein nutzerzentriertes Design intuitiv bedient werden können. Um dieses zu gewährleisten, wird zuerst ein Low Fidelity Prototyp erstellt mit dem Ideen und Abläufe früh geprüft werden können.

Papierprototyp

Um eine gemeinsame Vorstellung von dem Aufbau der App zu erhalten, hat jeder für sich im ersten Schritt Skizzen von der App erstellt und diese mithilfe der Marvel App zu einem Papierprototypen zusammengestellt. Mithilfe dieser Prototypen konnten wir die Grundfunktionen der App ohne großen Aufwand bildlich darstellen und auf ihre Sinnhaftigkeit testen. Die jeweils besten Ideen dienten als Grundlage für den im nächsten Schritt folgenden Wireframe.

Papierprototyp
Wireframe

Wireframe

Der Wireframe verhalf uns dabei, die Funktionen der App darstellen zu können, ohne dabei auf eine Gestaltung achten zu müssen. Dadurch konnten wir den Aufbau der App effizient darstellen und Änderungen schnell anpassen.

Prototyp

Aus dem Wireframe erstellten wir durch Verlinkungen in Figma einen interaktiven Prototypen, welchen wir an potenziellen Usern testen und anschließend optimieren konnten.

Prototyp

Nutzertest

Mithilfe des zuvor erstellten Prototyps führten wir einen User Test bei insgesamt fünf Testpersonen durch. Den Testpersonen wurden zu den verschiedenen Bereichen der App gezielte Fragen gestellt, welche sie mithilfe der App eigenständig lösen sollten. Dabei wurden die Testpersonen darum gebeten, währenddessen laut zu denken. Grundkamen die Testpersonen sehr gut zurecht und konnten die Fragen intuitiv lösen. Dennoch sind durch den Test einzelne „Hürden“ aufgefallen, welche wir anschließend optimiert haben.

Nutzertest
Nutzertest
Nutzertest
Nutzertest

Styleguide

Der Styleguide dient als als Gestaltungsrichtlinie für die App, den Explainer (Funktionsvideo der App) und für alle weiteren Gestaltungen die in Zukunfts dazu kommen könnten. So kann sichergestellt werden, dass für alle Kanäle eine einheitliche Gestaltung angewendet wird. Zudem hat dieses den Vorteil, dass der Nutzer bereits gwohnte Elemente wiedererkennt und sich schneller zurechtfindet.

Styleguide

High Fidelity Version

In einer High Fidelity Version wird nicht nur die Funktion der App, sondern auch die Gestaltung dargestellt. Eine High Fidelity Version bildet die App so dar, wie sie final aussehen könnte. Auf Grundlage des Wireframes wählten wir Screens aus, welche die Hauptfunktionen der App gut darstellen. Diese bauten wir mithilfe des Styleguides in eine High Fidelity Version um.

In einer Animation simulierten wir, wie Transformationen der App programmiert aussehen könnten. Dazu erstellten wir in Figma aus einigen High Fidelity Screens einen Prototypen und animierten die Übergänge mithilfe der Smart Animate Funktion.