“Zero Waste” — Manage your daily waste for a better world.
This project was carried out as part of the TechLabs “Digital Shaper Program” in Dortmund (summer term 2021).
In a nutshell:
Do you know how much waste you create in a day? Waste disposal has attracted a lot of attention in recent years, but how can we measure the amount of waste we create? Our goal is to design and compile a website that allows users to record the amount of waste they throw away each day and compare it to existing data to see how much waste reduction they should achieve. We first created a prototype design using Figma and then implemented it through HTML, CSS, and JavaScript. In addition to the welcome page and login page, our website also has a personalized dashboard for users, where they can log into their accounts, record their daily waste and see how they compare to the existing data. We hope to incorporate AI technology in the future, add a photo scanning function and develop a mobile app to make it more convenient for users to use.
Introduction:
Zero Waste — waste as less as you can.
Our program started during Covid. After a year of lockdown, people spend more time on their own daily lifestyle at home. They are more conscious of what they buy, what they use, or what they eat.
With consumption comes waste. An office worker or student who spent a lot of time outside before the epidemic may never have known how much waste they were creating in a day because they don’t have to handle the waste management by themselves. But the time is different. Distance learning and remote working are forcing people to stay home. With more time spent at home, the trash cans fill up faster than usual.
Therefore, our team wanted to use this opportunity to inspire people to pay more attention to the amount of waste they are producing each day and thus encourage people to reduce their waste.
At the beginning stage of our project, our team identified two big issues:
1) The way to measure waste and
2) methods to encourage our users to build the habit of logging in daily the amount of waste they created.
For the first problem, our team decided to use the simplest measurement method, such as “one plastic bottle”, “three paper box”, etc., because we don’t need precise numbers. Of course, a better way is to scan directly through the camera using AI technology — something we cannot achieve at this stage, unfortunately.
On the other hand, our team wanted to motivate people by allowing users to compare their current data with their previous data, as well as data like the amount of waste in Dortmund during the same period in the past few years. Through this, we believe people will be more motivated to reduce their waste.
Methodology:
Our approach: Assume ourselves as users of our site.
Our team consists of a web developer, Marvin, two Data Scientists, Ali and Samuel, and a UX designer, Yung-Hsuan. In the early stages of our project, we brainstormed what kind of website we wanted to use from the user’s perspective. Together we defined the vision of our project, the specific goals we wanted to achieve, and the milestones that would take us there. Next, we used the project management system on Monday and Trello to define tasks and timelines for each team member. Since we considered ourselves part of the target group, we began to gather features that we ourselves would appreciate in the final product.
For the welcome page, we wanted to display our tagline at the very top. Not to be dispensed with was also the team introduction and a brief introduction of how the web app works. We would also like to include a news section to provide our users with the latest information on environmental protection, waste reduction, etc. We designed the registration button to be scattered throughout the welcome page so that users can quickly find and register at any time.
After logging in, we designed a personalized page for users. There, we wanted users to be able to enter their daily waste amount, to see an analysis of the entire platform’s user profile, and to compare it with their previous profile.
Soon after our discussion, Yung-Hsuan designed a prototype of our website in Figma and Marvin started to build the web app with its core functions and structure with HTML, CSS, and JS. The data science team started to find external data, and together with Marvin, they tried to figure out ways to implement the data with the web app. For combining the back-/front-end and the data science part, we created a programming environment using Python and Flask; we then added a Bootstrap code into the environment and changed it to our liking so that we had everything regarding backend, front-end, and data on the same page.
The biggest challenge was the development of the backend. Developing the backend was not included in the courses previous to the project phase. Therefore, Marvin and Samuel read a lot of codes and watched a lot of YouTube videos about how exactly the backend works and generally what it is in order to get started.
The idea was to program it on pycharm from scratch and add things to it from time to time. Samuel concentrated just on the functionality and not on the look, which would, later on, be the hardest task to solve, and he had to communicate with Marvin, our web developer.
In the beginning, Samuel had problems programming the home and login page, which had a lot of similar code and cost him a lot of time because of the repeated code. He programmed a “layout.html”, which gets inherited from the “home.html” and the “about.html”. After programming the login and register page, through the help of YouTube tutorials, he had to get the bootstrap code working, which looked similar to the front-end design we wanted our page to look like. At first, Samuel tried to do it only through watching YouTube tutorials — which was not that easy. He had a problem changing the bootstrap code so that it matches the logic earlier programmed with Flask. Because of the lack of time, he changed his plan and downloaded a much simpler bootstrap code, which had a very default design.
Another task was the finding and visualization of data related to our project. The very first challenge that we faced was finding external data similar to the data structure that we had in mind. A lot of datasets had not enough information to analyze, clean, and visualize. With the help of the mentors, fortunately, we were able to find several data banks within sites such as “open.nrw” where the data related to our subject, waste type generated by households, was accessible. The next step was to scrape the data and take advantage of it in favor of making dummy data. A lot of datasets had a comma instead of a dot as decimal numbers, so it needed to be changed through a df.stack().str.replace(‘,’,’.’).unstack() function. To visualize the data, Samuel rewatched some datacamp videos to be able to label the plot and thought about which design would highlight the message of the plot.
For data scraping and cleaning, the packages dplyr, httr, and rvest from programming language R were used by Ali. In the next step, panda and numpy packages from python were used for making tidy datasets, and sci-kit learn package for making dummy data using linear relationships between the variables of our data. The last step was analyzing the data, which was done with the help of matplotlib and visualizing the data.
Results:
Marvin, our web developer, has tried to improve the CSS code in order for the website to look similar to the prototype.
After completing the front-end development of our web app, Marvin and our data science team attempted to use Flask to plot the external datasets on the dashboard.
The function should read the csv file and display the data on a chart so that the users can visualize the data. Although they failed to manage that in the end because of the lack of time, we indeed invested a lot of time and effort into our project and learned a lot within the project phase.
The greatest impact of our project is our personal growth. Since one of the biggest factors to our project was the loss of team members, it required us to reorient and to stay flexible to come through the losses. Fortunately, our team figured out a way. Key to the success of our project was the communication between teams. Especially for the backend, it was necessary to know how the front-end should look like. There, the data science team and the web development team put great effort into communicating and working together. Yung-Hsuan, our UX designer, was also in constant contact with Marvin, our web developer, so that the website could be coded as similar as the prototype.
When problems occurred, we usually tried to solve them with the help of the internet first. Unfortunately, sometimes problems like implementing the bootstrap code are not generally applicable. Therefore, we started to try not only to ask for the mentors’ help but also to ask other team members about the problems and solve them together.
The possible next step could be a mobile app that contains functions like scanning the waste with cameras. With a mobile app, we could also send a daily notification to our users, which would be a great help building their habit of logging in daily for the cost of the waste created.
GitHub Repository:
Team Members:
Data Science:
- Samuel Reichmann [samuelreichmann@gmx.net]
- Ali Tabesh [ali.tabesh@tu-dortmund.de]
Web Development:
User Experience Design:
- Yung-Hsuan Chiang [yung-hsuan.chiang@smail.th-koeln.de , https://www.linkedin.com/in/yung-hsuan-chiang1997/]
Team Mentors:
- Luise Weickhmann, WebDev Mentor
- Philipp Clasen, Data Science Mentor, WebDev Backend
- Kai Bitterschulte, Data Science Mentor, WebDev Backend
Sources:
