Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

DAAPP // My Urban Jungle

THEMA: Home Urban Gardening – eigener kleiner Gartenanbau daheim. Eine persönliche App, die es einem ermöglicht einer eigenen kleinen öko­logischen Landwirtschaft mithilfe von 3D-Visualisierung und Animation nachzugehen und viele Informationen über das Thema Urban Gardening zu erfahren.

1.0 Abstract

Eine App für mobile Geräte, die einem bei dem Anbau eines eigenen kleinen urbanen Gartens daheim unterstützt. Sie ist für User gedacht, die weder Platz, Geld noch Erfahrung im Ernten haben und gern auf dem Balkon, im Zimmer oder Terrasse einen eigenen kleinen ökologischen Anbau erstellen wollen. Die App unterstützt einen beim Anbau, Pflege, Ernte und gibt genaue Informationen über das Thema Urban Gardening wieder.

2.0 Filmische Dokumentation

3.0 Recherche / -ergebnisse

Recherche.pngRecherche.png

Bei meiner Recherche ging es zunächst um die Definition von Urban Gardening, die Geschichte dazu und die aktuelle Lage. Dann habe ich mich über die schon vorhandenen Garden-Apps informiert und gemerkt, dass genau meine Intention einer Gardening-App noch nicht genau getroffen wurde / existiert. Es gibt keine App, die den User dabei unterstützt einen eigenen urbanen Garten daheim anzubauen mit Hilfe bei Anbau, Rat bei der Anpflanzung und Lerneinheiten zur Pflege und Pflanzenkunde. Somit habe ich mich erst einmal eingelernt in die Pflanzenkunde (Gemüse, Obst, Kräuter) und mich über Anbau, Bedingungen, FunFacts informiert. Außerdem habe ich viel über die verfügbaren Prototyping-Tools recherchiert und nach Umsetzungsmöglichkeiten gesucht. Auch habe ich mich über verschiedene 3D-Programme, 3D-Scan-Programme und AR-Anwendungen informiert, um solche bei der Beetplanung mit einzubeziehen.

Meine Quellen waren: 

Websites:

https://app.alphabeet.org

https://www.mein-schoener-garten.de

https://www.meine-ernte.de

https://www.plantura.garden

Bücher / Magazine:

Buch: „Mein Stadtbalkon“ - Melanie Öhlenbach

Magazin: „Anbauen & Genießen“ Ausgabe 01/2020

Urban Gardening

https://www.mein-schoener-garten.de/urban-gardening

Geschichte

https://www.gartenbau.org/magazin/urban-gardening-201816443

Rezepte

https://www.chefkoch.de

Fotos / Icons

https://unsplash.com

https://www.flaticon.com

4.0 UX / Userjourney

Hier der Link zur Playlist der verschiedenen Clickdummys der Userjourney:

5.0 Skizzen / Entwürfe

Erste Entwürfe.pngErste Entwürfe.png
Erste Entwürfe 1.0.pngErste Entwürfe 1.0.png
Moodboard.pngMoodboard.png

6.0 Studien / Prototypen

Weitere Skizzen:Entwürfe.pngWeitere Skizzen:Entwürfe.png
Tools:Experimente.pngTools:Experimente.png

7.0 Umsetzung

Im Folgenden ist mein Tagebuch zur Umsetzung des Projekts zu sehen/lesen:

_________________________________

Pitchdeck

Mein Pitchdeck zu meinem Projekt „My Urban Jungle“

Pitch Deck-MyUrbanJungle.pdf PDF Pitch Deck-MyUrbanJungle.pdf

Recherche

In meiner Recherche ging es zunächst um die Definition von Urban Gardening, die Geschichte dazu und die aktuelle Lage. Dann habe ich mich über die schon vorhandenen Garden-Apps informiert und gemerkt, dass genau meine Intention einer Gardening-App noch nicht genau getroffen wurde / existiert. Es gibt keine App, die den User dabei unterstützt einen eigenen urbanen Garten daheim anzubauen mit Hilfe bei Anbau, Rat bei der Anpflanzung und Lerneinheiten zur Pflege und Pflanzenkunde. Somit habe ich mich erst einmal eingelernt in die Pflanzenkunde (Gemüse, Obst, Kräuter) und mich über Anbau, Bedingungen, FunFacts informiert. Außerdem habe ich viel über die verfügbaren Prototyping-Tools recherchiert und nach Umsetzungsmöglichkeiten gesucht. Auch habe ich mich über verschiedene 3D-Programmierungen, 3D-Scan-Programme und AR-Anwendungen informiert, um solche bei der Beetplanung mit einzubeziehen.

Recherche.pngRecherche.png

Konzepte

Nach meiner intensiven Recherche über Urban Gardening, erstelle ich zunächst Wireframes für eine App, mit allen entsprechenden und bereits erwähnten Funktionen und individuellen Design mit passendem Layout und Farbgebung. Wenn die Zeit noch bleibt (und meine Fähigkeiten es erlauben) wird es noch zu einer funktionstüchtigen App.

Medien wären hier beispielsweise Sketch oder Adobe XD für den 3D-Scan ein integriertes Programm, wie Adobe Aero.

PROTOTYPING:

In Sketch habe ich schon an meinem Prototypen angefangen und die App soweit schon entwickelt, damit Layout und Farbe steht. Zunächst hatte ich noch eine eher weiche Farbgebung, dann habe noch einige Änderungen vorgenommen. Nun ist die Farbe noch „knalliger“ und noch einige Funktionen sind hinzugekommen.

WEITERE PROJEKTBEARBEITUNG:

Die letzte Woche habe ich meinen Prototypen weiter entwickelt mit neuem Layout, Formen und vor allem neue Features eingebaut: Das Garden-Sharing. Meine Idee war es ja, sich mit anderen Usern austauschen zu können, Freunde zu werden, Nachrichten zu schreiben und das Beste: mit der Plant-Challenge sich herauszufordern.

Außerdem habe ich verschiedene Tools noch einmal getestet, um zu entscheiden, welche AR-Anwendung für mein 3D-Beet-Scan wohl am besten geeignet wäre. Hierbei habe ich auch „TORCH“ zum ersten mal getestet und gesehen, dass es ähnlich wie Adobe-Aero funktioniert und sehr gut geeignet wäre. Was bei TORCH besser funktioniert ist das Importieren eigener 3D-Objekte. Somit könnte ich also meine Pflanzen selber 3D-visualisieren, aber auch schon vorhandene Poly-Objekte verwenden. Was auch besser funktioniert ist das Erkennen des vorhandenen Platzes, die Points sind genauer und man kann genauer festlegen, wo die Pflanze platziert werden soll.

Storyboard 2.pngStoryboard 2.png
Storyboard 3.pngStoryboard 3.png
Storyboard 1.pngStoryboard 1.png

Bearbeitung (19.05.-25.05.2020)

Durch die letzte Besprechung habe ich noch mehr Input bekommen:

- Elemente rausnehmen, dafür Fokus mehr auf das Wesentliche

- Log-In so lassen wie er ist

- Fokus mehr auf die Simulation des Pflanzenbeets

FOKUS auf FEATURES:

- Simulation der Beetplanung

- Lernprozess (Welche Pflanzen würde zusammenpassen?)

- Bei der Anmeldung: Vorlieben des Nutzers erfragen

- Planungstool (3D-Scan, Raster, Abstände)

SIMULATION DES PFLANZENBEETS:

- Maße vom Beet durch die AR-App von Apple (Measure)

- Rastersystem, um festzustellen, wie viel Platz für welche Pflanze bleibt

Meine Änderungen in der Woche (19.05.-25.05.2020):

- zunächst meinen gesamten Prototypen in Figma neu angelegt für iPhone 11 Pro

- unnötige Features rausgenommen (Anmeldefragen: Kenntnislevel, Was man gerne anbauen würde) —> grenzen den User schon am Anfang unnötig ein, ist für weiteren Vorgang eher sinnlos, weil man den unerfahrenen User ja in das Thema einführen möchte

- Metermaß-App von Apple experimentiert und in App integriert --> Frames für Mess-Simulation erstellt

Beetmessung02.jpgBeetmessung02.jpg
Beetmessung03.jpgBeetmessung03.jpg
Beetmessung01.jpgBeetmessung01.jpg

Bearbeitung (26.05.-01.06.2020)

  • Design etwas abgeändert: progress bar, buttons

  • Neue Funktion: Login

  • SIMULATION der Pflanzen erstellt —> Animieren der Pflanzen in das Beet, Ändern, Tauschen, neu anlegen

  • Rastersystem eingebaut: Abstände der Pflanzen aufzeigen, Änderungen vornehmen können

  • Neue Anbaumethode hinzugefügt —> eigene Anbauerklärungen (DIY) eingefügt

  • Neue Auswahlmethode: schon vorhandenes Beet, Beet anbauen, Beet kaufen

  • Neues Feature: Beet teilen können

Beetsimulation.pngBeetsimulation.png
Anbau-Tutorials.pngAnbau-Tutorials.png

Neue-Features.pngNeue-Features.png

Bearbeitung (02.06.-08.06.2020)

Bei Anmeldung 

Zweiter Zugangsweg zum Beet erstellt: User gibt bei Anmeldung an, welche Pflanzen er ansäen möchte

Bei Beetsimulation:

  • EINEN Screen zum Tauschen, Durchmischen der Pflanzen erstellt

  • User hat hier die Möglichkeit in seinem Beet die entsprechende Fläche anzuwählen, Pflanzen auszutauschen, oder zu ändern

  • Man kann sich durch alle Pflanzen durchwählen —> hat die Möglichkeit alle Pflanzen im Beet zu platzieren und zu animieren

  • Klickt man auf das entsprechende Pflanzensymbol erscheint die Information über Wuchshöhe/-Breite und kann somit einsehen, warum die Pflanze in das Beet passt

Bei Beetmessung: 

genaue Angabe für User, wie er die Kamera zu halten hat —> damit Beetsimulation später möglich ist

Bei Beetprofil: 

Pflanzen-Icon (ursprünglich für Garden-Sharing) rechts unten getauscht durch: genauere Informationen über die eigenen Pflanzen im Beet des Users. Man erhält dort alle nötigen Facts über die Pflanzen (Anbau, Saat, Pflege, Ernte, FunFacts)

Pflanzendaten.pngPflanzendaten.png
Pflanzeninfos.pngPflanzeninfos.png
Time-Drop-Down.pngTime-Drop-Down.png

Bearbeitung (09.06.-15.06.2020)

Bei Pflanzenwahl in der Beetanimation: Swipe mehr erkennbar gemacht, User weiß nun besser, dass er durch mehrere Pflanzen swipen kann

Dritte Prototyp-Variante (Worst-Case-Szenario): Ein unerfahrener User, der schlechte Licht- und Sichtverhältnisse von seinem Palettenbeet hat, Kräuterpflanzen und wenig Platzmöglichkeiten:

  • neuen User angelegt: Peter Silie

  • automatische Bildbearbeitung bei der Bildaufnahme eingebaut

  • User kann jedes einzelnen Pflanzenplatz ausmessen lassen

neuer Screen bei Beeterstellung: loading spinner während Beet gerade für User erstellt wird

Bei Palettenbeetherstellung: letzten zwei Schritte noch einmal bearbeitet —> genauere Fotografiedarstellung zur Schritterklärung

 —> letzter Schritt hinzugefügt: Beetbeschriftung

automatische bildbearbeitung.pngautomatische bildbearbeitung.png
individuelle pflanzenplatzierung.pngindividuelle pflanzenplatzierung.png
worst-case-szenario.pngworst-case-szenario.png

Bearbeitung (16.06.-22.06.2020)

Menü überarbeitet in 4 Auswahlpunkte: Pflege, Ernte, Rezepte, Geschichte 

  • PFLEGE: Was für Bedingungen die Pflanze benötigt; wie man sie am besten in Stand hält und richtig pflegt

  • ERNTE: Wann und wie sie geerntet werden kann; Tipps und Ratschläge

  • REZEPTE: Wozu man Pflanze verwenden kann; welche Gerichte man damit zubereiten kann

  • GESCHICHTE: Geschichte zu Urban Gardening in Kuba, New York, Deutschland und heute

Bei Pflanzendaten: Gute Nachbarn der bisherigen Pflanzen hinzugefügt

Bei Variante 2 (bereits registrierte Userin): Beetbild-Aktualisierung hinzugefügt --> nach 5 Wochen soll der User das Beetbild erneuern, um den Pflanzenwachstum festzuhalten

Rezepte.pngRezepte.png
Menü.pngMenü.png

Beetbild erneuern.pngBeetbild erneuern.png

Bearbeitung (23.06.-29.06.2020)

Bei Pflanzenauswahl: Swipe links UND rechts hinzugefügt (um Symmetrie beizubehalten)

Bei Beetergebnis:

  • Erklärung geändert

  • kurzer Screen: Beetbereiche leuchten kurz auf --> damit User weiß wo und wann er klicken soll/kann

Checkliste: Was ist noch bis wann zu tun? Präsentationsdaten, Dokumentationsdaten zusammengestellt

Varianten: einheitliches Layout erstellt, gleiches Design

Layout: iPhone-Leiste bei jedem Screen hinzugefügt

Fotos: Repräsentative Fotos erstellt —> auf Balkon mit App

Dokumentations-Film: Szenen überlegt, User festgelegt, Storyboard erstellt

Checkliste.pngCheckliste.png
repräsentative Fotos.pngrepräsentative Fotos.png
Beetbeleuchtung und Swipe.pngBeetbeleuchtung und Swipe.png

Bearbeitung (30.06.-06.07.2020)

FILMDOKUMENTATION - Konzept

IDEE: User zeigen, der die App im Userflow durchgeht —> App als Off-Stimme währenddessen erklären / durchgehen

ABLAUF:

USER: Peter Silie

  • Möchte Beet anbauen, überlegt sich wie

  • Holt das Handy raus —> öffnet die App und meldet sich an

  • Baut Beet alleine zusammen, anhand der Erklärung der App

  • Steht vor fertigem Beet —> macht Foto (!!!REAL mit MESSAPP von APPLE!!!)

  • Passt seine Wunschkräuter in der App an

  • Erntet Beet am Ende

Off-Stimme Text:

Das ist Peter Silie. Er ist Student und hat nicht viel Wohnplatz, nicht viel Geld und erst recht keinen grünen Daumen

Dennoch ist ihm gesunde regionale Ernährung wichtig und hat den Wunsch auch selbst anzubauen. Doch nur wie?

Dieses Problem haben viele, deswegen habe ich mich gleich über die Recherche gemacht, viel informiert, experimentiert und entwickelt. Rauskam eine individuelle App: My Urban Jungle - Home Urban Gardening für jedermann!

Peter kann somit jetzt ganz einfach anmelden, seine Vorlieben auswählen, sich sein eigenes Beet zusammenbauen, es scannen und sich somit die perfekten Pflanzenzusammenstellung generieren lassen. Passt es ihm nicht ganz, kann er die Pflanzen auch selbst noch konfigurieren. So funktioniert es mit jedem beliebigen Beet.

Infos über alle nötigen Pflanzendaten gibt es natürlich auch und das beste kommt immer zum Schluss: Die Ernte.

My Urban Jungle - jeder kann ernten.

INHALT:

  • Userflow anhand realen User

  • Recherche / Skizzen / Aufzeichnungen / Experimente zeigen

  • Prototypen zeigen

  • Problemstellung erklären —> Lösung aufzeigen

NOTIZEN:

  • motivierende / Upbeat-Hintergrund-Musik

  • Ernte am Ende zeigen

  • User bekommt Werkzeug in die Hand gedrückt

Bearbeitung (07.07.-13.07.2020)

Bei Beetsimulation weitere UI-Varianten erstellt: noch zwei weitere Varianten (siehe folgende Fotos)

  1. 3D-Touch-Button (Peek and Pop) iPhone: User bleibt auf Pflanze länger gedrückt —> geeignete Pflanzen umrunden den Finger und User kann auf entsprechend gewollte Pflanze klicken —> Pflanze wird automatisch platziert

  2. Pull-Down-Menü-Button iPhone: User klickt auf entsprechendes Beet, Pull-Down-Menü wird angezeigt

—> Begründung ****für welche Variante ich mich letztendlich entschieden habe: Für Variante 1 mit der Auswahl am unteren Bildschirm. Vergleicht man alle Varianten, dann zeigt die User-Journey, dass die erste Variante, bei der der User auf das entsprechende Beet klickt und unten ihm die ebenso passenden Pflanzen angezeigt werden, am verständlichsten. Diese Variante ist für den User übersichtlicher und er hat somit auch den Überblick über den Namen der Pflanzen, was bei Variante 2 beispielsweise nicht der Fall wäre. Der Nachteil bei Variante 3 ist die Unübersichtlichkeit des Menüs der Pflanzen.

Deswegen wähle ich für den Ergebnis-Prototypen die 1. Variante, weil sie für User am verständlichsten und ab überschaubarsten ist und genau das ja auch das Ziel meiner leicht anzuwendenden App sein soll.

Film erstellt: User „Peter Silie“ geht im Userflow die App durch, wichtigste Funktionen werden gezeigt (Problemstellung, Beeterstellung, Beet-Scan, Beetanimation, Ernte und Pflegehinweise)

Wortbeschreibung für Projekt entwickelt: Selbstversorger, Schule, DIY

Präsentation vorbereitet: 

- Repräsentative Bilder hochgeladen

- die letzten Änderungen hinzugefügt

- Link zum Film hinzugefügt

- Projektprozess nochmal durchgegangen, um mögliche Fragen beantworten zu können

- Clickdummys für jede Variante erstellt

- YouTube-Uploads der repräsentativen Videos

Peek and Pop-Variante.pngPeek and Pop-Variante.png
Pull-Down-Menü-Variante.pngPull-Down-Menü-Variante.png
Varianten_Beetsimulation.pngVarianten_Beetsimulation.png

Repräsentative Bilder

Repro_Beet.pngRepro_Beet.png
Repro_App.pngRepro_App.png
Repro_Kräuterbeet.pngRepro_Kräuterbeet.png
Repräsentatives Bild.pngRepräsentatives Bild.png
Repro-Wand.pngRepro-Wand.png
Repro_Tomateninfos.pngRepro_Tomateninfos.png
Key-Visual_Selina-Streng.jpgKey-Visual_Selina-Streng.jpg
Repro_Startscreen.pngRepro_Startscreen.png

Ein Projekt von

Fachgruppe

Mediendesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Zugehöriger Workspace

Interaction / Information Design

Entstehungszeitraum

Sommersemester 2020