top of page

Umwelt Fuchs

Umwelt-Fuchs-Header

Ziel der App

Das Ziel der E-Learning-App „Umwelt Fuchs“ ist es, Kindern auf spielerische Art und Weise den richtigen Umgang mit unserer Umwelt beizubringen.

Herangehensweise

Da Kinder sich oft ungern durch lange Texte kämpfen und Sachverhalte in Quellen für Erwachsene häufig unnötig kompliziert dargestellt werden, werden die Inhalte in dieser App hauptsächlich durch kurze Videos oder kindgerecht aufbereitete kurze Texte vermittelt. Das neu gewonnene Wissen kann direkt danach in einem Minispiel getestet werden.

Die Inhalte jeder Kategorie werden jeweils in etwa vier bis fünf Level eingeteilt, damit der/die SpielerIn nicht durch zu viel Information auf einmal überfordert wird und den Spaß am Lernen verliert.
Am Ende jeder Kategorie muss zunächst ein Quiz, das das zuvor erlernte Wissen abfragt, absolviert werden, bevor die nächste Kategorie freigeschaltet wird.

Benchmarking

Durch die Analyse des Designs bereits existierender Umwelt-Apps hielt ich zunächst wichtige Anhaltspunkte fest, die meine App beinhalten sollte.

  1. Um meine App kinderfreundlich zu gestalten, müssen Funktionen, die für den/die BenutzerIn neu sind, immer gut erklärt sein. Die Erklärung sollte herausstechen, damit sie nicht übersehen wird, zum Beispiel durch Abdunkeln des Hintergrunds.

  2. Die Figur, die durch das Spiel führt sollte freundlich und liebenswert aussehen.

  3. Gleiche Elemente sollten in ihrer Farbgestaltung einheitlich und somit schnell wiedererkennbar sein.

  4. Wichtige Elemente sollten von der Hauptseite aus durch einen Klick erreichbar sein und sich durch Beschriftung oder ein allgemein bekanntes Symbol selbst beschreiben können.

  5. Auf unverständliche oder unwichtige Informationen sollte verzichtet werden, um den Fokus auf das Wesentliche zu lenken.

  6. Allgemein bekannte Icons sollten an der vom Benutzer erwarteten Stelle angebracht werden.

Personas

Um während des Entwicklungsprozesses die Zielgruppe meiner App zu kennen, entwarf ich vor dem Design und Prototyping vier Personas. Hierbei entwickelte ich drei typische und eine atypische Persona.

Umwelt-Fuchs-Persona-1
Umwelt-Fuchs-Persona-2
Umwelt-Fuchs-Persona-3
Umwelt-Fuchs-Persona-4

User Journey

Um zu verstehen, welche Berührungspunkte und Phasen meine Persona Martin vor, während und nach der Benutzung von Umwelt Fuchs durchläuft, erstellte ich ein Szenario.

Martin und seine Frau treffen sich häufig nachmittags zu Kaffee und Kuchen mit ihrer Tochter und deren beiden Kindern. Mit diesen führt Martin oft intensive Gespräche über aktuelle Themen, die seine Enkel besonders beschäftigen und mit denen er ohne sie nicht in Kontakt kommen würde. Seine Enkelin Mia erzählt von ihrer letzten Reise. Bei dieser hat sie gemeinsam mit anderen ehrenamtlichen HelferInnen jeden morgen den über Nacht angeschwemmten Müll am Strand aufgesammelt, damit dieser ordnungsgemäß recycelt werden kann.

Um sich beim nächsten Treffen besser mit Mia austauschen zu können, möchte Martin sich selbst mehr über Umweltschutz informieren.

Umwelt-Fuchs-User-Journey

Papier Prototyping

Mithilfe von handgezeichneten Papierprototypen visualisierte ich zunächst ein grobes Konzept für die App.

Umwelt-Fuchs-Papier-Prototyp

Low-Fidelity Prototyp

Nachdem ich ein Moodboard erstellt hatte, begann ich mit der Ausarbeitung eines Clickdummys in Axure. Einige Wireframes sind hier abgebildet.

Umwelt-Fuchs-LoFi-Wireframe-1
Umwelt-Fuchs-LoFi-Wireframe-2
Umwelt-Fuchs-LoFi-Wireframe-3
Umwelt-Fuchs-LoFi-Wireframe-4
Umwelt-Fuchs-LoFi-Wireframe-5
Umwelt-Fuchs-LoFi-Wireframe-6
Umwelt-Fuchs-LoFi-Wireframe-7
Umwelt-Fuchs-LoFi-Wireframe-8
Umwelt-Fuchs-LoFi-Wireframe-9
Umwelt-Fuchs-LoFi-Wireframe-10

Screendesign und High-Fidelity Protoyp

Umwelt-Fuchs-Screendesign-Farben
Umwelt-Fuchs-Screendesign-Typo
Umwelt-Fuchs-HiFi-Prototyp-1
Umwelt-Fuchs-HiFi-Prototyp-2
Umwelt-Fuchs-HiFi-Prototyp-3

Beim ersten Öffnen der App bekommt der User die Wahl sich anzumelden oder zu registrieren, sofern er noch kein Konto erstellt hat.

Bei der Registrierung wird der User nach seinem Namen gefragt. Mit diesem wird er vom Schlaufuchs angesprochen. Persönliche Daten wie der Name können unter „Konto“ geändert werden.

Umwelt-Fuchs-HiFi-Prototyp-4
Umwelt-Fuchs-HiFi-Prototyp-5

Nach der Registrierung wird der/die SpielerIn persönlich vom Fuchs begrüßt und hat die Option, einen kurzen Rundgang durch die App zu machen, bei dem ihm/ihr die wichtigsten Funktionen erklärt werden.

Dieser Rundgang ist jederzeit in den Einstellungen erneut abrufbar.

Umwelt-Fuchs-HiFi-Prototyp-6
Umwelt-Fuchs-HiFi-Prototyp-7

Ebenfalls über die Einstellungen hat der/die BenutzerIn die Möglichkeit, die Hintergrundfarbe der App in ein helleres Grün zu ändern.

Ein Element, das im gesamten Spiel zu finden ist, ist das Holzbrett. Es wurde in verschiedenen Formen und Größen eingebunden und die gewählte Schriftart wirkt wie Kreide auf Holz. Auch die Icons sind der Schriftart nachempfunden.

Spielprinzip

Die Lerninhalte der App sind in Kategorien eingeteilt. Pro Kategorie gibt es vier bis fünf spielbare Level und ein Quiz. Beide sind jederzeit spielbar.

Eine neue Kategorie ist erst spielbar, wenn das Quiz der Vorherigen zu 80% richtig gelöst wurde.

Visualisiert wird dieser Vorgang dadurch, dass sich der Weg zwischen der aktuellen und der folgenden Rubrik vervollständigt und die neu freigeschaltete Rubrik vollständig sichtbar wird.

Umwelt-Fuchs-HiFi-Prototyp-8
Umwelt-Fuchs-HiFi-Prototyp-9

Wird ein Level ausgewählt, hat der/die SpielerIn zunächst die Möglichkeit sich das notwendige Wissen für das jeweilige Minispiel durch ein kurzes Video oder einen kindgerechten Text anzueignen.

In Level 1 müssen verschiedene Materialien der Bio-Tonne oder der Gelben Tonne zugeordnet werden.

Pausiert oder beendet werden kann das Spiel jederzeit über den Button oben rechts.

 

Umwelt-Fuchs-HiFi-Prototyp-10

Das Quiz der Kategorie „Recycling“ besteht aus zehn Fragen. Sobald eine Antwort ausgewählt wurde, erscheint die richtige Antwort grün und die falschen Antworten rot. So kann der/die SpielerIn noch während des Quiz' aus seinen/ihren Fehlern lernen.

App Icon

Umwelt-Fuchs-App-Icon

Resümee

Dieses Projekt war mein erstes aus dem Bereich UI/UX-Design. Dadurch, dass ich von der ersten Idee bis zum finalen Prototyp, den gesamten Entwicklungsprozess selbst durchführte, konnte ich jeden Schritt dieses Design Prozesses beeinflussen.

Abgesehen davon, dass es mir unglaublich viel Spaß machte, diese E-Learning-App zu entwerfen, entdeckte ich bei diesem Projekt meine Leidenschaft für UI/UX-Design und Prototyping.

Des Weiteren liegt mir das Thema Umweltschutz persönlich sehr am Herzen und ich halte es für wichtig, Kindern bereits in jungen Jahren den richtigen Umgang mit unserer Umwelt beizubringen.
Eine App zu diesem Thema zu entwickeln, schien eine logische Schlussfolgerung.

bottom of page