We know how many people wish they could be more environmentally friendly but don't know where to start. They read online about some discovery that the Earth is beyond reversing the effects of climate change and they get upset. They wish to be able to do something, but all the options seem to be extremely time consuming for their busy schedules or cost them money that they do not have. This is especially true for Hoboken residents, who know the hustle and bustle of living here very well. This is precisely why we conceptualized this idea of designing an app where the user can simply post anything they might have done to help the environment, no matter how "small", and then be rewarded for it accordingly so that they can put that money back into the environment. It will cost the person nothing and they'll only be helping their local community, our species, and our planet. Together, one step at a time, we aspire to have many users for Climaction so that we can say it was all worth it for our beautiful planet.
As shown in the demo, the app has four main parts: Feed, Contribute, Spend, and Profile.
This section is where you can view all posts from those in your local area. There are four types of contributions that individuals can make on the feed: posts, activities, assists, and commutes. Posts consist of an image and caption that are environmental-related, which people can like; a greater number of likes equates to more ClimateCoins for the poster. An activity is a local environmental event that an individual participates in, an assist is helping out an individual or a group, and a commute is tracking a certain activity that helps the environment; these contributions are text-based and have a predetermined number of coins. The feed section also includes a local leaderboards button, which shows users with the most ClimateCoins in a local area for a certain time period.
In the contribute section, you are able to make one of the four contributions discussed in the previous section, which will be posted on the feed. This section also indicates the amount of ClimateCoins for certain actions. Posts yield 1 ClimateCoin for every 100 likes, Activities/Assists yield 5 ClimateCoins for every 30 minutes of work, and Commutes yield 5 ClimateCoins for every one mile tracked on the app.
This section displays various environmental organizations to which you can donate ClimateCoins to. Some organizations include Clean Air Task Force, US Climate Action Network, and Giving Green to name a few. Clicking on one of the organizations takes you to a prompt to select how many ClimateCoins you would like to donate. 10 ClimateCoins are worth $1.00 USD, so donating 45 ClimateCoins, for instance, would give $4.50 to an organization of your choice. The funds for Climaction are provided by advertisers and sponsors that support the app, with all funds not used for development being used directly for donations.
The profile section allows a user to express themselves through a friendly profile picture and a bio that tells everyone a little bit about themselves and how much they care about the environment. It also lists recent ClimateCoin activity for the user, as well as a progress section indicating how many ClimateCoins they have made in the last month.
We first started with a template to build a rough prototype through the designing tool Figma, in order to outline the basic pages and navigation of our project. Then, we refined our design and made it compatible with Bravo Studio, a framework that uses syntactic tags to transform a Figma prototype into a functional app that can run on phones. From there, we made any adjustments needed to ensure that both the version on our phones and the Figma prototype worked smoothly. You can view our design here, the prototype of our app here, and our GitHub repo here.
We ran into challenges with Bravo Studio, as the framework only properly builds an app if the Figma design is configured in a particular way. We would have one problem where text would keep cutting off, and by trial and error, realized that it was due to a bug with multi-colored text. Because of this error, we could not use bold/colored text in the same text box as black text. Another issue we ran into but eventually solved was some of our elements not having rounded corners. We realized that rounded corners on an element only show up if the element itself is rounded, but the container wrapper around this element must not be rounded for the entire element to be rounded in Bravo.
By taking part in this hackathon, we discovered so many valuable resources that make designing a mockup simpler and appealing. From Figma to Bravo Studio and everything in between, who would’ve thought that there existed so many viable websites/apps that would allow us to fully express our growing desire to encourage others to make more environmentally-friendly decisions. With the topic being about climate change as well, we were able to learn even more about how the world is affected by increased global temperatures and how turning the concept of being more environmentally-friendly into a local competitive app would encourage others to take part in using our app. We asked people we knew if they’d use our app and they agreed that they definitely would, especially since it cost them nothing. We truly learned that sometimes all it takes is some friendly competition to make people want to do something more!
With this only being our first step, we would like to make this into a fully fledged working app one of these days, and not just a mockup. Imagining entire communities of people using our app and helping the environment through it is more than enough motivation for us to pursue this further. We would be greatly willing to pursue sponsorships from companies to help provide our project with more funds so that we can add more different variations of contributions, along with an even more interactive and social environment. Making this into a fully functional app on the App Store would be just one of our goals, we want to kickstart this into something major given the right sendoff!