Be a hero. Save the Earth. One mission at a time.

EcoHero is a mobile app that is geared towards young kids to educate them about environmental awareness through fun and engaging ways. Our app aims to motivate them to reduce, reuse and recycle with various missions within our community. Rewards such as stars, experience points, and various prizes can be obtained upon completion of missions.

Services: Branding, UI/UX Design, Front-end Development
Role: Lead Developer, UX Designer
Duration: 12 weeks
Tools: Adobe Illustrator, Visual Studio Code, Figma, Android Studio
Development: React Native, PostgreSQL, GitHub, Storybook


As part of a term project for our MDIA 3003 – Project 2 class at BCIT, we were tasked to conceptualize, design and develop a mobile application that aims to solve a problem within our community. In teams of 4, we were given a total of 12 weeks to complete the application and present it to an audience consisting of students, faculty and industry professionals.

Problem Statement

We discovered that although some individuals that recycle as part of their daily routine, this action is not enough because the issue at its core is that they are also not reducing and reusing. How can we raise environmental awareness and have people be more conscious of their actions?


We decided to shift our perspective on who to target and saw an opportunity in the younger generation who has the power to make a change. EcoHero is a mobile application that encourages young kids to be environmentally conscious through fun and engaging ways.

User Persona

Primary Persona

  • Name: Steven
  • Age: 12
  • Occupation: 7th Grade Student

Steven is considered outgoing for his age. He is always out and about during recess and he loves playing sports with his friends. He is obedient at home and has developed habits to clean up after himself and help around the house.


Secondary Persona

  • Name: Rhea
  • Age: 29
  • Occupation: 7th Grade Teacher

Rhea has been teaching for 3 years now. She has a genuine care for her students and is always willing to help them learn to their best ability. She has been seeking ways to engage her class to start implementing the 3 R’s: Reduce, Reuse, and Recycle.

Information Architecture

Low-fidelity Wireframe

Complete Missions

The app will generate new missions every month ranging from various levels of impact. All our missions are environmental and community based.

Collect Rewards & Badges

Users will be able to earn stars and experience points upon completing missions. They will also have the ability to level up and collect various achievement-based badges.

Leaderboard Ranking

Each month there will be a leaderboard ranking based on the amounts of stars earned as that will reflect completed missions. Users will be able to see how well they did against others in the community.