COLAB15 - WEB APP

Recarnate

A web based game to help users test their knowledge when it comes to deciding how their trash should be disposed of.

Problem Background  

Mismanaged waste can travel throughout the world's rivers and oceans, accumulating on beaches and other coastal regions. This debris harms physical habitats, transports chemical pollutants, threatens marine life, and interferes with human uses of river, marine and coastal environments. This problem needs to be addressed immediately because mismanaged waste kills up to a million people a year.  While most attention has focused on the effects of marine plastic pollution in the natural world, its effects on people are equally problematic. This debris can directly and indirectly  interfere with navigation, impede commercial and recreational fishing, threaten health and safety, and contaminate food with microplastics. It's estimated that by 2050, the world will have produced 26 billion tons of mismanaged waste.

When looking at the problem closer, there are four factors that lead to waste mismanagement. The top one being lack of public awareness, and “without the right awareness of the effects of poor waste management on efficiency, the environment and human health, it can be hard to find a reason to put the time and effort into waste management. Even if  consumers are aware of multiple waste management methods. There is still a significant gap in knowledge with regard to the process and acceptable conditions particular items need to meet. This makes it difficult to distinguish when and how to correctly dispose or repurpose an item. As a result, the natural reaction most have is to  throw the items in the trash, leading to more and potentially hazardous waste that continues to destroy the environment. 

Research Insights

Additional research on the recycling habits in Europe by Every Can Counts, a non-profit organization, indicated that consumers “feel inadequately informed: there is no consensus on packaging recycling rates; a majority are also unclear about what happens to recycling from the point of collection and would like to know more.” In the US, less than 50% of Americans know the basics of recycling, according to the 2021 Consumer Recycling Habits survey by the Paper and Packaging Board.

To get a representative sample, our user research was conducted in multiple countries. We found that most users are benevolent, thus, interested in giving unwanted materials to those who need them or finding a way to repurpose it. In fact, most tend to consider materials they don't need at the moment as potentially useful in the future, but end up throwing it away or hoarding it because they don't know how to get rid of it or repurpose it. Additionally, we confirmed that around 50% of consumers tend to look for details making up an item to determine how to dispose of it, however, they don’t know exactly what to look for. When they found out it was not properly discarded, they felt “horrible, confused, annoyed, wasteful, and bad”.

Highlights

The following highlights were gathered from both survey and interview questions performed on a total of 35 users.

  • 92% of the users indicated that they think about recycling, composting, and repurposing an item at least 40% of the time and if they are familiar with the item, begin their discarding process by looking for any residue and cleaning it.
  • When asked how they obtain the information necessary to discard appropriately

a. 33% of the users indicated that they search on Google to find that information

b. 40% said that if they do not know how, they just throw it away

c. 20% indicated that they usually ask or consult with someone they know who lives in the same area 

d. 7% indicated that they read the packaging for clues or guidance

Overall, the users are aware that other methods exist, but need to perform additional steps to find out more information. 

User Pain Points

The following pain points were identified during this research:

  • There is a lack of information regarding how to handle these materials

a. Information is difficult to find and time consuming

b. Information is to long to read and process

  • Most users are unaware of the multiple processes and their requirements
  • 50% of users felt “horrible, confused, annoyed, wasteful, and bad” when they found out they did not discard an item correctly
  • Access to alternative waste management techniques (such as recycling, donating, and selling) are limited in some regions

Solution Explanation

Based on our research and user insight, it was clear that information is not readily available and this process is part of a routine where if the users are already familiar with it successfully discard or repurpose it, therefore, our approach is to help consumers develop correct waste management habits and educate them about the various processes that exist.

With the Recarnate web application, users will have the ability to test their knowledge when it comes to deciding how their trash should be disposed of. The following disposal methods will be taught with a selection of 21 items:

  • Recycle
  • Repurpose
  • Trash
  • Compost
  • Hazardous & Electronic Waste
  • Bulk Pickup

Upon starting the application, the user will have the following two options: 

  • How to play: This provides a summary of the rules of the game and it also allows for the user to immediately learn and review details about what makes up each disposal method and why it is important
  • Play Sorting Game: Start the knowledge test where the user can select a specific item or have a random item selected for them

When the knowledge test begins, the user will be able to select an item or have a random one selected for them. The user then will be prompted to drag the item to one of the disposal methods displayed on the page. 

  • If the correct disposal method is chosen, a popup will show up congratulating the user for selecting the correct one and giving the item a second life and display its next form, “what it recarnates into”

a. If the disposal method is trash, there is no second form

  • If the incorrect disposal method is chosen, a popup will show up explaining to the user why their selection is incorrect
  • There are items that can have multiple disposal methods but result in different forms

The key in distinguishing which items correspond to a particular disposal method is to look closely at the item’s details in the picture. 

After their results, the user will have the option to quit or try again.

Low Fidelity Mockups

Hifi V1

Hifi V2

Iterative Design Learnings

After we demoed our first prototype to the users, we learned that:

  • Easy to follow, users know or have an idea of what to do without much input
  • Overall feedback was very positive and the changes required are minimal 
  • Color contrast is good, but could lighten up the background a little bit
  • Users indicated they would like to be able to change the background color, another future feature that can be incorporated
  • Important note: User indicated that random item feature is good but to make sure its the same item does not come up too often - should not be an issue with the 21 items we currently have
  • Interesting point: User indicated that they may use the app more often at the beginning, but over time use it less and less*  

Implementation Details 

Technical implementation

Where is it hosted?

The back-end is hosted on Render ( render.com), we choose to use render for the back-end because the deployment process is less cumbersome and they also offer a free plan which for the start was good enough for our MVP.

The Front-end is hosted on Netlify (www.netlify.com), we choose Netlify for the front-end hosting because they have a free hosting plan with a robust and fast deployment process, and the builds take a very short time compared to other hosting providers.

What is your tech stack?

Front-end: React

We chose to use React for the front-end because it’s very responsive, stable and can be efficiently tested 

Back-end: Ruby on Rails, PostgreSQL.

We chose to use Ruby on Rails for the back-end because it easily integrates with the PostgreSQL database which is a robust database management system.

Technical challenges

What was the hardest part of the development?

Being the sole developer, I had a lot of decisions to make on my own in regard to the technologies to use and the entire software development life cycle, this was the hardest part for me.  The hardest part was balancing progress on app development while learning new frameworks in an effort to speed up development.

Does your app have any scaling issues?

Yes, there are some limitations based on the free hosting plans. The back end is hosted on render.com with limitations such as a temporary database and limiting free Web Services to a single instance. In addition, applications experience variable load, so as our user base grows to meet the user expectations we would have to upgrade to paid plans for both our front-end and back-end.

What are some key takeaways?

Never underestimate the power of teamwork and consistency. Teamwork is very important when it comes to building a quality product. I would like to thank my teammates for being consistent, cooperative, and responsive.

Future Steps

Though there are no current plans to continue this project, these are the  next features we would focus on:

  • User Experience Improvements

a. Incorporate user profiles to track points and items that have been recarnated

b. 2P Mode to test knowledge against others 

c. Timed mode

  • Game Improvements

a. Ability to create an item from scratch and test your knowledge

b. Ability to customize game based on specific locations to accurately display disposal methods available 

  • Information Improvements

a. Incorporate a resource center

- Provide more details and information about disposal facilities near the user’s location

- Provide guides on repurposing items + instruction

Resources:

  1. The Guardian - Mismanaged Wastehttps://www.theguardian.com/environment/2019/may/14/mismanaged-waste-kills-up-to-a-million-people-a-year-globally 
  2. EPA United States Environmental Protection Agency -  Impacts of Mismanaged Waste: https://19january2021snapshot.epa.gov/trash-free-waters/impacts-mismanaged-trash_.html
  3. Green Bank - 4 Factors That Leads To Poor Waste Management And How To Combat Them: https://blog.greenbankwastesolutions.com/factors-that-leads-to-poor-waste-management-and-how-to-combat-them 
  4. The Orange County Register - Earth Day: Here’s how much plastic waste is projected in the world by 2050: https://www.ocregister.com/2022/04/22/earth-day-heres-how-much-plastic-waste-is-projected-in-the-world-by-2050/ 
  5. Paper + Packing Boad : New Survey Reveals Gaps in Consumer Recycling Behavior and Knowledge: https://www.paperandpackaging.org/sites/default/files/2021-09/New%20Survey%20Reveals%20Gaps%20in%20Consumer%20Recycling%20Behavior%20and%20Knowledge%20-%20For%20Immediate%20Release_1.pdf
  6. Every Can Counts: RECYCLING HABITS AND ATTITUDE IN EUROPE 2020 https://everycancounts.eu/wp-content/uploads/2020/12/ECC_SURVEY_FULL_REPORT.pdf

Learnings

Product Manager Learnings:

Gabby Larios

You will make a plan but that plan is bound to change! It has been a bumpy journey but that makes all the more meaningful and crucial because it's in moments like these that truly test your skills and experience and help you improve. We managed to push through and it’s been humbling and incredible to build this MVP alongside Lami and Galiwango. 

This project has inspired me to continue on my growth as a product manager and obtain the experience of managing a product in a completely different industry from my current one. An added bonus was that  I was able to incorporate both my artistic hobbies and my passion for sustainability into a live product. 

Designer Learnings:

Lami Williams

During the 8-week tech program, I have had the opportunity to work as a product designer for a game (a completely new experience).  have gained valuable experience in conducting research, creating a brand identity, designing a few icons, as well as the user interface for the game.

One of the most rewarding aspects of this experience has been the opportunity to focus on my own part of the work, while also being able to sync in with the product manager and developers as needed. This has allowed me to develop my skills and knowledge in a collaborative environment, and I have thoroughly enjoyed the chance to work with a team of diverse people towards a common goal.

Overall, this experience has been both fun and highly educational, and I feel that I have learned a great deal about the role of a product designer. I am excited to continue building on these skills and to see what other projects and challenges lie ahead.

Designer Learnings:

Jo Sturdivant

  1. Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
  2. Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
  3. Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Galiwango Ananiya

It always seems impossible until it’s done. The Co.Lab journey has rigorously tested my collaboration skills, multitasking skills, and ability to handle pressure. It’s been a challenging but rewarding journey. For the first time, I got a chance to work with a complete team of a product manager, a product designer, and partly with a fellow developer. These eight weeks have helped me grow as a developer, made new incredible connections, and increased confidence in both my technical and soft skills.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

&

Developer Learnings:

Maurquise Williams

&

  1. Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
  2. Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
  3. Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning