App Ins Grüne

a Learning Application

About

An educational application designed to bring children (and adults) closer to tree species native to Germany :)
There are a number of mini games for ten different tree species, which often also involve interacting with nature, such as photographing the leaves of the trees. These photos are then collected in the corresponding tree profile and can be viewed again at any time. Apart from that, the profiles contain much more information about each tree such as interesting facts about their leaves and fruits and a calendar view with the respective flowering time of the tree.
From time to time, the app’s mascot, a squirrel, appears in various parts of the app and accompanies the player while exploring the trees :)

User profile

Previous image

Next image

Project Details

Period
Team Size
Platform
IDE
Languages
Database
Mockup Tool
App Language

04/2019 – 05/2021
30 (varied over time)
Android
Android Studio
Java, XML
Room
Adobe XD
German

Client
App Publisher

Target group

Thomas Gerl (BISA – Biodiversität im Schulalltag)
Prof. Birgit J. Neuhaus (Didactics of Biology),
Prof. Dr. Heinrich Hussmann (Institute of Informatics)

Mainly pupils between 8 and 12 years old, but of course everyone who is interested in trees :)

GitHub Repo: https://github.com/mimuc/app-ins-gruene
Google Play Store: https://play.google.com/store/apps/details?id=de.lmu.treeapp&gl=DE

Project Description

‚App Ins Grüne‘ was created by computer science and art students in various courses at the LMU Munich. However, it is not an official product of the LMU. The app was developed in cooperation with BISA (Biodiversität im Schulalltag) and the Institute for Biology Education of the LMU.

The app was released on the Google Play Store and on GitHub as open-source software under the MIT License.

-> I’m happy to say that I was involved in the project from start to finish and had the opportunity to gain experience in different areas of the app development process (such as game design, programming, project coordination) – more about the app development below! :)

Features

10 different tree species
4 game categories for every tree
16 different mini games in total
Different game modes
Games that require interaction with nature
Profiles for each tree
A custom collection in each tree profile
A user profile

Maple, beech, linden, pine, oak, hazel, birch, rowan, fir, spruce
General, leaf, fruit, bark
Between 4-9 games can be played in each category
Single player and multiplayer games, some games with different levels of difficulty available
For example, taking photos and finding tree fruits/leaves
Provide information in an interactive way
Photos and other creative contributions from the games are saved for later viewing
The own favorite tree and that of friends can be entered

Minigames

(an Excerpt)

Quiz

For each tree there is a quiz about its leaves, one about its fruits and one about the wood. The answers sometimes consist of text snippets and sometimes of illustrations and can be selected by a click. After 2 incorrectly selected answers, the player is shown the correct answer in a popup and has to start the game again from the beginning.

Previous image

Next image

Superkraft

(engl. superpower)

A special form of the quiz is the superpower. Each tree has one and must be guessed right :)

Baumory

In this game, cards have to be revealed and pairs found. After each move, however, the cards are turned over again, so that one has to remember which picture was on it. In multi-player mode, two players can compete against each other and take turns playing.

Previous image

Next image

Puzzles

There are different types of puzzles: a sliding puzzle with photos of the trees and a normal puzzle with illustrations. The aim is to complete the pictures using drag & drop.

Previous image

Next image

Schnapp sie dir!

(engl. catch them!)

Leaves, fruits and other tree elements fall down from top to bottom. Depending on the category, elements of a certain tree must be snapped by quickly clicking on them before they disappear. A timer expires, but time can also be regained by clicking on hearts.

Naturfühlen

(engl. feeling nature)

This is where nature comes into play: the bark of the tree has to be touched with the hands. From a word cloud filled with adjectives appropriate words can be selected. There is no right and wrong, the own perception counts! However, not all adjectives can be selected, such as colors, because these cannot be felt with the hands. In addition, you can also type in your own words (text filter integrated). Your own selection then ends up in the respective tree profile as a reminder of how the bark felt.

Previous image

Next image

Foto Challenge

Depending on the game category, photos of leaves, fruit, bark or the whole tree must be taken in the photo challenge. These photos are stored in a custom collection of each tree profile and can be viewed there at any time.

Birch profile: photo collection

Enlarged view of the captured photo

Previous image

Next image

Tree Profile

Maple

For each tree there is a profile with interesting information about it. Sometimes, small magnifying glasses can be found that can be clicked to reveal information. At the end of each profile there is also a YouTube video from the BISA project’s Anna’s Trees series. Here Anna and Thomas explore different tree species together.

Fun Fact about the maple

Annual cycle: leaves

Annual cycle: blossoms and fruits

YouTube video of BISA

Previous image

Next image

Development

Practical course ‚Design Workshop II‘ (04/2019 – 07/2019)

A workshop on app design

Our client Thomas had the idea of developing a learning app from partially existing digital learning materials about tree species. This is how a practical course was created at the LMU, in which 14 art and computer science students developed a prototype of the app.

Who is Thomas?

Biology and chemistry teacher
Member of the Chair of Didactics of Biology at the LMU
Project manager for the BISA project

What is BISA (Biodiversität im Schulalltag)?

The main concern of the BISA project is to convey species knowledge. They develop classic teaching materials as well as digital learning environments that are designed to be both educational and entertaining for pupils.

What we did:

A lot of brainstorming together to collect our ideas
An interview with primary school pupils who showed us how they use their smartphones, what apps they like and why, and whether or not they have access to the internet with their smartphones
Coming up with game concepts that both impart knowledge and are fun
Specifying the app design (font, colors, logo, etc.) as well as the app name
Creating illustrations of the trees and other app components
Development of the basic app structure in Android studio

Clickable Prototype (Adobe XD)

Previous image

Next image

My contribution

Assisted in the conception of the mini games and in the production of a game catalogue
Drawing sketches of the mini games
Helped with the screen design of the app and the creation of a clickable prototype using Adobe XD
Text formulations for the mini games

Student assistant (10/2019 – 12/2019)

Further development by three students of the Design Workshop II

After the summer semester, I decided, together with two fellow students, to further develop ‚App ins Grüne‘. Personally, I wanted to achieve more than just a prototype as we have already collected so many ideas and made actual preparations for the development of a ‚real‘ app. In addition, I wanted to learn more about app programming. Unfortunately, I didn’t get into programming at first because we adhered to a strict division of tasks: 1 programmer, 1 designer, 1 game designer. We met with Thomas regularly and discussed the further development of the app together.

What our programmer did

One of us developed the backend of the app: expanding the basic code framework (e.g. ID management of tree species and mini games, creating base XML files for the layout of individual components, etc.) so that it would be easier for others later to fill the app with actual content.

What our designer did

Since some illustrations were still missing, the artistic one among us created required illustrations using Adobe Illustrator (e.g. tree trunks, small icons like a camera icon etc.).

What I did

Revision of the previously conceived concepts of the mini games and development of further game concepts.
Deciding which minigames to play on which tree and in which category.
Formulating concrete and child-friendly texts and also delegation of certain text formulations to Thomas and his assistant.
Documentation of all game concepts and content like quiz questions/answer options (plus indication of what the correct option is)
Making a selection of photos required for certain mini games and importing them into Android Studio.
Delegation of required illustrations to our designer.
Continuing the screen design with Adobe XD and handing it over to our programmer, who then programmed a basic framework for some of the games.
Taking over the communication between all involved and the organization of our appointments.

Superpower — Document: superpower answer options

Screen Design — Screen design in Adobe XD

Previous image

Next image

Individual practical course – german: Einzelpraktikum (04/2020 – 07/2020)

Continuing programming the app as single developer

Our programmer couldn’t continue working on the project, so I decided to continue programming the app on my own. Until then, I hadn’t seen any code of the app, so I familiarized myself with it first. Then I started to actually implement the first games, since there were only a few very basic game frameworks. My focus was on the quiz and popups but I noticed several technical construction sites in different parts of the app, which I tackled one after the other. Much of this is taken for granted as an app user, but I’ve learned that there is a lot of work behind every detail.

Unfortunately, there was no database for the content of the app until now. My predecessor built the content of the mini games based on XML files, so I inserted the actual game content into these files, such as the questions and answers for each quiz. In another xml file, I’ve set the order of the games in each category based on documents I’ve created in the past. Check out some pictures I took back then to document the progress of the app ;)

Android Studio — Typing quiz answers in XML files

Previous image

Next image

Tutor of the practical course Development of Media Systems III (11/2020 – 03/2021)

Management of a practical course at the LMU with twelve participants in which the app was completed and published

Becoming course tutor

My goal was to develop the app to the point where it would be published on the Google Play Store or at least used by Thomas and his classes as part of the BISA project. That’s why I asked if the app development could be finished in a course offered by the university. After a professor responsible for this course was found, only a supervisor was wanted, but no employee was available for the position. So I agreed to lead the course as a tutor and be responsible for the whole process.

That’s how it happened that I was allowed to lead the course, completely independently without outside help. The emphasis is really on allowed, because not only was this an absolutely exceptional job as a student assistant, I was also allowed to organize the further app development as I had imagined. For example, I determined the number of participants and recruited them based on letters of motivation. To do this, I thought long in advance about the steps that needed to be completed before the app could be released, and estimated how many developers would be needed for each task.

Our workflow

Finally, the time had come: In an introductory event, I did a PowerPoint presentation about the development of the app so far and the goal of the course. Over the next few weeks, I gave the participating students time to install all the necessary components for Android Studio and familiarize themselves with the project before we discussed and assigned the tasks together.

Our versioning took place in LRZ GitLab, where we created issues to be processed for all tasks. Milestones ensured that we always had a specific sub-goal in mind. At this point, I have to say that when selecting the participants, I deliberately chose a few who were experienced in app development and GitLab/GitHub, which proved to be enormously helpful, as they also acted as contacts for technical questions alongside me. In addition, they took care of code reviews in GitLab, so that only ‚approved‘ code is merged with the main branch.

In addition to Zoom, I created a Discord server with text channels on various topics where we could exchange ideas at any time. There were also 2 voice channels where pair programming took place from time to time. Using Carl Bot, I created reaction roles to allow the team choosing their own roles on the server. These roles made it easier to address people working on a specific task using the @ command (I couldn’t help but come up with funny german role names). Also, we often ran polls in the channels where specific emojis could be voted on. Especially for the frontend this was very helpful as posted images got quick replies from those who were online.

What the team did:

Integration of a database to manage the content
Revision of the few existing mini games and implementation of new games such as Baumory and Puzzles
Addition and revision of features, content and GUI (e.g. creating the user profile, redesigning the tree profiles, adding popup animations etc.)
Testing

Ultimately, we wanted to release the app on the Google Play Store and also as open-source software on GitHub, but we got there a bit late in the time of the course. Our main problem was the clarification of the legal issues applicable in Germany for the app in the Play Store, which took a little longer than expected. Although the final release could not happen during the course, in the following weeks one of the participants and I voluntarily did the final steps because we were so excited for the release! :) By mid-May, we migrated the project from GitLab to GitHub and released the app on the Play Store as an Early Access version.

My contribution

Holding weekly Zoom meetings to discuss the current status of the app and further development
Organization of appointments (e.g. milestones, deadlines, final presentation etc.)
Grading of the course participants
Legal research to publish the open-source app on the Google Play Store and on GitHub under the MIT license
Obtaining declarations of consent from all parties involved for the publication of app content
Communication with the client and the publishers of the app
Writing the Legal Notice, Privacy Policy and the About Us page in the app
Testing the app and giving feedback
Creating and uploading screenshots of the app for the Google Play Store