
- 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. 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 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. If Mount Merapi erupts (A volcanic mountain at the north of Yogyakarta City), the river becomes the path of the cold lava flood.
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
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)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)
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)
App Screenshots
Here are some of the screenshots of the finished app (in the Indonesian Language).
The main character traversing through the menu selections
Information about Code River menu
Code River location map
Flood simulation menu
Animated explanation of how river floods happen
Mini-game selections
Planting tree mini-game