In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
DAAPP // My Urban Jungle
THEMA: Home Urban Gardening – eigener kleiner Gartenanbau daheim. Eine persönliche App, die es einem ermöglicht einer eigenen kleinen ökologischen Landwirtschaft mithilfe von 3D-Visualisierung und Animation nachzugehen und viele Informationen über das Thema Urban Gardening zu erfahren.
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.
©Selina Streng
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://www.mein-schoener-garten.de
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
Fotos / Icons
©Selina Streng
Hier der Link zur Playlist der verschiedenen Clickdummys der Userjourney:
©Selina Streng
Im Folgenden ist mein Tagebuch zur Umsetzung des Projekts zu sehen/lesen:
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.
©Selina Streng
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.
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
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
©Selina Streng
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)
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
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
©Selina Streng
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
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
Bei Beetsimulation weitere UI-Varianten erstellt: noch zwei weitere Varianten (siehe folgende Fotos)
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
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
Ein Projekt von
Selina Streng
Fachgruppe
MediendesignArt des Projekts
Studienarbeit im zweiten Studienabschnitt
Zugehöriger Workspace
Interaction / Information DesignEntstehungszeitraum
Sommersemester 2020