search

benschaf / waste-schedule

This is a waste-management App with CRUD functionality. Never forget to take out your bins on time! Connect with your community and be Eco-Conscious together.
0 stars 0 forks source link

readme

tonne: Your Partner in Green Living!

Experience our live website here!

GitHub commit activity GitHub last commit GitHub issues GitHub closed issues GitHub repo size Python version npm version Heroku

Welcome to tonne (german for: Waste Bin) - the Waste Management site and your go-to solution in the quest for efficient and eco-friendly waste handling! 🚀

screenshot

⤴️ preview of the site on different devices

We are not just about managing waste, it's about creating a sustainable future, one tonne at a time. Here's what we offer:

  1. 📅 Waste Collection Reminders:

    • Say goodbye to forgotten collection days! Our site allows you to search for your postcode and receive real-time reminders in your calendar. Whether it's the Grüne Tonne or Gelbe Tonne, our timely notifications ensure that you will never have to rush out your bins again in the last second.

  2. 👥 Community Interaction:

    • Be part of the green revolution! Users can upload and rate waste collection schedules, ensuring the highest level of accuracy and reliability.
    • Everyone can Like and Comment on existing schedules, providing valuable feedback and helping the community improve waste management practices.

Join us in building a community-driven resource that's making a real difference. Together, we can create a cleaner, greener world - one bin at a time! 🌳

UX

Colour Scheme

I used a subtle green and white colour scheme to reflect the eco-friendly nature of the app. Coolors was used to generate the colour palette.

screenshot

⤴️ Screenshot of the colour palette from Coolors

In order to have easier access to my colour scheme within my code i used CSS :root variables. These also include transparent versions of the colours for backgrounds.

:root {
    --primary-color: #25a55f;
    --secondary-color: #57d992;
    --darker-secondary-color: #1c7b47;
    --primary-transparent-background: #25a55f45;
    --secondary-transparent-background: #1c7b47db;
    --dark-background: #2a2a2a;
    --light-background: #e6e6e6;
}

Typography

Wireframes

To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes. I've used draw.io to design my site wireframes.

View the original draw.io file of the wireframes. (click on the "Open with" button and select "draw.io")

Page Mobile Wireframe Tablet Wireframe Desktop Wireframe
Landing Page screenshot screenshot screenshot
Schedule List screenshot screenshot screenshot
Schedule Detail and Editor screenshot screenshot screenshot
Dashboard screenshot screenshot screenshot
Schedule Builder screenshot screenshot screenshot

User Stories

Check out the User Story Map created for this project using Github Projects. It includes all user stories and makes them easier to manage as they are grouped by Epic and MoSCoW priority. Meaningful accepance criteria were added to each user story in order to make development more goal focused.

screenshot

⤴️ Screenshot of the User Story Map

MoSCoW Prioritization: Must Have

Listed below are only the user stories that were prioritized as Must Have.

For all user stories and especially to see the acceptance criteria for each story listed below, please refer to the User Story Map instead. Note that MoSCoW prioritization of the user stories is frozen at the beginning of the last iteration to give more insight in the development process.

Epic: Landing Page optimization

Epic: Picking a Schedule

Epic: Managing and recieving reminders

Epic: Upload waste collection Schedules

Epic: Rate and Comment on waste collection Schedules

Flowchart

The following flowchart depicts possible user journeys in the waste management app. The app tries to let the user do as much as possible without having to sign up or log in. The user is only prompted to sign up when they want to subscribe to a schedule or create a new one. The flowchart also shows the user journey for the schedule builder and the dashboard.

screenshot

⤴️ Flowchart of the user journey

Features

Existing Features

Inviting landing Page

When first visiting the site, users are greeted with a clean, modern and inviting landing page. It includes a hero image, a brief description of the site, and a call-to-action form to get started.

The landing page is designed to be simple and user-friendly, providing a quick overview of the site's purpose and functionality. It encourages users to explore the site further and get started with their waste management journey.

screenshot

⤴️ Screenshot of the landing page

relevant project files: index.html

Navigation Bar with the most important links

The navigation bar is fixed at the top of the page, ensuring easy access to the most important links. It includes the logo (which is a link to the homepage), links to the schedule list, the schedule builder, the dashboard and login/register.

The navigation bar is designed to be simple and intuitive, providing quick access to the site's main features. It is responsive and collapses into a hamburger menu on smaller screens using the Bootstrap framework.

screenshot

⤴️ Screenshot of the navigation bar

Some custom Javascript code was used to change the navigation bar's opacity once scrolling down the page. This was done to make the hero section of the landing page cleaner and more focused.

relevant project files: base.html, index.js

Footer with social media links

The footer includes links to the site's social media profiles, such as Facebook, Twitter, and Instagram. It also includes a link to the About page and displays a copyright notice.

The footer is designed to be simple and unobtrusive, providing additional information and links for users who are interested.

screenshot

⤴️ Screenshot of the footer

relevant project files: base.html

About Page

The About page provides a brief overview of the site's purpose and the creator. It also identifies the site as a Code Institute student project.

The About page is designed to be informative, providing users with background information. It helps to establish trust and credibility with users, ensuring they feel comfortable using the site.

screenshot

⤴️ Screenshot of the about page

relevant project files: about.html

Schedule Search Bar and List

The schedule search bar allows users to search for their postcode and receive a list of waste collection schedules. The search bar is displayed prominently as the CTA (Call to Action) on the Landing page and in the Schedule List page.

Once the user has entered their postcode, they are presented with a list set of schedule cards that match their search criteria. From here, they can already like and/or subscribe to a schedule.

The schedule list has enabled pagination, so that the user can easily navigate through the list of schedules.

The search bar and list are designed to be simple and intuitive, providing users with a quick and easy way to find the information they need.

screenshot

⤴️ Screenshot of the search bar and schedule list

A custom form validator using a regex pattern was used to ensure that the user enters a valid postcode and gets appropriate feedback if they don't.

<div class="form-floating">
    <input type="text" id="postcodeInput" class="form-control rounded-corners"
        placeholder="Search by postcode" aria-label="Search by postcode"
        aria-describedby="button-addon2" pattern="^\d{5}$"
        title="Please enter a 5 digit postcode (only German postcodes are supported)" required>
    <label for="postcodeInput">Search by postcode</label>
</div>

relevant project files: schedule_list.html, index.js

Schedule Detail View

When a user clicks on a schedule card, they are taken to the schedule detail view. Here, they can see all the details of the schedule, including the waste types, collection days, title, location and description. They can also like and subscribe to the schedule.

Below the schedule details is a list of user comments, allowing users to share their thoughts and experiences with the schedule.

For the schedule as well as for each comment, the owner of the item can edit or delete it.

The schedule detail view is designed to be informative and engaging, providing users with all the information and possibilites to take action they need in one place.

screenshot

⤴️ Screenshot of a schedule detail view

relevant project files: schedule_detail.html, comments.js, only_schedule.js

Basic superuser functionality

Besides the regular built in Django superuser functionality, I have added a custom superuser functionality that allows the superuser to delete or edit any schedule. This can be done while viewing any schedule detail page as a superuser.

This feature is very rudimentary and only allows the superuser to delete or edit schedules. It does not include any kind of moderation or approval process for schedules and there is no feedback to the owner of the schedule when a superuser deletes or edits a schedule.

relevant project files: schedule_detail.html

User Likes, Subscriptions, and Comments

Users can like and subscribe to schedules, as well as leave comments. This allows them to interact with the site and the community, providing feedback and sharing their experiences.

A like is a simple way for users to show their appreciation for a schedule. Other users can see how many likes a schedule has received - thereby indicating its popularity and reliability.

Subscribing to a schedule means that the user will be able to set up notifications for this schedule. A subscribed to schedule will be displayed on the user's dashboard. Subscriptions also contribute to indicate the reliability of a schedule.

Subscriptions and likes can be added and removed by the owner via the schedule list and schedule detail pages.

Comments allow users to share their thoughts and experiences on a schedule. They can ask questions, provide feedback, or share additional information. Comments are displayed below the schedule details and can be edited or deleted by the owner. Comments can be added, edited and deleted via the schedule detail page.

The like, subscribe and comment features are designed to encourage user interaction and engagement, creating a sense of community and trust.

screenshot

⤴️ Screenshot of the comments section and the like and subscribe buttons

relevant project files: comments.js, schedule_detail.html, schedule_list.html, dashboard.html

Schedule Builder

The schedule builder allows users to create a new waste collection schedule. They can add waste types, collection days, and any additional notes. Once the schedule is created, it is added to the database and can be viewed by other users.

The schedule builder is split up into 3 steps:

Schedule Builder

The schedule builder allows users to create a new waste collection schedule. It consists of three steps:

  1. Location Form: Here the user can enter their postcode. If a schedule for this postcode already exists, the user is notified.

  2. Schedule Title / Description / Image Form: Here the user can enter a title and description for the schedule. They can also upload an image to help validate the schedule.

  3. Collection Events Calendar Form: Here the user can add collection events to the schedule. They can select the waste type and the collection day directly from a calendar. The calendar is implemented using the FullCalendar library. The user can add recurring events, such as weekly or monthly collections, as well as one-time events. The deletion of recurring events is not yet implemented because the FullCalendar library doesn't support it natively. Singular events and all events that are part of the same recurrence can be deleted. Compare Issue #32.

The schedule builder is designed to be intuitive and user-friendly, providing a step-by-step process for creating a new schedule. It allows users to contribute to the site and share their knowledge with the community. And it even includes a step-by-step progress bar!

Location Form Schedule Title / Description / Image Form Collection Events Calendar Form
screenshot screenshot screenshot

relevant project files: location_form.html, schedule_form.html, calendar.html, edit_calendar.js

Dashboard

The dashboard is a user-specific page that displays all the schedules the user has created. It also displays any schedules the user has subscribed to.

From the dashboard, the user can edit or delete their schedules. It provides a quick overview and a general starting point for established users that are already familiar with the site.

screenshot

⤴️ Screenshot of the dashboard

relevant project files: dashboard.html

Schedule Export

Users can export their schedules to their calendar app via an ics file. This allows them to receive notifications and reminders directly on their phone or computer. When Downloading a Schedule, a modal containing instructions on how to import the schedule into a calendar app is displayed.

The export feature is designed to provide users with a convenient way to receive reminders for their waste collection days. It ensures that users don't miss any important events and helps them stay organized.

screenshot

⤴️ Screenshot of the export modal

relevant project files: dashboard.html, dasboard.js

User Registration and Login

Users can register for an account on the site, providing a username and password. Once registered, they can log in to the site using their credentials. They also have the option to register and sign in using their Google account. This feature is implemented using the Django Allauth package as well as the Google OAuth2 API.

The site tries to prompt the user to register or log in only when it is necessary. This means that the user can do as much as possible without having to sign up or log in. Only when the user has to perform any kind of CRUD operation or if they want to see their dashboard, they are asked to sign up or log in. For an overview of the user flow, see the flowchart.
screenshot screenshot

⤴️ Screenshot of the registration page

relevant project files: find the adapted Allauth templates in the templates/account folder.

Django messages

Django messages are used to provide feedback to the user. They are displayed at the top of the page and disappear after a few seconds. They are used to confirm successful actions, such as creating a schedule, as well as to provide error messages, such as when a user tries to access a page they are not authorized to view.

The messages are designed to be unobtrusive and informative, providing users with feedback on their actions and helping them navigate the site.
screenshot screenshot

⤴️ Screenshot of a success message

relevant project files: base.html

Basic superuser functionality

Custom 404 and 500 error pages

Custom 404 and 500 error pages are displayed when a user tries to access a page that does not exist or if there is an internal server error. The pages are designed to be informative and user-friendly, providing users with feedback on what went wrong and how to proceed.

404 Error Page 500 Error Page
screenshot screenshot

⤴️ Screenshots of the error pages

relevant project files: 404.html, 500.html

Responsive Design

The site is fully responsive and optimized for all devices. It looks great on mobile, tablet, and desktop screens, ensuring a smooth user experience no matter the device. The responsive design was implemented using the Bootstrap CSS framework. Custom CSS was used to create a unique design that fits the site's theme.

relevant project files: all template files and style.css (for custom styles)

Future Features

All Ideas for Future Features are organized as user Stories by Epic and MoSCoW priority in the User Story Map - check it out, there are some good ideas in there!

These are my three favorite ideas for future features:

Tools & Technologies Used

Database Design

A relational database was used for this project. The database schema was designed using dbdiagram.io before development began. The schema was then implemented using Django's built-in ORM. Throughout the development process, the schema was adjusted and updated as needed. The initial and the final version of the schema can be found below.

Initial ERD

At the core of the database design is the Schedule model. This model represents a waste collection schedule and includes fields for the schedule title, description, and image. On the left side of the ERD view below are models that allow users to like, comment on, and subscribe to schedules. On the right side are models that handle individual collection events. They mostly adhere to the RRule standard, which allows for complex recurring events to be defined.

screenshot

⤴️ the initial ERD

Link to the initial ERD

Final ERD

I have used pygraphviz and django-extensions to auto-generate an ERD.

The steps taken were as follows:

erd

⤴️ the final ERD

source for django ERD generation: medium.com

Note about migration files: While debugging the project, migration files were deleted and recreated which results in the migrations folders only containing one migration file each. The migration history can be recreated in older versions of the github repository. Thanks for John from the tutor team for the help with debugging my migrations! (see commit ea26c6f)

Agile Development Process

GitHub Projects

GitHub Projects served as an Agile tool for this project. It isn't a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.

Through it, a user story map was created, and issues were managed in an Agile way. User stories were created using a custom User Story Template.

User stories are grouped by Epic and MoSCoW priority. The epics were determined before development began as part of the design process. In depth information about the conception of the idea for the site and the User Stories can be found under the Design Thinking Progress section at the bottom of this file.

Throughout the development process, user stories were reevaluated after each iteration and adjusted accordingly. At this time, they are frozen at the beginning of the last iteration to give more insight into the development process.

screenshot

⤴️ Screenshot of the User Story Map

MoSCoW Prioritization

I've decomposed my Epics into stories prior to prioritizing and implementing them. Using this approach, I was able to apply the MoSCow prioritization as custom project fields to my user stories within the project settings on GitHub.

GitHub Issues

GitHub Issues served as an another Agile tool.

Github issues was mainly used to track bugs and smaller feature requests that weren't big enough to be considered a user story. They also contain the user stories which means that filtering is key to keep an overview over the issues.

Testing

[!NOTE] For all testing, please refer to the TESTING.md file.

Deployment

The live deployed application can be found deployed on Heroku.

PostgreSQL Database

This project uses a Code Institute PostgreSQL Database.

To obtain my own Postgres Database from Code Institute, I followed these steps:

[!CAUTION]

  • PostgreSQL databases by Code Institute are only available to CI Students.
  • You must acquire your own PostgreSQL database through some other method if you plan to clone/fork this repository.
  • Code Institute students are allowed a maximum of 8 databases.
  • Databases are subject to deletion after 18 months.

Cloudinary API

This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn't persist this type of data.

To obtain your own Cloudinary API key, create an account and log in.

Heroku Deployment

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.

Key Value
CLOUDINARY_API_KEY user's own value
CLOUDINARY_API_SECRET user's own value
CLOUDINARY_CLOUD_NAME user's own value
CLOUDINARY_URL user's own value
DATABASE_URL user's own value
DISABLE_COLLECTSTATIC 1 (this is temporary, and can be removed for the final deployment)
SECRET_KEY user's own value

Heroku needs three additional files in order to deploy properly.

You can install this project's requirements (where applicable) using:

If you have your own packages that have been installed, then the requirements file needs updated using:

The Procfile can be created with the following command:

The runtime.txt file needs to know which Python version you're using:

  1. type: python3 --version in the terminal.
  2. in the runtime.txt file, add your Python version:
    • python-3.9.18

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

Either:

Or:

The project should now be connected and deployed to Heroku!

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.

[!IMPORTANT] This is a sample only; you would replace the values with your own if cloning/forking my repository.

Sample env.py file:

import os
os.environ.setdefault("CLOUDINARY_API_KEY", "user's own value")
os.environ.setdefault("CLOUDINARY_API_SECRET", "user's own value")
os.environ.setdefault("CLOUDINARY_CLOUD_NAME", "user's own value")
os.environ.setdefault("CLOUDINARY_URL", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")

# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you'll need to follow these steps:

Cloning

You can clone the repository by following these steps:

  1. Go to the GitHub repository
  2. Locate the Code button above the list of files and click it
  3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
  4. Open Git Bash or Terminal
  5. Change the current working directory to the one where you want the cloned directory
  6. In your IDE Terminal, type the following command to clone my repository:
    • git clone https://github.com/benschaf/waste-schedule.git
  7. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Credits

Content

All the Credits and hyperlinks can be found in the respective files on the indicated lines.

Note that the list of credits below is automatically generated from the project files using the copy-credits.py script. The script was written by me, with much help from the Microsoft Edge Copilot. File Notes Source
index.html: Line 21 manual input validation using regex pattern developer.mozilla.org
index.html: Line 22 regex Pattern (generated using Bing AI) www.bing.com
test_views.py: Line 60 getting django messages from response stackoverflow.com
views.py: Line 412 update_or_create docs.djangoproject.com
views.py: Line 413 dict.get() www.w3schools.com
views.py: Line 466 get_kind_display() docs.djangoproject.com
schedule_form.html: Line 41 uploading a file using a form www.w3schools.com
style.css: Line 8 using CSS root variables www.w3schools.com
style.css: Line 97 keyframes stackoverflow.com
style.css: Line 149 Gradient text cssgradient.io
style.css: Line 235 timeline CSS & HTML www.bootdey.com
style.css: Line 350 google button styling developers.google.com
style.css: Line 394 progress bar bbbootstrap.com
edit_calendar.js: Line 26 getWeekday www.w3schools.com
edit_calendar.js: Line 68 selectedIndex www.w3schools.com
edit_calendar.js: Line 155 query selector developer.mozilla.org
edit_calendar.js: Line 205 adding a year to a date developer.mozilla.org
index.js: Line 1 redirecting to a url in javascript stackoverflow.com
script.js: Line 2 popovers getbootstrap.com
script.js: Line 46 the copyright notice update function goes to TravelTimN github.com
404.html: Line 5 adding costum error pages docs.djangoproject.com
base.html: Line 55 getting view name from template stackoverflow.com
base.html: Line 99 django messages framework docs.djangoproject.com
login.html: Line 29 google sign in button developers.google.com
signup.html: Line 37 social Login setup www.youtube.com
signup.html: Line 38 documentation for social Login setup docs.allauth.org
settings.py: Line 77 cloudinary saving using HTTPs (this is a link to the code institute internal Slack server) code-institute-room.slack.com
models.py: Line 10 RegexValidator class docs.djangoproject.com
models.py: Line 28 slugifiable regex (generated using Bing AI) www.bing.com
test_views.py: Line 7 django test assertions docs.djangoproject.com
test_views.py: Line 106 converting a QuerySet to a list stackoverflow.com
test_views.py: Line 308 refreshing the object from the database stackoverflow.com
test_views.py: Line 622 converting lists with different orders to sets to compare them www.digitalocean.com
views.py: Line 23 class based views docs.djangoproject.com
views.py: Line 79 adding an annotation to each object in a list docs.djangoproject.com
views.py: Line 82 passing only the id field value to the template docs.djangoproject.com
views.py: Line 108 additional context data in class based views docs.djangoproject.com
views.py: Line 131 checking wether a queryset contains any items docs.djangoproject.com
views.py: Line 132 authenticating the logged in user docs.djangoproject.com
views.py: Line 147 using the LoginRequiredMixin docs.djangoproject.com
views.py: Line 186 finding class based view methods www.brennantymrak.com
views.py: Line 196 edit view github.com
views.py: Line 324 creating an object docs.djangoproject.com
views.py: Line 325 deleting an object docs.djangoproject.com
views.py: Line 435 ics.py library that helps to create ics files icspy.readthedocs.io
views.py: Line 455 formatting a date object width strftime strftime.org
views.py: Line 464 creating a download response docs.djangoproject.com
schedule_detail.html: Line 147 crispy forms github.com
schedule_detail.html: Line 174 modals getbootstrap.com
schedule_detail.html: Line 175 passisng data attributes to js blog.webdevsimplified.com
schedule_detail.html: Line 176 passing the CSRF Token and using it in js stackoverflow.com
schedule_detail.html: Line 229 sending JSON data to JavaScript docs.djangoproject.com
schedule_list.html: Line 12 manual input validation using a regex pattern developer.mozilla.org
schedule_list.html: Line 67 popovers getbootstrap.com
schedule_list.html: Line 112 pagination with django docs.djangoproject.com
schedule_list.html: Line 113 pagination styles getbootstrap.com

Additionaly, Chris Beams article "How to Write a Git Commit Message" was used as a guideline for writing commit messages.

Media

The tonne logo was drawn by me, adapting the design from a vecteezy graphic.

Images for sample Waste Schedules featured in the fixtures were taken from the following websites and uploaded to Cloudinary as an example usecase in the project:

All images used in this project were generated using the Copilot Designer

Acknowledgements

Design Thinking Process

[!NOTE] This Section is added at the end of the README file to keep it clean and concise. Though it is not part of the usual README structure, it was added to provide a more detailed insight into the project's conception and development process.

The design thinking process was used to develop the idea for this project. The process consists of five stages: Empathise, Define, Ideate, Prototype, and Test. Each stage was used to understand the problem, generate ideas, and create a solution that meets the needs of the target audience.

Emphatise

For this stage, I created 4 user personas to represent the different types of users that would interact with the app.

For each persona, I considered their "5 Cs" (circumstances, constraints, context, criteria, and compensating behaviors) related to waste management and waste management reminders. This helped me understand their needs and motivations better.

  1. Eco-Conscious Emma: Emma is a young environmental enthusiast living in a bustling city like Berlin. She actively separates her waste into different bins, composts organic materials, and participates in local recycling programs. Emma is passionate about reducing her ecological footprint and encourages her neighbors to do the same. She would appreciate an app that provides real-time reminders for waste collection days, educates users about proper waste sorting, and offers tips on sustainable living.

    • Circumstances:
      • Emma faces the problem when she’s juggling work, social commitments, and her passion for environmental sustainability.
    • Constraints:
      • Her busy lifestyle often leads to forgetfulness about waste collection days.
      • Lack of clear information on local recycling centers and drop-off points.
    • Context:
      • Emma encounters this issue at home, especially during early mornings when she needs to take out her bins.
    • Criteria:
      • Solving this problem aligns with Emma’s values of reducing waste and contributing to a greener planet.
    • Compensating Behaviors:
      • Emma sets manual reminders on her phone but occasionally misses them due to her hectic schedule.

  2. Busy Bernd: Bernd is a working professional in Munich. His busy schedule often leads to forgetfulness, and he occasionally misses waste collection days. He needs an app that sends notifications a day in advance, reminding him to take out his bins. Bernd also wants information on nearby recycling centers and drop-off points for hazardous waste. A feature that tracks his waste reduction progress would motivate him to be more diligent.

    • Circumstances:
      • Bernd’s demanding job and family responsibilities make it challenging for him to remember waste collection days.
    • Constraints:
      • Time constraints prevent him from researching local waste management rules thoroughly.
    • Context:
      • Bernd faces this issue at home, especially during evenings when he’s exhausted from work.
    • Criteria:
      • Solving this problem would reduce stress and prevent missed collections.
    • Compensating Behaviors:
      • Bernd relies on neighbors’ cues or waits until he hears the garbage truck to take out his bins.

  3. Senior Sigrid: Sigrid, a retiree in Hamburg, values simplicity. She finds the current waste management system confusing and struggles with the various colored bins. Sigrid needs an app with clear instructions on waste separation, including visual cues. Additionally, a feature that connects her with local volunteers or services for assistance with heavy bins would be helpful.

    • Circumstances:
      • Sigrid’s age affects her memory, and she finds the waste separation process confusing.
    • Constraints:
      • Physical limitations prevent her from handling heavy bins easily.
    • Context:
      • Sigrid encounters this issue at home, especially when she needs to sort waste into different containers.
    • Criteria:
      • Solving this problem ensures Sigrid’s independence and reduces frustration.
    • Compensating Behaviors:
      • Sigrid asks her neighbor for help or leaves her bins outside for extended periods.

  4. Family-Focused Felix: Felix lives in a suburban area near Frankfurt with his family. Managing waste for a household of four can be overwhelming. He wants an app that syncs with family members’ calendars, reminding everyone about collection days. Felix also seeks advice on minimizing waste, especially with kids in the house. Perhaps the app could gamify waste reduction to involve the whole family.

    • Circumstances:
      • Felix manages waste for his family, balancing work, parenting, and household chores.
    • Constraints:
      • Coordinating waste collection days among family members is challenging.
    • Context:
      • Felix faces this issue both at home and during family discussions.
    • Criteria:
      • Solving this problem streamlines family routines and teaches kids responsible waste management.
    • Compensating Behaviors:
      • Felix uses sticky notes or a shared calendar to remind everyone about bin days.

Define

Considering all the user personas, I defined problem statements for each of them:

Problem statements:

  1. Eco-Conscious Emma:
    • Statement: “I am Eco-Conscious Emma trying to reduce waste, but the lack of timely reminders due to my busy schedule makes me feel frustrated and guilty.”
    • Statement: “I am Eco-Conscious Emma trying to educate my neighbors about waste sorting, but the unclear rules due to insufficient information make me feel determined yet overwhelmed.”
  2. Busy Bernd:
    • Statement: “I am Busy Bernd trying to remember waste collection days, but my forgetfulness due to a hectic work schedule makes me feel stressed and annoyed.”
    • Statement: “I am Busy Bernd trying to find local recycling centers, but the lack of time due to work commitments makes me feel overwhelmed and uninformed.”
  3. Senior Sigrid:
    • Statement: “I am Senior Sigrid trying to sort waste, but the confusion due to age-related memory challenges makes me feel frustrated and helpless.”
    • Statement: “I am Senior Sigrid trying to handle heavy bins, but my physical limitations due to aging make me feel dependent and anxious.”
  4. Family-Focused Felix:
    • Statement: “I am Family-Focused Felix trying to coordinate family waste routines, but the complexity due to managing a household makes me feel overwhelmed yet responsible.”
    • Statement: “I am Family-Focused Felix trying to involve kids in waste reduction, but the lack of guidance due to parenting challenges makes me feel determined and hopeful.”

Overarching Problem Statement: In a world grappling with stress and environmental challenges, our project aims to develop an integrated waste management solution that addresses the diverse needs of individuals — ranging from busy professionals and eco-conscious citizens to seniors and families. By providing a platform for community engagement, we strive to minimize the stress and confusion that accompany waste management, fostering a sense of responsibility and empowerment among communities. Our mission is to empower everyone, regardless of age or lifestyle, to actively participate in waste reduction, ultimately fostering a cleaner and greener planet.

Ideate

Considering the problem statements, I brainstormed potential solutions that could address the needs of each user persona. Here are some ideas already with an added priority value (p1: high priority, p2: medium priority, p3: low priority):

  1. Eco-Conscious Emma:

    • Solution 1: Waste Collection Reminders:
      • p1 Implement a calendar view that highlights upcoming collection days and allows Emma to set preferences (e.g., reminders a day in advance).
      • p1 Create a community platform within the app where users like Emma can voluntarily share their waste collection schedules.
      • p1 Neighbors receive real-time reminders based on shared schedules, fostering a sense of community responsibility.
    • Solution 2: Educational Resources:
      • p2 Include an educational section within the app. Provide clear guidelines on waste sorting, recycling, and composting. Use visual cues (infographics, images) to simplify the information.
      • p3 Collaborate with local environmental organizations to curate content and host webinars on sustainable living.

  2. Busy Bernd:

    • Solution 1: Automated Notifications:
      • p1 Upon login, prompt Bernd to input his address and preferred notification settings. Send automated reminders via email or SMS a day before waste collection days.
      • p1 Allow customization (e.g., specific time of day for reminders) to accommodate Bernd’s schedule.
    • Solution 2: Nearby Services Locator:
      • p3 Integrate a map feature that displays nearby recycling centers, drop-off points, and hazardous waste disposal locations.
      • p3 Include operating hours, contact information, and directions.

  3. Senior Sigrid:

    • Solution 1: Visual Guides:
      • p3 Develop an intuitive waste sorting guide with visual icons. Sigrid can easily identify which bin to use based on item categories (e.g., paper, plastic, glass).
      • p3 Include voice instructions for accessibility.
    • Solution 2: Assistance Network:
      • p3 Create a community feature where neighbors can offer assistance. Sigrid can request help with heavy bins or ask for clarification on waste separation.
      • p2 Encourage local volunteers to participate.

  4. Family-Focused Felix:

    • Solution 1: Family Calendar Integration:
      • p2 Allow Felix to invite family members to join the app. Sync the app with their calendars to display waste collection days.
      • p2 Enable notifications for all family members, ensuring everyone is aware.
    • Solution 2: Waste Reduction Challenges:
      • p3 Gamify waste reduction within the family. Set monthly challenges (e.g., reduce plastic waste, compost more) and track progress.
      • p3 Award virtual badges or points for achieving goals.

Prototype

After ideating I created wireframes and content for the prototype of the site which is of course this repository.

Check out the full prototype including wireframes, user stories, and the working site by browsing around the readme and the repository. Also check out the tonne website itself.

Test

The prototype of the site was tested manually and progamatically to ensure that it is working as intended. Testing in the sense of design thinking has not been very extensive yet. This will be done in the future.