Visit our website to get started!
During the COVID-19 pandemic, online shopping has become much more popular. Many of our purchases are delivered from far away using high levels of packaging, causing an inordinate amount of shipping pollution. In particular, according to the Scientific American most methods of product delivery use more resources than brick and mortar shopping. It is clear that online shopping is the future, but with the impacts of climate change impending, it is important to also be concerned with the environment.
However, we know that donating is often inconvenient and burdensome. It is hard to pick a charity and know exactly how much to donate. There are many subconscious barriers to giving, but automating the process ensures you do not second guess your environmental donations. A first of its kind, we have made a creative and convenient Chrome extension to solve these problems and overcome the barriers to donating that so often go ignored. Redeem your emissions with Redeem.
Redeem automatically upmarks the prices of items on online retailers using a tested and true formula that uses scientific reasoning, the distance of shipping, package weight, and packing amount (when available) that determines a dollar value for the environmental cost of purchasing a product. The excess money, which you already believe is gone, is instead donated to a cause of your choice, from our trusted list of verified and ethical Canadian environmental organizations.
The Redeem Chrome extension relays your current donation balance, your lifetime donations, other vital statistics, and gives quick links to change your settings and donate with one press. Behind the scenes, the extension modifies the price of all items on supported online retailers so that you make your purchases with the post-donation price in mind. You can always hover over any price to determine how much the original price is, and what amount of it you are giving back to others, with a custom CSS injected widget.
However, we know that not all of your purchases are made online, and thus we have made a Redeem mobile app as well, where you can log in and take a picture of the tag on your physical purchases, and we add, with the information available on the tag, the carbon emissions of that product to your donation balance. We also have a community aspect where you can add friends and compare your offset carbon footprints against each other. Donating is always more fun together.
Redeem ties the extension and mobile application together with a web application where you can monitor your donations through graphs and statistics, maintain a ledger of your donations for tax rebate purposes, and change your default charity permanently. Our landing page explains the features, frequently asking questions, and Redeem's quick 5-minute installation and setup process. All you need to do is make an account, download the extension and app, and all your data is perfectly synchronized across the three platforms.
Our front-end landing page was developed in HTML/CSS using Bootstrap to make an innovative and easy-to-access UI/UX experience. We then moved onto the actual Chrome extension, keeping a steady design process, designed first in Figma, and then implementing our design using HTML/CSS/JavaScript and Bootstrap. We used JavaScript to track and change prices. In the background, whenever a user goes to a product page, to determine the changed price, we scrape all relevant statistics (user location, package location, package weight, packaging amount, and more) and input them into the equation to create the price upmark. We inject CSS that modifies the price accordingly and creates the hovering features, which informs the user of how much they are donating, and what the actual original price is. We then implemented a user signup/login and created a dashboard to display stats.
We used Firebase to track user statistics across all three platforms. Thus, upon purchasing, your Firebase is automatically updated accordingly. Each user's personal Firebase is created when they make an account on the landing page and sign in with it on the extension. The app allows you to sign in with that same account, and take pictures of physical tags. The text on the tag is parsed into the relevant information using ML Kit, and our same equation is applied. Other tabs on the mobile app take your data from the Firebase and compare it to other users on a Leaderboard, and allow you to change your default charity, similar to the dashboard. The entire app was designed in Figma and coded in Flutter.
After adding security features to the dashboard, including abilities to reset and change one's email and password, and the ability to change one's default charity (compiled from a list of trusted Canadian organizations), we felt confident that we had a finished product.
A major challenge when creating the Chrome extension was in scraping the relevant data on each website. Each website uses different tags, locations, and names to describe its product statistics, and so we had to personalize our JavaScript for each supported retailer. Another big hurdle was in getting the pop-up system to display correctly on the webpages of retailers such as eBay and Amazon where it would interfere with surrounding HTML tags. We got around the problem by injecting our own HTML code and Javascript into the header of the websites we entered in order to make everything fit together correctly without overlap. Furthermore, we had trouble integrating aspects of a user's information from Firebase into the Chrome extension, as we had to update a user's donation balance live as they made purchases. This required automatically refreshing statistics at certain intervals. The app had trouble taking data from the camera and parsing everything accordingly, but that was solved by taking a better look at ML Kit's documentation. We're glad nwHacks was the perfect environment to explore these technologies and help us overcome our challenges.
We are most proud of the backend changes and style injections we made to websites with our Chrome extension in order to provide users with the modified prices. It makes the experience of using our extension a lot more pleasing and robust! We are proud of the landing page, which easily teaches users about Redeem and provides an accessible platform to download the application and complete the onboarding process. We are also really proud of the mobile app, as it shows our creativity in creating interesting designs and pushing people to donate more. Further, seeing as this was a learning experience for us all, we can all happily say we learned some valuable skills, and much of what we did today will be valuable for future projects.
We learned how to fully integrate a custom CSS widget in a professional development manner, and have gained extensive experience in the process of developing a Chrome extension. We learned how to create a multi-device platform that synchronizes data perfectly across multiple locations. Moreover, we learned about the importance of UI in creating a seamless experience. But we didn't just take away technical skills - we also learned the importance of patience and perseverance, and how to maintain a team chemistry. By combining our strengths, we were able to accomplish something greater than ourselves. We developed valuable communication and interpersonal skills that will prove useful in any facet of life.
Our request to put the Redem Chrome extension on the Chrome Web Store is currently pending and is something we highly look forward to. The same goes for the Redeem app on the Google Play Store. This will allow even more users to give back to their communities and more easily facilitate downloading.
Currently, we have support for vetted Canadian charities, many of which are preservation-oriented, but going forward, we plan on adding support for more international charities that have broader environmental goals. As well, we plan to partner with a few select local charities and implement a Stripe payment to allow for even more easy giving. Then, once a user securely loads his credit information into the Stripe platform, their donations will be automatically given to the charity of their choice upon any online purchases. This will take Redeem to new heights and further streamline the platform to make donations easier than ever before. A one-tap donation will become zero-tap, making redeeming your emissions truly automatic.