Darstellung der App taste buddies

2021

taste buddies

Mit taste buddies wird Kochen kein Hexenwerk mehr. Die App unterstützt dabei, Lieblingsgerichte jederzeit Schritt für Schritt nachzukochen. Sie ermöglicht den Zugriff auf Rezepte und Tipps von Freund*innen und Familie, bietet Raum für Austausch und erlaubt es, eigene Rezepte hinzuzufügen.

taste buddies bietet eine übersichtliche Auswahl an Gerichten, die dem persönlichen Geschmack entsprechen: Geschmacksgarantie statt Entscheidungsnot.

Charaktere der App taste buddies
👥
Team

Zusammenarbeit mit Celia Krämer und Louise Tritschler im 2. Semester, Bachelor, Digital Environments, UX-, UI- und Motion-Design

Tasks

Research, Personas, User Journeys, Flow Charts, Wireframing, Prototyping, Testing, Animation

🛠️
Tools

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

Darstellung der App taste buddies

Kochen leicht gemacht …

Ermöglicht das Entdecken von Rezepten aus dem Freundeskreis, das Hochladen eigener Rezepte sowie das direkte Hinzufügen benötigter Zutaten zur Einkaufsliste.

taste buddies in 90 Sekunden

Der Prototyp auf einem Blick

Rezepte von Freund*innen können unkompliziert angefragt und anschließend weiterempfohlen werden.

Interessiert am Prozess?

Double Diamond

Double Diamond

Der Prozess orientierte sich am Double-Diamond-Modell, das half, die Bedürfnisse der Nutzenden zu verstehen und umzusetzen. Die Phasen Research, Definieren, Entwickeln und Testen wurden iterativ durchlaufen, um das Konzept stetig zu verfeinern.

Brainstorming

Brainstorming

Jedes Teammitglied sammelte Ideen zu möglichen App-Funktionen. Anschließend wurden die besten Ansätze gemeinsam ausgewählt, weiterentwickelt und kombiniert.

Stakeholder Map

Stakeholder Map

Relevante Stakeholder und Zielgruppen wurden identifiziert. Die Hauptzielgruppe umfasst Personen mit geringer Kocherfahrung sowie Kochinteressierte, die Rezepte austauschen und sich inspirieren lassen möchten.

Marktrecherche

Marktrecherche

Die Analyse bestehender Koch-Apps zeigte, welche Funktionen hilfreich oder hinderlich für Nutzende sind.

Personas

Personas

Fiktive Personas verdeutlichten typische Merkmale der Zielgruppe und bildeten die Grundlage für die Hauptcharaktere Paula und Anton, die die App symbolisch begleiten.

User Journey Map

User Journey Map

Die User Journey Map identifizierte Gain- und Painpoints während des Kochprozesses. So konnten Probleme wie Überforderung, Zeitaufwand und fehlende Informationen erkannt und in den Designprozess integriert werden.

User Flow Chart

User Flow Chart

Das Flow Chart visualisierte Aufbau und Funktionen der App, deckte Logikfehler auf und stellte sicher, dass das Team ein gemeinsames Verständnis der Abläufe hatte.

Papierprototyp

Papierprototyp

Zunächst erstellte jedes Teammitglied Skizzen der App, die mithilfe der Marvel-App zu einem Papierprototypen zusammengeführt wurden. Damit konnten die Grundfunktionen bildlich dargestellt, getestet und die besten Ideen als Grundlage für den Wireframe verwendet werden.

Wireframe

Wireframe

Der Wireframe stellte die Funktionen der App dar, ohne dass Gestaltung berücksichtigt werden musste. So konnte der Aufbau effizient visualisiert und Änderungen schnell umgesetzt werden.

Prototyp

Prototyp

Auf Basis des Wireframes wurde in Figma ein interaktiver Prototyp erstellt, der mit potenziellen Nutzenden getestet und anschließend optimiert wurde.

Nutzertest

Mit dem Prototyp führten wir Tests bei fünf Personen durch, die Aufgaben in der App eigenständig lösen sollten und dabei laut ihre Gedanken äußerten. Die Bedienung funktionierte grundsätzlich intuitiv, einzelne Hürden wurden erkannt und anschließend optimiert.

Nutzertest Nutzertest Nutzertest Nutzertest
Styleguide

Micro Styleguide

Der Styleguide dient als Gestaltungsrichtlinie für die App, den Explainer-Film und zukünftige Anwendungen. Er sorgt für ein einheitliches Design und ermöglicht Nutzenden, vertraute Elemente schnell wiederzuerkennen.

High Fidelity Version

Die High-Fidelity-Version zeigt sowohl Funktion als auch Gestaltung der App und bildet sie realitätsnah ab. Basierend auf den Wireframes wurden zentrale Screens ausgewählt und mithilfe des Styleguides gestaltet.

Eine Animation simuliert App-Transformationen. Dazu wurden in Figma einige High-Fidelity-Screens verlinkt und Übergänge mit der Smart-Animate-Funktion animiert.