1. Problemfindung

Zusammen suchten wir ein Problem, welches mit unserer App zu lösen gehen sollte. Von Scheinwerfern, welche Kunst an Dessaus grauen Hauswänden projizieren sollten, bis hin zu leuchtenden Markierungen, welche auftauchen, wenn man sein Google Maps Ziel erreicht hat, war alles dabei.

Letztendlich einigten wir uns beide jedoch darauf, dass wir teils keine Ahnung haben, wie unsere Pflanzen eigentlich zu pflegen sind. Denn andere Apps, welche wir für Gießbenachrichtigungen nutzen, halfen uns jedoch nicht bei der Standortauswahl für unsere Pflanzen. Problem gefunden!

Es musste also eine App existieren, welche die üblichen Dünger- und Gießbenachrichtigungen beinhaltet, aber den Fokus auf die individuellen Lichteinfälle im Zimmer legt. So sollte dann der perfekte Standort für die unterschiedlichsten Pflanzen analysiert werden.

2. Personas

Nachdem wir das Problem für die App gefunden haben, gestalteten wir Adressaten, welche unsere App potentiell benötigen könnten. Diese beschränkten sich dabei auf Menschen, welche ebenfalls wie wir keine wirkliche Ahnung haben, wie man Pflanzen richtig pflegt. Die Adressaten könnten dabei durch QR-Codes am Blumentopf selbst zur App weitergeleitet werden oder von Freunden und Familie von dieser erfahren.

3. Wireframes

Unser nächster Schritt bestand daraus unsere Idee zu visualisieren. Dazu haben wir uns entschlossen erst einmal getrennt voneinander Wireframes zu erstellen, um zu sehen, in welche Richtung unsere individuellen Vorstellungen gehen.

Dabei ist Folgendes als erster Schritt bei uns herausgekommen:

Karo: https://xd.adobe.com/view/ddd5d3c9-f8ed-441f-a94d-0f3c83569c3b-8886/grid

Maria: https://xd.adobe.com/view/a07824eb-0f52-40d6-aed6-810794ca01b5-f52b/grid

Dadurch, dass wir beide je ein Wireframe angelegt hatten, konnten wir beide miteinander vergleichen und diese perfekt ineinander ergänzen. 

https://xd.adobe.com/view/b792fff9-f122-44de-a93f-0222d2d3177b-e2c1/ 

Dabei haben wir auch über weitere zusätzliche Frames schon nachgedacht und wie unsere App auch mit den Animationen später funktionieren könnte.

4. Anpassungen

Nun war es unsere Aufgabe aus den ersten Schritten ein fertiges Endprodukt zu visualisieren und zu animieren. Dafür verwarfen wir unser bisheriges Farbkonzept und brachten neben neuen, intensiveren Grüntönen auch eine Akzentfarbe ins Spiel. Diese sollte ein angenehmes, jedoch auffallendes Orange sein. Währenddessen die Grüntöne das Leben und Gedeihen der Pflanzen widerspiegelt, stehen die Orangetöne für das Licht, welches diese benötigen. Dies schafft einen roten Faden, da sich unsere App auf den bestmöglichen Standort abhängig vom Lichteinfall konzentriert.

5. Plant Me

Nach langem Ausprobieren, Zeichnen und Animieren war unser App-Prototyp nun tatsächlich fertig gestellt. Im Folgenden könnt ihr euch verschriftlicht das App-Geschehen durchlesen, oder ihr scrollt ein wenig herunter und erlebt sie einfach selbst!

Zuerst wird der User begrüßt und direkt ins Tutorial eingeleitet. Dieses soll nur bei der Erstnutzung erscheinen und wird von einem kleinen App-Begleiter erklärt. Es wird ein eingerichtetes isometrisches Zimmer dargestellt, welches zeigen soll, wie das eigene Zimmer in der App aussehen könnte. Dieses löst beim Betrachtenden ein Wunschdenken aus, weshalb er bereit ist sein Zimmer einzuscannen, um es 1:1 in die App zu übertragen. Mit einer Scan-Animation wird das leere Zimmer mit dem Möblierten des Nutzers ersetzt.

Nun bekommt er die Möglichkeit einen Account zu erstellen, um sein Zimmer zu speichern. So muss er bei einem Gerätewechsel oder Ähnlichem den Scan nicht erneut durchführen. Zuletzt wird der User vom App-Begleiter darauf hingewiesen, dass es nur noch einen Schritt zu erledigen gibt, bevor das Tutorial vorbei ist. Die Benachrichtigungs- und Standortabfrage. Am Ende sieht der Nutzer den typischen Homescreen der App, wobei animiert gezeigt wird, wo und wann die Sonne in dessen Zimmer strahlt. Aufgrund dessen tauchen Pflanzen auf, welche sich potentiell an bestimmten Stellen im Raum wohl fühlen könnten. Für die Zukunft könnte man so auch über In-App-Käufe nachdenken. Auf diesem Screen erscheinen später auch Gieß- und Düngererinnerungen in Form eines Kalenders. Somit ist das Tutorial abgeschlossen und der User kann weitere Zimmer oder Pflanzen, welche er schon besitzt, einscannen.

Unter folgenden Links könnt ihr euch das Video zu Plant Me, sowie die App selbst anschauen.

App: https://xd.adobe.com/view/48ba7e3c-02d3-416b-86e7-8e1f48b0b954-1de9/ 

Video: https://www.dropbox.com/s/gxso0v4p4zcjgfd/Plant%20Me.mp4?dl=0

6. Fazit

Das Arbeiten mit Adobe Xd hat enorm viel Spaß gemacht und ich konnte dieses Semester echt viel über dieses Programm lernen. Am meisten gefiel mir der Feinschliff der App, sowie das Animieren selbst. Mithilfe von konstruktivem Feedback von Hermann und natürlich mit der tollen Zusammenarbeit mit Karo war es möglich ein echt tolles Endprodukt fertig zu stellen. Die harte Arbeit hat sich ausgezahlt!

Ich bin total fasziniert davon, was wir in diesem Projekt erreicht haben. Das Arbeiten mit XD hat sehr Spaß gemacht. Vor allem als es ums Layout ging war ich hochmotiviert die Illustrationen und Details auszuarbeiten. Die Zusammenarbeit mit Maria war fantastisch, da wir uns beide super gegenseitig ergänzt haben.