Im Rahmen des Kurses „Projekt: Mobile Design“ wurde die Aufgabe gestellt, eine mobile App im Themenfeld Urban Gardening für eine fiktive Kommune zu konzipieren und gestalterisch auszuarbeiten. Ziel war es, den Bürger*innen durch eine leicht verständliche und motivierende App Urban Gardening näherzubringen und zu erleichtern.
Jahr
2025
Institution
IU Internationale Hochschule
1. Aufgabenanalyse & Themenfindung
Zu Projektbeginn stand die Analyse der Aufgabenstellung im Mittelpunkt: Für eine fiktive Kommune sollte eine mobile App konzipiert werden, die Bürger*innen für Urban Gardening begeistert und den Einstieg so leicht wie möglich macht.
Basierend auf den Anforderungen habe ich für mich folgende Leitfragen formuliert:
Wie können digitale Tools Hürden beim Urban Gardening abbauen?
Welche Motivation benötigen Stadtbewohner*innen, um mit dem Anbau von eigenen Lebensmitteln zu beginnen?
Wie lässt sich die App gestalterisch und konzeptionell so anlegen, dass sie möglichst viele erreicht und aktiviert?
Mit der Aufgabenanalyse habe ich den Rahmen gesetzt und die Ziele meines Projekts „VeggieVault“ klar definiert: Motivation steigern, Einstieg erleichtern und nachhaltiges Verhalten fördern.
2. Recherche & Benchmarking
In der Recherchephase habe ich verschiedene Apps im Bereich Urban Gardening sowie verwandte Konzepte wie Pflanzenpflege, Gamification und Community-Apps analysiert. Ziel der Benchmarking-Analyse war es, Best Practices, mögliche Marktlücken und Schwächen zu identifizieren, um daraus Anforderungen und Abgrenzungen für „VeggieVault“ zu entwickeln.
Zu den betrachteten Apps zählten beispielsweise:
Planta: Übersichtliche Pflanzenpflege und Erinnerungsfunktionen, aber kaum Motivation durch Erfolge oder Community.
Duolingo/Headspace: Motivationsmodell über Gamification, klare Zielverfolgung und Belohnungssystem.
GartenApp: Fokus auf Know-how-Vermittlung und lokale Anbauplanung, jedoch wenig ansprechendes Community-Feature.
Besonders inspirierend waren klare Fortschrittsanzeigen und Community-Challenges, die ich für VeggieVault übernommen und auf den Bereich Urban Gardening angepasst habe. Verbesserungswürdig fand ich hingegen die Usability und den Spaßfaktor vieler Pflanzenpflege-Apps, was einen Anreiz darstellte, diese Aspekte bewusst hervorzuheben.
3. Ideenfindung & Brainstorming
Im Anschluss an die Marktanalyse habe ich verschiedene Kreativmethoden eingesetzt, um innovative Lösungsansätze für „VeggieVault“ zu entwickeln. Beim Brainstorming und mit Hilfe von Mindmaps sammelte ich zahlreiche Funktionsideen, von automatisierten Pflegehinweisen über soziale Community-Challenges bis hin zu Sparzielen für Nutzer*innen.
Die gesammelten Ideen wurden thematisch sortiert und auf ihre Eignung für Einsteiger*innen im Urban Gardening überprüft. Über ein einfaches Bewertungssystem priorisierte ich jene Features, die einen besonders hohen Nutzermehrwert bieten und das Projekt von bestehenden Apps abgrenzen – etwa die Kombination aus digitaler Unterstützung, Gamification und sozialem Austausch.
Erste Visualisierungen, wie Sketches von möglichen App-Flows oder Feature-Übersichten, halfen dabei, die besten Ideen weiter auszuarbeiten.
4. Nutzerszenarien & Storyboards
In meinem Projekt habe ich den Fokus auf die Entwicklung und Visualisierung praxisnaher Nutzerszenarien gelegt. Anhand typischer Anwendungsfälle wird deutlich, wie VeggieVault Einsteigerinnen und urbanen Gärtnerinnen praktische Hilfestellung gibt und die Motivation steigert. Diese Szenarien habe ich mithilfe von Storyboards detailliert visualisiert. So kann der Weg vom Problem (z.B. „Wann muss ich meine Pflanzen gießen?“) bis zur Lösung durch die App (Pflegehinweise, Community-Tipps, Fortschrittsanzeigen) direkt nachvollzogen werden.
Die Storyboards zeigen beispielhaft:
Den Start bei der ersten Nutzung der App
Die Anlage und Pflege einer neuen Pflanze inklusive Hilfestellung
Die Teilnahme an einer Community-Herausforderung
Durch diese anschaulichen Nutzerszenarien wird der Mehrwert der App – schnelle Orientierung, motivierende Elemente und Hilfestellung ohne Vorkenntnisse – klar hervorgehoben.
5. User Flow & Informationsarchitektur
Die Entwicklung eines intuitiven User Flows war die Grundlage für eine leicht bedienbare App. Mithilfe von Flussdiagrammen habe ich alle zentralen Nutzerwege abgebildet – etwa das Anlegen einer neuen Pflanze, die Dokumentation von Ernten oder die Teilnahme an Community-Challenges. Dabei wurden verschiedene Einstiegspunkte und Entscheidungsmöglichkeiten (z.B. bei Fehlern oder Abbrüchen) berücksichtigt.
Parallel entstand eine konsistente Informationsarchitektur: Alle App-Inhalte wurden in klar strukturierte Bereiche und Ebenen gegliedert. Eine übersichtliche Sitemap gewährleistet, dass Nutzer*innen stets wissen, wo sie sich befinden und wie sie zu den wichtigsten Features gelangen. Die Navigationsstruktur wurde mehrfach getestet und z.B. im Wireframe iteriert, bis eine möglichst reibungslose Nutzerführung entstand.
6. Sketching & Wireframing
In der Sketching-Phase habe ich verschiedene Layoutideen und Screen-Abfolgen direkt als Handskizzen umgesetzt, um schnell unterschiedliche Aufbaustrukturen für die wichtigsten Funktionen zu entwickeln. Diese Skizzen waren die Basis für die späteren Wireframes, mit denen ich die Nutzerführung und das Zusammenspiel der App-Bereiche visualisiert habe.
Die digitalen Wireframes entstanden anschließend in Figma und basierten auf iterativen Verfeinerungen der ersten Skizzen. Sie halfen dabei, Nutzungswege und Inhaltsblöcke übersichtlich anzuordnen und Schwachstellen in der frühen Phase zu identifizieren, ohne vom visuellen Design abgelenkt zu werden. Durch gezielte Anpassungen nach ersten Tests wurden die Wireframes zur verlässlichen Basis für die anschließende Gestaltung und das Prototyping.
7. Low-Fidelity Wireflow
Im Rahmen meines Projekts habe ich zunächst einen Low-Fidelity Wireflow entwickelt, um die grundlegenden Nutzerwege und die Struktur der wichtigsten Screens festzulegen. Dieser Wireflow besteht aus einfachen Skizzen, in denen jede Ansicht der App als Block dargestellt ist. Die Blöcke sind durch Pfeile miteinander verbunden, die die Navigationswege illustrieren – etwa vom Startbildschirm zur Pflanzenübersicht, von dort zur Funktion „Neue Pflanze anlegen“ oder zur Community-Challenge.
Bei der Ausarbeitung habe ich bewusst auf visuelle Ausgestaltung und Details verzichtet, um mich ganz auf die logische Reihenfolge und die Platzierung zentraler Funktionen zu konzentrieren. Der Low-Fi Wireflow war eine schnelle, flexible Methode, um Feedback einzuholen und die spätere Informationsarchitektur abzusichern, bevor mit detaillierten Wireframes weitergearbeitet wurde.
8. Visual Design & Mockups
Die visuelle Gestaltung von VeggieVault ist geprägt von einer freundlichen, natürlichen Farbauswahl (z.B. Grüntöne, warme Akzente) und klaren, modernen UI-Komponenten. Der Styleguide definiert Farben, Schriftarten und Design-Grundregeln transparent und sorgt für ein harmonisches Nutzererlebnis auf allen Screens.
Zentral war es, die App intuitiv und motivierend zu gestalten: Große Interaktionsflächen, deutliche Icons und schnell erfassbare Informationsboxen helfen der Zielgruppe, ohne Umwege ihre Aufgaben zu erledigen. Motivierende Illustrationen und Gamification-Elemente, wie Fortschrittsbalken oder Ernte-Badges, erhöhen die Freude am eigenen Anbau.
Die Hauptscreens – etwa die übersichtliche Startseite mit Sparzielen, die detaillierte Pflanzenverwaltung mit Pflegehinweisen oder der lebendige Community-Bereich – wurden als High-Fidelity-Mockups in Figma ausgearbeitet. Dadurch konnte früh getestet werden, wie die App aussieht und sich anfühlt. Nach Feedbackrunden erfolgte eine gezielte Verfeinerung von Farben, Anordnung und Schriftbildern, bis ein ganzheitlich konsistenter Look entstand.
Mockups und Styleguide bilden so die visuelle Basis für Prototyping, Präsentation und eine mögliche spätere Entwicklung – und zeigen im Portfolio, wie durchdachtes Visual Design Usability, Markenwirkung und Nutzerbindung gleichermaßen fördern.
9. Klickbarer Prototyp & Animationen
Der finale klickbare Prototyp wurde anhand der ausgearbeiteten Mockups in Figma erstellt und simulierte zentrale App-Funktionen in einer interaktiven Präsentation. Sämtliche Navigationen, Infofenster und Fortschrittselemente konnten live erlebt und durch typische Nutzeraufgaben getestet werden.
Mit dem gezielten Einsatz von Animationen – etwa fließenden Screen-Übergängen, Feedback-Effekten bei Community-Challenges und sanft animierten Fortschrittsbalken – erhielt das Nutzererlebnis eine motivierende, dynamische Note. Die Animationen steigerten nicht nur die Orientierung innerhalb der App, sondern sorgten auch für eine ansprechende, professionell wirkende Präsentation im Portfolio.
Insgesamt machten Prototyp und Animationen das Konzept nicht nur verständlich und greifbar, sondern boten die Grundlage, um konkrete Verbesserungsvorschläge für Interaktionsabläufe und visuelle Details zu entwickeln und effizient umzusetzen.