thank you for looking

- iren w

Raccoon - Making trash education accessible and sustainability a habit

Time: 48hrs (Citrohacks hackathon)

Tools: Figma, Procreate

Type: Mobile App Design

Role: UI/UX Designer

Team: 3 (Irene, email for names)

Overview

This project was done as a part of Citrohacks 2023 hackathon and received *Best Sustainability Hack* reward.


Raccoon aims to take on the gaps in knowledge about proper trash disposal, providing opportunities to learn more about a more climate change and ways we can slow the effects.

The Problem

There were two key themes that Raccoon aims to address (1) social good: how can we benefit a large number of people and make a positive impact on society? and (2) sustainability: how can we live harmoniously with our planet.


With CO2 emissions rising, our team wanted to address the issue of climate change. More specifically, we wanted to address the surplus amount of waste in the landfill. How can we take part in being more eco-conscious and education and inspiring others to also take action?

The waste sector is one of three key methane emitting sectors — following agriculture and oil and gas — and is responsible for about 20% of human-driven methane emissions globally. (Clean Air Task Force)

Tackling global climate change can start from revising what we recycle in the waste sector. In 2020, California produced 77.4 million tons of trash. Of that the state landfilled 40 million tons of material and recycled just 42 percent, or 32.5 million tons. For reference, California has a recycling goal of 75 percent of all materials. (CalRecycle)


The Barrier

Thinking through this project, we realized that people often don’t know how to sort trash and/or where to start. Improper waste management leads to a disproportionate amount of recycling and possible donations going into our landfill - negatively affecting our climate. People often don’t know how to separate trash and other alternatives to immediately throwing it into the landfill bin. And people often don’t know where to find local recycling centers and don’t recycle.

“The results showed that 32% of Americans are unable to correctly identify the universal recycling symbol signifying a product can be recycled…This highlights the knowledge gap between consumers who are looking to do their part and businesses who are already stepping up to the plate.” (New York Post)

The Process

As this was a hackathon the user research process was limited due to the 48 hour time limit. However, it was still important for us as a team to have some key aspects such as competitive analysis and wireframing to help ground our solution and to also organize the design process.

Competitive Analysis

Competitive analysis was done as we wanted to see how we could improve current solutions and how we can do differently.


We looked up recycling websites to see what worked and what could be improved. We found inspiration from many websites that provided resources for recycling. Although they do a good job in listing locations and providing info, they felt unusable or unintuitive. It was difficult to understand where someone could donate something because it wasn’t clearly pointed out on a map. Additionally, none had ways to encourage people to create a healthy habit of recycling properly.

SF Recycle

CalRecycle

Recology

Re:Source

SF Environment

Key Screens

Raccoon hopes to make information about trash sorting more accessible for households and provide resources and directions for a more eco-conscious lifestyle. The app aims to make learning about "trash" entertaining by incorporating a "scavenger hunt"and a quick sorting. Based on the competitive analysis, some of the main key features that the team decided to focus on are:

The trash questionnaire

Users input the X trash type and learn (1) how to handle X trash type and (2) sites that accept X trash type

This feature provides a quick way for users to find out how to handle the trash they’re unsure of what to do with

The scavenger hunt

Users can view a map of different recycling, donation, or waste collection sites. Users are also able to keep track of the sites they visited

This feature provides a game aspect to the app as users can check off disposal sites they’ve visited and learn about other sites that they haven’t visited yet, thus unintentionally learning more about proper trash disposal methods

The quick trash game and infographic

Users play a sorting game to have an understanding of what they know about trash disposal. Additionally, there is an infographic where instead of searching, users could scroll to see what type of trash is in what type of bin

This feature provides a way for users to understand whether or not they will need to learn more about proper trash disposal

Wireframing

As we had 3 designers, the features were split amongst the three of us. I was tasked with “the scavenger hunt” feature and created the finals screens for it. Despite the time limit, I wanted to make sure we went through the wireframing portion of the design process as it helps give insight into how the product flows, any gaps we might need to address, and help provide general structure to help with the designs later on.

Above, you can see the wireframes for all of the key features.

The Solution

Raccoon hopes to make information about trash sorting more accessible for households and provide resources and directions for a more eco-conscious lifestyle. The app aims to make learning about "trash" entertaining by incorporating a "scavenger hunt" and a quick sorting function.

The trash questionnaire

The item search was a way for people to quickly search up an item and where it should go and which locations they can go to throw it away.

The quick trash game and infographic

The sorting game was a way for people to gain a quick understanding of their own "trash" knowledge. Afterwards, you are provided with an infographic that includes as much information on the different types of sub-"trash".

The Scavenger Hunt

The main goal of this feature was the make exploring the different disposal sights interesting. Looking at the starred locations can indirectly teach users where they can dispose certain types of trash and what trash should handled with a certain kind of care. This feature was inspired by the SFPL Library Scavenger Hunt where people could collect library specific stickers to complete a map of all the SF public libraries. I wanted to make this section “fun” and appeal to a younger audience to help bring awareness to climate change and social change.


Design Choices:

The stars are supposed to be like “gold stars” reminiscent of childhood and what you might have gotten on your homework assignments

The footprints icon after “scavenger hunt” are supposed to represent carbon footprint and the steps you are taking to reduce carbon emissions

There is a sustainability fact after you visit a site. These facts are based off of reliable articles and sources and will be linked for users to continue learning about. These facts are meant to boost someone’s ego and make them feel good about the good they’re doing

What makes Raccoon different?

To encourage people to create the healthy eco-conscious habit of proper trash management, we wanted to make a more intuitive UI that makes it easier for users to know where they can donate/throw away trash and also incentive users to keep visiting donation sites and to keep properly throwing away their trash by creating a dashboard and scavenger hunt.

Raccoon aims to intrinsically motivate users to recycle and donate by providing step-by-step instructions informing them what type of trash category it falls into and where they can find a special handler facility - limiting the amount of unsorted trash that goes directly to the landfill.


Test out the prototype below!

Reflection

If I were to do this project again knowing what I know now:

more cohesive designs

I would encourage my team and I to have a longer discussion about our design system so that we had something that was more cohesive and flowed together better

taking notes during competitive analysis

I would have notes on which sites we drew inspiration from and detail features from which site that worked and did not worked


Overall, I collaborated with two other undergraduates to create this interactive prototype. I was able to help my teammates with understanding how to better use/navigate Figma. This was my first hackathon and it was an extremely gratifying experience. I'm so lucky that my first experience went as well as it did because my teammates were equally as excited and equally as new to this. I didn't realize just how quickly I was able to come up with a game plan and able to come up with a list of action items that worked with my teammates. I worked primarily on the map portion of the prototype. I'm sure this is common with many hackathon projects, but I wish I had more time to work on aspects of this prototype such as the sorting game and the item search, but regardless I'm still proud of what the team and I was able to come up with. 💖

Create a free website with Framer, the website builder loved by startups, designers and agencies.