Die Plan Plate Website präsentiert die Plan Plate App und hilft den Nutzern, ihre Funktionen und Vorteile zu verstehen.

Mit einem einfachen, benutzerfreundlichen Design führt sie die Besucher durch die Funktionsweise der App, erklärt wer sie entwickelt hat und zeigt, warum sie nützlich ist.

Außerdem vernetzt die Website die Nutzer über soziale Medien und teilt Tipps zur Mahlzeitenplanung, wodurch eine gesunde Ernährung einfach und unterhaltsam wird.

Figma-Prototyp ansehen
Project Overview​​

Problemstellung:

Viele potenzielle Nutzer haben Schwierigkeiten, auf Websites klare und ansprechende Informationen über Mahlzeitenplanungs-Apps zu finden.
Dies führt oft zu Zögern beim Herunterladen und der Nutzung solcher Apps.

 

Wertangebote:

  • Eine umfassende Übersicht über die Plan Plate App bereitstellen.
  • Nutzer mit ansprechenden und informativen Inhalten gewinnen.
  • Ein nahtloses Nutzungserlebnis sicherstellen, das zum Herunterladen der App motiviert.
The Process

Unser dreiköpfiges Team folgte dem Double-Diamond-Ansatz, basierend auf der Design-Thinking-Methodik.
Es handelte sich dabei nicht um einen linearen Prozess – wir wechselten während des Projektverlaufs mehrfach zwischen den einzelnen Phasen hin und her.

Discover

Wettbewerbsanalyse

 

Zu Beginn analysierten wir die Wettbewerber, um die Bedürfnisse des Marktes besser zu verstehen und Verbesserungspotenziale zu identifizieren.

Dies half uns, die Plan Plate Website so zu gestalten, dass sie die Nutzererwartungen erfüllt und sich effektiv von der Konkurrenz abhebt.

Wettbewerber 1: Mealime

  • Stärken: Sauberes Design, klare Call-to-Action.
    Schwächen: Fehlende detaillierte Beschreibung der App-Funktionen.

Wettbewerber 2: Yummly

  • Stärken: Umfassende Inhalte, ansprechende Visuals.
    Schwächen: Überladene Startseite mit zu vielen Informationen.

Wettbewerber 3: Paprika

  • Stärken: Benutzerfreundliches Rezept-Management, nahtlose Erstellung von Einkaufslisten.
    Schwächen: Eingeschränkte Diätplan-Optionen, kostenpflichtige App.

Wettbewerber 4: PlateJoy

  • Stärken: Personalisierte Ernährungspläne, Integration mit Lebensmittellieferungen.
    Schwächen: Abonnement erforderlich für die meisten Funktionen.

Wettbewerber 5: Eat This Much

  • Stärken: Automatisierte Mahlzeitenplanung, anpassbare Ernährungsoptionen.
    Schwächen: Begrenzte kostenlose Funktionen, kann für neue Nutzer überfordernd wirken.

Umfrage:


Um die Bedürfnisse und Präferenzen potenzieller Nutzer besser zu verstehen, führten wir eine Umfrage durch, die sich auf verschiedene Aspekte von Mahlzeitenplanungs-Websites konzentrierte.

Die Umfrage sammelte Antworten zu Demografie, Website-Nutzung, Nutzererfahrung, gewünschten Funktionen und Inhaltspräferenzen.

Erkenntnisse aus Nutzerinterviews:


Wir führten Interviews mit 9 potenziellen Nutzern durch, um sicherzustellen, dass die Plan Plate Website die Bedürfnisse und Erwartungen der Nutzer erfüllt.

Hier sind die wichtigsten Erkenntnisse und Vorschläge aus 4 dieser Interviews:

 

Interviewpartner: Ali – Freiberuflicher Grafikdesigner

Feedback:

„Ich suche oft online nach Lösungen zur Mahlzeitenplanung, aber die meisten Websites wirken überladen und sind schwer zu navigieren.“

 

Vorschläge:

  • Die Funktionen der App klar erklären.
  • Einen einfachen Weg zum Herunterladen der App bereitstellen.
  • Screenshots oder Demo-Videos verwenden.
  • Einen FAQ-Bereich einfügen.
  • Eine intuitive Navigation sicherstellen.

 

Interviewpartnerin: Sarah – Berufstätige mit wenig Zeit

Feedback:

„Ich brauche eine Mahlzeitenplanungs-App, die leicht zu bedienen und schnell zu verstehen ist.“

 

Vorschläge:

  • Zeitsparende Funktionen auf der Startseite hervorheben.
  • Testimonials oder Bewertungen einbinden.
  • Schnelle Ladezeiten und Mobilfreundlichkeit sicherstellen.
  • Klare Call-to-Action-Buttons verwenden.

 

Interviewpartnerin: Lila – Gesundheitsbewusste

Feedback:

„Ich möchte sehen, wie die App auf spezielle Ernährungsbedürfnisse eingeht.“

 

Vorschläge:

  • Die verschiedenen unterstützten Ernährungspläne im Detail darstellen.
  • Erfolgsgeschichten oder Fallstudien zeigen.
  • Eine interaktive Demo oder eine kostenlose Testversion anbieten.
  • Ein klares, modernes Design verwenden.

 

Interviewpartnerin: Niloo – Fitnessbegeisterte

Feedback:

„Ich brauche eine App, die sich in meine Fitnessroutine integrieren lässt.“

 

Vorschläge:

  • Informationen zu den Fitness-Support-Funktionen bereitstellen.
  • Einzigartige App-Funktionen hervorheben.
  • Vergleichstabellen oder Feature-Listen nutzen.
  • Einen Blog oder Ressourcenbereich mit Tipps einfügen.

Wichtigste Erkenntnisse:

Diese Informationen fassen die wichtigsten Erkenntnisse aus unserer Wettbewerbsanalyse, der Umfrage und den Nutzerinterviews zusammen.

Diese Erkenntnisse dienen als Grundlage für das Design und die Entwicklung der Plan Plate Website.
Sie stellen sicher, dass die Website benutzerfreundlich, ansprechend ist und die Vorteile der App klar vermittelt.

Benutzeroberfläche:

  • Klares Design: Nutzer schätzen ein aufgeräumtes, visuell ansprechendes Design.
  • Modernes Design: Eine klare, moderne Benutzeroberfläche ist wichtig.
  • Schnelle Ladezeiten: Kurze Ladezeiten sind entscheidend, um das Interesse der Nutzer zu erhalten.

Funktionsklarheit:

  • Klare Call-to-Action: Eindeutige Handlungsaufforderungen zeigen den nächsten Schritt.
  • Funktionsbeschreibungen: Detaillierte Erklärungen der App-Funktionen helfen, die Vorteile zu verstehen.
  • Visuelle Elemente: Screenshots oder Demo-Videos verbessern die Verständlichkeit der Funktionen.

Nutzerbindung:

  • Nutzerstimmen: Positive Bewertungen schaffen Vertrauen und Glaubwürdigkeit.
  • Erfolgsgeschichten: Fallstudien und User Stories motivieren und binden Nutzer.
  • Community-Interaktion: Links zu Social Media und Community-Events fördern die Interaktion.

Zugänglichkeit und Benutzerfreundlichkeit:

  • Intuitive Navigation: Nutzer benötigen eine übersichtliche und intuitive Struktur der Website.
  • Mobilfreundlichkeit: Ein responsives Design gewährleistet die Nutzbarkeit auf verschiedenen Geräten.
  • Schnelle Ladezeiten: Nutzer erwarten kurze Ladezeiten, um engagiert zu bleiben.

Inhalte und Ressourcen:

  • Ernährungspläne: Detaillierte Informationen zu den unterstützten Diätplänen.
  • FAQ-Bereich: Antworten auf häufig gestellte Fragen erhöhen die Nutzerzufriedenheit.
  • Lehrreiche Inhalte: Blogs oder Artikel mit Tipps und Ratschlägen werden von den Nutzern geschätzt.
Define

Persona

Nach der Durchführung von Interviews und der Analyse der Bedürfnisse sowie Herausforderungen unserer Nutzer entwickelten wir eine Persona, die uns während des gesamten App-Entwicklungsprozesses als Orientierung diente.

Seitenstruktur

 

Wie haben wir die Informationsarchitektur neu gestaltet?

Develop

Mid-Fidelity-Wireframing


Wir erstellten Mid-Fidelity-Designs, um eine Vision für das Layout der App zu skizzieren.
Diese Phase beinhaltete mehrere Iterationen.

Herausforderungen und Lösungen

 

Herausforderung:

Überladenes Layout:

  • Die Seite enthielt zu viele Informationen, sodass es für Nutzer überfordernd war, schnell das Gewünschte zu finden.

Solution:

Vereinfachtes Layout:

  • Das neue Design bietet ein klareres, besser strukturiertes Layout, reduziert visuelle Ablenkungen und erleichtert es den Nutzern, sich auf die wesentlichen Informationen zu konzentrieren.

Herausforderung:

Wichtige Informationen sind versteckt:

  • Zentrale Funktionen und Vorteile der App waren nicht sofort sichtbar und erforderten langes Scrollen.

Lösung:

Hervorgehobene Schlüsselinformationen:

  • Wichtige Elemente wie das Nutzenversprechen, Download-Buttons und Kernfunktionen werden nun prominent oben auf der Seite angezeigt. So verstehen Nutzer die Vorteile der App auf einen Blick, ohne lange scrollen zu müssen.

Herausforderung:

Schwer auffindbarer Download-Button:

  • Der Call-to-Action-Button zum Herunterladen der App war nicht klar erkennbar, was es für Nutzer erschwerte, ihn zu finden und darauf zu reagieren.

Lösung:

Auffälliger „App herunterladen“-Button:

  • Der „App herunterladen“-Button ist nun in Gelb hervorgehoben und oben auf der Seite platziert.
    Dies lenkt sofort die Aufmerksamkeit darauf und erleichtert es den Nutzern, die App zu finden und herunterzuladen – was die Nutzerinteraktion erhöht.

UI-Design-Ansatz

Um ein High-Fidelity-Interface für Plan Plate zu gestalten, begannen wir mit der Erstellung eines Moodboards,

das die Hauptziele und die von den Stakeholdern gewünschten Emotionen widerspiegelt.
Dies half uns, die visuelle Richtung und die gesamte Ästhetik der Benutzeroberfläche festzulegen.

Deliver

Design-Iteration

Das Layout und Design der ersten Seiten wurden mehrfach überarbeitet, bis die endgültige Version genehmigt war –

doch dieser iterative Prozess wird auch in Zukunft fortgesetzt.

Obwohl sich der Designprozess ständig an das verändernde Verhalten und die Bedürfnisse der Menschen anpasst, haben wir entschieden, dass dieser Prototyp unseren „Done“-Punkt markiert.
Er zeigt, was wir durch unsere Designarbeit erreicht haben.

Figma-Prototyp ansehen
Reflections

Was habe ich gelernt?

  • User-Centered Design: Das Verständnis der Nutzerbedürfnisse ist entscheidend, um eine intuitive Website zu gestalten.
  • Effektive Iteration: Iterationen auf Basis von Feedback und Testing verbessern die Benutzerfreundlichkeit und steigern die Nutzerbindung.
  • Klare Kommunikation: Die klare Präsentation von Schlüsselinformationen und Call-to-Action-Buttons erhöht das Nutzererlebnis und die Interaktion.

Was können wir als Nächstes tun?

  • Kontinuierliches Nutzerfeedback: Regelmäßig Feedback der Nutzer einholen, um die Website stetig zu verbessern.
  • Funktionalitäten erweitern: Neue Features wie personalisierte Mahlzeitenempfehlungen und die Integration von Lebensmittellieferungen hinzufügen.