Ezzat Chamudi

Projects Banjir Educational App

Banjir Educational App

Banjir Snapshot
Date
January - March 2012
Team Size
2
My Role
  • Designed the app UI and created design assets using Adobe Illustrator.
  • Developed the entire app using Flash (ActionScript 2.0).

Summary

Banjir (English: “Flood”) is an educational app for kids that live at the settlements near Code River. Code River is one of the major rivers in Yogyakarta, Indonesia. There are many semi-permanent houses built at the riverbank, and many less-fortunate families still live there. The app’s primary goal is to increase kids' awareness of flood disasters that can occur in Code River anytime.

This app was made when I was a high school student. In 2012, this project won second place among 373 contestants in a national high school research competition conducted by PUSLITBANG SDA (Water Resource Research and Development Center, Ministry of Public Works and Housing, Indonesia).

Background

Code River is one of the major rivers that go through Yogyakarta City, Indonesia. Although it is discouraged, many Yogyakarta’s residents live in the river banks for various reasons, mainly economic. 1 The people that live there are general residents, families, and children.

Settlements at Code River's bank near Sutoto Street, Yogyakarta (April 2012, Personal Documentation)
Settlements at Code River's bank near Sutoto Street, Yogyakarta (April 2012, Personal Documentation)
Settlements at Code River's bank near Sudirman Bridge, Yogyakarta (April 2012, Personal Documentation)
Settlements at Code River's bank near Sudirman Bridge, Yogyakarta (April 2012, Personal Documentation)

During the rainy season, the water level in the Code River gets high. It often floods the places surrounding the river, and it almost happens every year. 2 3 4 If Mount Merapi erupts (A volcanic mountain at the north of Yogyakarta City), the river becomes the path of the cold lava flood. 5 6

The local government had been making various efforts to overcome this problem, e.g., building barriers near the river and teaching adults how to mitigate during floods. But we saw there is still a lack of approach to educating children about the flood disaster thread.

For those reasons, we were motivated to build an app to give those children more awareness through a gamified application.

Building the App

Because the app’s main target is children, so we decided to use cheerful colors with simple shapes. The main features are information about flood disaster mitigation, information about Code River, and some mini-games related to the flood disaster. The assets are designed by using Adobe Illustrator and then imported to Adobe Flash Professional.

Creating design assets using Adobe Illustrator CS5.5
Creating design assets using Adobe Illustrator CS5.5
Developing the app using Adobe Flash Professional CS5.5
Developing the app using Adobe Flash Professional CS5.5

The data collection and development took around four months. We had to share our time with classes and other activities during high school studies.

Acceptance Testing

We tested the app directly on the children that were playing near the Code River. They were enthusiastic to try the app and play the games. Surprisingly, the children didn’t need much guidance to navigate through the app.

Me setting up a laptop for the testing (April 2012)
Me setting up a laptop for the testing (April 2012)
A short video of kids trying our app

Research Competition

In 2012, there was a national high school research competition conducted by PUSLITBANG SDA (Water Resource Research and Development Center, Ministry of Public Works and Housing, Indonesia). The competition’s main theme was “Technology Innovation in Water Resource Management to Mitigate Climate Change.” Since the beginning, we built this project to join this competition, so we made sure that the app goes along with the requirements and has possible impacts in the future.

Me presenting our project in front of the juries (May 2012)
Me presenting our project in front of the juries (May 2012)

We presented our research report on the presentation day and demonstrated our app in front of the juries. They were interested in our approach of using a computer-based app/game to teach the flooding problem to children. On the final day, we were thrilled that our team won second place among 373 contestants.

Winning teams of the competition (May 2012)
Winning teams of the competition (May 2012)

App Screenshots

Here are some of the screenshots of the finished app (in the Indonesian Language).

The main character traversing through the menu selections
The main character traversing through the menu selections
Information about Code River menu
Information about Code River menu
Code River location map
Code River location map
Flood simulation menu
Flood simulation menu
Animated explanation of how river floods happen
Animated explanation of how river floods happen
Mini-game selections
Mini-game selections
Planting tree mini-game
Planting tree mini-game

  1. Setiawan BB. Integrating environmental goals into urban redevelopment schemes: lessons from the Code River, Yogyakarta, Indonesia. Water Sci Technol. 2002;45(11):71-6. PMID: 12171368. ↩︎

  2. Kompas, 2009. Tiga Sungai Besar Di Yogyakarta Berpotensi Meluap. [online] KOMPAS.com. Available at: https://nasional.kompas.com/read/2009/12/07/21541776/tiga.sungai.besar.di.yogyakarta.berpotensi.meluap. ↩︎

  3. Viva.co.id. 2010. Kali Code Kembali Banjir Lahar Dingin. [online] Available at: https://www.viva.co.id/berita/nasional/188523-kali-code-banjir-lahar-dingin-lagi. ↩︎

  4. Aris Sasangka, B., 2011. Warga Bantaran Kali Code Diminta Waspadai Lahar Dingin Merapi. [online] Solopos.com. Available at: https://www.solopos.com/warga-bantaran-kali-code-diminta-waspadai-lahar-dingin-merapi-120844. ↩︎

  5. Universitas Gadjah Mada. 2011. Anticipation Of Cold Lava Flood, Rivers Around Merapi Need Proper Management. [online] Available at: https://www.ugm.ac.id/en/news/6846-anticipation-of-cold-lava-flood-rivers-around-merapi-need-proper-management. ↩︎

  6. ReliefWeb. 2010. Mt. Merapi Volcano Eruption, Central Java Province, Republic Of Indonesia - Emergency Situation Report ESR. [online] Available at: https://reliefweb.int/report/indonesia/mt-merapi-volcano-eruption-central-java-province-republic-indonesia-emergency-4. ↩︎