This image was created with Figma, MidJourney & Adobe Photoshop.

Bin

Your Personalized Visual Trash Disposal Guide

SKILLS

  • UI Design
  • Interaction Design
  • Iterative Design
  • Usability Testing

TIMELINE

  • 10 Weeks

STATUS

Interactive high-fidelity prototypes were presented as solutions to students at the University of Washington for improving trash segregation behaviors

TEAM

  • Product Manager
  • UX Researcher
  • UX Designer (Me)

CONTRIBUTIONS

Co-led Concept Ideation & Iterative Design Process

As one of the two designers on the team, I collaborated closely with my teammate to create all the visual assets. I prototyped and iterated on the main user flow and interface more than a dozen times based on feedback from users and internal meetings.

As this case study will later explain, there were a few directions that the project could have taken; the concept you're reading now is the result of our eventual decision, which I played a significant role in.

FINAL PROPOSAL

Visual Trash Disposal Guide

This project studies the garbage disposal and segregation practices of students at UW and arrives at a design solution to reduce the cognitive load on the users while segregating trash.

1st Main Feature
2nd Main Feature

NAVIGATE THROUGH THE PROBLEM SPACE

Problem, Users & Pain Points

What is the problem?

Initial Research

"Trash Segregation on Campus"

To focus on our target audience—college students who are often in a rush and cause unintentional incorrect segregation, we decided to prioritize the issue of trash segregation on campus.

Who is the user?

Persona 1 - Nihal

"The Non-segregator"

As one of the primary user types, Nihal represents the huge international student body at the Univeristy of Washington -- while being unfamiliar with the city's segregation rules, they are willing to learn and adapt.

Persona 2 - Robin

"The Recycler"

As the other primary user, Robin represents the Seattle natives who are enviornmentally awared. However, while this group of people are conscious of their segregation behaviors, they are still overwhlemed by how fast the rules are updated and therefore unable to keep up.

What are their pain points?

Affinity Map (Miro)

Decision Overload

A student faces many decisions when trying to segregate in front of a trash bin -- the mental burden usually leads to incorrect segregation.

Inconsistent Rules

Trash segregation rules usually vary from city to city, state to state, country to country, which cuases unintentional incorrect segregation.

Limited Information

The only way to be educated on segregation is through internet or flyers near bin; neither method is efficient for staying up-to-date.

IDENTIFY SOLUTIONS FROM RESEARCH

Ideas, Flow & Prototypes

What is the design question?

Design Question

What are some ideas?

Brainstorming (3 shortlisted ideas from a total of 24)
IDEA 1

Voice Assistant

A voice assistant for trash can that helps users to properly dispose of waste by providing voice guidance and feedback

IDEA 2

Image Recognition

A Scaning app that uses computer vision and machine learning to identify and sort different types of waste

IDEA 3

Visuial Guide

A checklist app that automatically records student's on-campus purchases and provides visual guidelines for segergating the bought items

Persona 2 - Robin

Why choose the 'Visual Guide' idea?

Iwas chosen because it provides users with the segregation information instantly and puts users at the center of the interaction while requiring very minimal effort to interact with. As a solution, it's also comparatively easy to implement technically.

How should the idea work?

Persona 2 - Robin

User Flow

The above diargam represents a complete user flow for the use case of using our product to segregate.

From paper wireframe to high-fidelity prototype

From left to right: paper, low fidelity, mid fidelity, high fidelity

List View for Single Purchases

The above diargam represents a complete user flow for the use case of using our product to segregate.

From left to right: paper, low fidelity, mid fidelity, high fidelity

List View for Bulk Purchases

The above diargam represents a complete user flow for the use case of using our product to segregate.

From left to right: paper, low fidelity, mid fidelity, high fidelity

Visual Segregation Instruction

The above diargam represents a complete user flow for the use case of using our product to segregate.

UNDERSTAND WHAT USERS WANT

Usability Testing & Small Pivoting

What did we learn?

1st Major Improvement

Students sometimes don't throw away items that were bought together. Or they simply don't remember when the items were bought.

Implication

In these two scenarios, neither the 'item' nor 'list' view is very helpful -- a new way to find items is needed.

How did we solve this?

2nd Major Improvement

AI chatbot that allows users to learn about 'trash' with natural language

How does it work?

Users now can ask about how to segregate any trash or ask to have customized grouping of trash.

HOW DOES THE PRODUCT WORK

Final Design

What is the final solution?

Storyboard

Bin.AI

A smart trash management service that automatically loads the items you bought with you student ID into the system and provides visual guidelines for correct segregation

How is it going to solve the problem?

** Problem - Trash is constantly being segregated incorrectly and thrown in the wrong bins on campus.
Mockup

With Bin, students have access to up-to-date segregation information on their phone without having to add the items themselves. The visual guides makes correct segregation very easy, alleviating user's mental burden.

How does it resolve user's pain points?

** Pain Points - Decision Overload, Inconsistent Rules, Limited Information
Student checks app after purchasing coffee.
Student plans on segregating a large amount of trash.

Home Screen (Card View & List View)

Every item that is purchased via one’s Husky’s card (a student ID card offered to UW students) is automatically added to the homepage.

Student reads the visual instruction before disposing trash.
Student asks Bin AI how to segreate the trash.

Visual Guide & AI Chatbot

Users get step-by-step instructions on how to segregate the item they have recently purchased. Every time a user learned and trashed a purchased item, they will be given positive feedback and the environmental impacts.

What does the product look like from the perspective of the school?

** Bonus - This was a question that came up quite often during usability testing.
Bin on Tablet

Tablet Version for Segregation Experts to Annotate

With the tablet version of the app, segregation experts can easily label which bin each part of an item would go.

TEST THE EFFECTIVENESS OF SOLUTION

Impacts & Reflections

How did we measure the success?

Measuring Process

Knowledge of trash segregation before and after

We tested our user's knowledge of trash segregation using the same survey twice -- before and after they used our product.

Did the design work?

Comparison between user's knowledge of trash segregation before and after using Trasure

Yes! It's proven to be effective.

Based on comparison between user's knowledge of trash segregation before and after using Trasure, we can proudly say that our product has shortened the time people spend segregating by 65% and improved the accuracy of segregation by 63%.

All rights reserved.
Last Updated - Mar 2024