Umwelt Fuchs

At a glance

"Umwelt Fuchs" was developed as a playful e-learning app that teaches children about a sustainable approach to the environment. Interactive learning methods such as short videos, child-friendly texts and mini-games are used to convey complex topics in an understandable way. A reward system with unlockable levels provides additional motivation for young users.

My role

User research & conception: development of personas, user journeys and gamification strategies
UI/UX design: Design of a child-friendly user interface with appealing illustrations
Prototyping: Creation of a low- and high-fidelity prototype

Technologies & methods
Benchmarking, gamification, UI/UX design, prototyping with Axure, screen design with Adobe XD

Result
"Umwelt Fuchs" combines playful learning with sustainable awareness. The app provides children with an intuitive and visually appealing experience that teaches knowledge about the environment in an interactive way. This project has further strengthened my passion for UI/UX design and prototyping.

Aim of the App

The aim of the “Umwelt Fuchs” e-learning app is to teach children how to treat our environment in a playful way.

Approach

As children often don't like to struggle through long texts and facts in educational sources are often presented in an unnecessarily complicated way for adults, the content in this app is mainly conveyed through short videos or child-friendly short texts. The newly acquired knowledge can be tested immediately afterwards in a mini-game.

The content of each category is divided into four to five levels so that the player is not overwhelmed by too much information at once and loses the fun of learning.
At the end of each category, a quiz that tests the previously acquired knowledge must be completed before the next category is unlocked.

Benchmarking

By analyzing the design of existing environmental apps, I initially identified important points of reference that the app should contain.

To make the app child-friendly, functions that are new to the user must always be well explained. The explanation should stand out so that it is not overlooked, for example by darkening the background.
The character guiding the user through the game should look friendly and likeable.
Identical elements should have a uniform color scheme and thus be easily recognizable.
Important elements should be accessible from the main page with a single click and should be able to describe themselves with a label or a generally known symbol.
Incomprehensible or unimportant information should be avoided in order to focus on the essentials.
Generally known icons should be placed in the position expected by the user.

Personas

In order to know the target group of my app during the development process, I created four personas before the design and prototyping. I developed three typical and one atypical persona.

User Journey

I created a scenario to understand which touchpoints and phases my persona Martin goes through before, during and after using "Umwelt Fuchs".
Martin and his wife often meet their daughter and her two children for a cup of tea in the afternoon. Martin often has intensive conversations with them about current topics that are of particular interest to his grandchildren and that he would not come into contact with without them. His granddaughter Mia talks about her last trip. On this trip, she and other volunteers collected the garbage that had washed up on the beach overnight every morning so that it could be properly recycled.
Martin would like to find out more about environmental protection himself so that he can have a better exchange with Mia at the next meeting.

Paper Prototyping

Using hand-drawn paper prototypes, I first visualized a rough concept for the app.

Low-Fidelity Prototype

After creating a mood board, I started working on a click dummy in Axure. Some wireframes are shown here.

Screendesign und High-Fidelity Protoyp

When opening the app for the first time, the user is given the choice of logging in or registering if they have not yet created an account.

When registering, the user is asked for their name. The fox will use this to address the user. Personal data such as the name can be changed under “Account”.

After registering, the player is greeted personally by the fox and has the option of taking a short tour of the app, during which the most important functions are explained to him/her.

This tour can be called up again at any time in the settings.

The user also has the option of changing the background color of the app to a lighter green via the settings.

One element that can be found throughout the game is the wooden board. It has been integrated in various shapes and sizes and the chosen font looks like chalk on wood. The icons are also modeled on the font.

Gameplay

The app's learning content is divided into categories. There are four to five playable levels and one quiz per category. Both can be played at any time.

A new category can only be played once the previous category's quiz has been solved 80% correctly.

This process is visualized by the fact that the path between the current and the following category is completed and the newly unlocked category becomes fully visible.

When a level is selected, the player first has the opportunity to acquire the necessary knowledge for the respective mini-game through a short video or a child-friendly text.

In level 1, various materials have to be assigned to the organic waste garbage can or the yellow garbage can.

The game can be paused or ended at any time using the button at the top right.

The quiz in the “Recycling” category consists of ten questions. As soon as an answer has been selected, the correct answer appears in green and the wrong answers in red. This allows players to learn from their mistakes during the quiz.

App Icon

Resume

This project was my first in the field of UI/UX design. By doing the entire development process myself, from the initial idea to the final prototype, I was able to shape every step of the design process.

Apart from the fact that I had a lot of fun designing this e-learning app, I discovered my passion for UI/UX design and prototyping during this project.

Furthermore, the topic of environmental protection is very close to my heart and I think it is important to teach children at a young age how to treat our environment properly.

Developing an app on this topic seemed like a logical conclusion.