Interaction Design / UX Design
Reimagining the technology to track
your trash
Role
UX/UI Designer (class project)
Platform
Mobile (Android)
Duration
Sep '21 - Dec '21 (3 months)
Overview
Project
Component Library Design, UX/UI Design
Course
INST 711 - Interaction Design Studio
With a surge in our everyday waste consumption, it has always been a messy process to manage our waste. The app will provide real-time updates on the fill-levels of the user's bins to eliminate them from overflowing. And with different kinds of recycling systems employed everywhere, it further helps the users identify where and how to dispose / recycle a specific item when in doubt.
Humans like to be nudged to do things they want to amongst the other things they are juggling between. Making it easier to follow a trash routine synchronous to the county's schedule, the app also alerts the user on trash days and when the bins are empty.
I designed the product as a speculation that can act as a catalyst for collectively redefining our relationship to reality and to influence the future culture.
01. Identifying the problem
Set in the future, this is a plausible world.
The world has become more populated. People live in extremely dense urban communities. This scenario has led people to accumulate more and more waste, both residentially and commercially.
The trash collection systems have been technologically upgraded where the community trash bins are built with ultrasonic sensors which enables to measure fill-levels in bins allowing real-time waste monitoring. The smart trash tracker will help people track the amount of trash in the community bins nearest to them and the collection cycle times to aid them in avoiding unnecessary trips to bins that are full and eliminate overflowing bins.
02. Ideating the solution
As I defined the concept, I started to map the user journey and how the entire system will work. I classified the user goals into four different scenarios to when the app will fulfill the user's needs:
Quick Access
Bins status
Next collection time
Search/Scan/Sort waste
.png){kind=small}
Collection Points
Find nearest available waste bin
Sorting Guide
Search/Scan/Sort waste
.png){kind=small}
Calendar
Trash Days
Set Alert
a. How will the app work?
-
Onboarding, the user is prompted to enter their building number/address.
-
Based on the given location, the app feeds the user with the relevant bins’ statuses and the next collection time of their county.
-
By clicking on the status card, the user will see the available capacities of the bins, and how many more bags it can hold.
-
Users can use the maps to locate the nearest center to dispose something specific like batteries, paint, etc.
-
Users can also search using the sort feature to identify where and how to dispose of a particular item.
-
They can set reminders to alert them when the bins are empty using the app's calendar.
b. Information architecture
03. Iterating the idea
Multiple low-fidelity wireframes of the screens were sketched and iterated to mainly understand the functionality and flow of the app. Efficient use of the digital space, layout and choice of screen elements were explored to know what the users would need from the design.
Scan to Sort
User is prompted where to throw the item after scanning it
Search to Sort
User is given suggestions based on their input in the search field
Set Alert
User can use the toggle to turn the alert on and off for the next collection cycle.
Locate Truck
User can choose to track the truck along its route to help them make more informed decisions
Find Bin
User can use the maps' search field to find nearest bin and get directions
Filter Bins
User can use filters to narrow their search for the nearest bin for better and more relevant suggestions
04. Design
a. The Design System
Typography
Put together a type system to support the needs and reflect the purpose of the app and its content.
Typeface
Larsseit emphasizes cleanliness, readability and objectivity. The typeface is used for all headlines, subtitles, body, and captions, creating a cohesive typography experience. Hierarchy is communicated through differences in font weight (Light, Medium, Regular), size, letter spacing, and case. These components are custom designed, and inspired by Material Design's type system.
Color
The chosen color palette reflects the app's purpose towards a more sustainable environment and ensures accessible text
Primary
Neutral
Error
Components
Designing interactive building blocks to create a good user experience
The list of components to build: CTA buttons, Navigation Bars, App Bars, Menus, Dialog Boxes, Cards, Chips, Progress Indicators, Snackbars, Checkboxes/Radio Buttons/Toggle Buttons, and Lists
b. Final Screens
Using the built component library, the iterated paper prototypes were converted into digital designs.
© madras talkies
05. Prototype
a. Stitching it together
The minimum amount of time it takes for a person to perceive the state of the world, think about what to do and act on that impulse is around 240 milliseconds.
The three processors: perceptual, cognitive and motor Swink, S. (2009) Game Feel
I designed the app's content to load in an order that the user is given the impression that the data is actually being fetched from their bins. The static content such as the text, icons, and the background is displayed first. After a short delay the circular progress bar representing the bins’ live status is animated to load from 0 to its current status. The app then displays the Full/Almost Full/Empty tag based on the fetched data.
Create
Create and combine the different states as variants to animate a smooth flow.
Connect
Connect the screens using smart animate - after delay/on-click
Animate
The connected screens are animated set to using ease in/ease out for 300 ms to comply with human perception
b. Interactive Prototype
Try it out!
Reflection
Speculative design gave me an opportunity to stretch my imaginations and develop new and boundary-pushing systems for the future. I found the process to address issues and answer tough questions that we currently create for ourselves. This project helped me use the possible futures as lenses to better understand the present, and what we want and don’t want to see in our future as a society.
I learned how digital spaces are curated from the bottom up by creating a design system from scratch. It showed me how important it was to explore typography and color to express the product's purpose and functionality. It also taught me how the metric of human perception (reaction time) plays an extensive role in interaction design.
As this course was a studio project, the process involved a lot of critique and collaboration with peers and the professor. Continuous iteration from their feedback helped me validate my design decisions and address any issues within the designed interface.