A mobile app that rewires habits
and transforms community.

Scope
Mobile App Design
Roles
UX & UI Designer
Time
Nov to Dec 2021
Tools
Google Survey
Figma
Adobe XD
Excel
Pen & Paper
Feed the Bins App

Feed the Bins

Overview
A reward-approach app that merges location tracking technology and gamification to rewire the act of littering.
What's the story?
Problem Context
During one of my morning walks around the neighbourhood, my earphones had run out of battery. So, I begrudgingly had to walk with my own thoughts sans distractions. That’s when I took notice. Trash. Trash everywhere. Half-empty coffee cups crumpled on the curb. Dishevelled plastic bags strewn on tree branches. A single sock lying in the middle of the road.

I was horrified with the sight I was taking in. “Why is there trash everywhere when a trash can was just around the corner?”, I thought. It just didn’t make sense to me because trash cans were plenty in my neighbourhood. This ignited an emotional concoction of frustration and annoyance which turned into a brainstorming session inside my head. This is when Feed the Brains began materializing. 

Objective

When I got to work on Feed the Bins, I was inspired by the popular game of Pokemon Go. Although I wasn’t obsessed with the game, I knew so many others who were. The use of AR alongside GPS location to locate, capture, train, and battle virtual Pokemon characters through the app proved to be a smashing success with a diverse range of audiences.

I wanted to piggyback the GPS location approach for Feed the Bins without incorporating the use of VR and AR to make this accessible and engaging for scalability. The first challenges to address for me were the issues of “why litterbugs litter in the first place” and “what would motivate them to change this awful habit”?

Design Thinking Process

Empathize - Define - Ideate - Design - Prototype

View Final Solution
 
Discovery
A design focusing on habits.
Design Focus
1 | How do we incentivize our users to change their habits?
3 | What types of technological functions can we leverage?
2 | What features do our users want for maximum engagement?
4 | How do we ensure Feed the Bin's overall sustainability?
To discover is to understand.
Discovery Steps

Instead of diving headfirst into designing the app, I took the discovery route to address the core challenges of “why litterbugs litter in the first place” and “what would motivate them to change this awful habit”. I wanted to understand more about the thoughts, emotions, and consensus were regarding litter. This phase was also important to validate if this project was even something of interest to others and not just for myself. To discover and understand, I mapped out the following steps.

Competitive Analysis

When this idea first came up, it was also met with the skepticism that something of the sort would’ve been employed by the City of Toronto already. That’s why I started this entire journey with conducting Competitive Analysis.

To my surprise, the TOWaste app was the only one that’s being used by Torontonians. To understand what current users of TOWaste were saying about the usability of the app, I went and read user reviews from both Google Play and Apple Pay. TOWaste’s functions include household trash bin pick-up schedule, a search tool for users to sort waste (Waste Wizard), and lastly, a drop-off depot map. None of these features targeted the root cause of litter or even addressed the problem. There were also tech bugs, update issues, and lack of notification with garbage pickup. The only feature users left good reviews about was the Waste Wizard search tool. This was important news since it was a feature to be highlighted for Feed the Bins.

User Research

The next process in the discovery phase was to substantiate and collect quantitative data that would be helpful for the overall methodology. I had to identify the target users and their approaches with the app. Using Google Survey, I crafted questions that were designed to gauge viability.

 

23 individuals responded to my survey and here were my summarized findings.

100%

of respondents own a smartphone - all of them have their phones with them all the time.

of those who use or plan to use a habit-changing app believe that the app can indefinitely help them build better habits.

94.7%

95.6%

agree there is a litter issue with all respondents feeling negative emotions when they see litter.

21.7%

have voluntarily picked up litter to dispose it with the act of it evoking a sense of pride and happiness.

82.6%

use or plan to use an app to form a better habit and the top features respondents like include:

accountability (reward),

data visualizations, community, & simplicity

with less priority placed on activity prompts and social media.

*Results based on the answers provided by 23 respondents.

User Personas

Based on the survey findings from the User Research process, I was able to define who and what the Feed the Bins target users would be. I wanted to empathize with my user personas as a designer – to relate when I move on further in the designing processes.

A woman

Age | 27

Occupation | Financial Advisor

Location | Toronto, Canada

Profile | A Toronto native, Janet grew up in the city with her family. Currently working as a financial advisor with a top bank.

"Growing up in Toronto, it is very saddening to see the increasing need to tackle the city-wide issue of litter. It would be nice to see an app that would contribute to bettering people's behaviour."

Janet, "The Conscious Environmentalist"

Behaviour | Janet grew up in a household with pets. She has 2 younger siblings and is currently living with her family in an up-and-coming busy neighbourhood. She rides the bike to work on most days and is responsible for taking out the garbage on pick up days since she is an early riser. Her family has been following a vegan diet for 3 years now.

Motivation | Being a vegan, she and her family are doing their part to eliminate the implications associated with eating meat as they regard animals as equal. They are also big fans of the nature and Janet has noticed the growing amount of litter around their neighbourhood. They family has discussed moving out of the city but is currently trying their best and doing their part for the environment.

Frustrations | Living in a bigger city with a diversified culture and an expanding neighbourhood, Janet has witnessed many acts of people not picking after their pets. Though she hasn’t seen anyone actively littering, she noticed that litter is on every street and the city has a difficult time collecting the city public bins leading to people disposing their garbage whenever is convenient.

Lifestyle | Janet and her family keep active by heading for a hike every other weekend. They currently have a cottage up north and enjoys their summertime there. The family drives a van that allows more passengers per trip. Otherwise, Janet much prefers biking, walking, and taking the public transport when she’s in the city.

Device Usage | Janet has a device monitoring app installed to limit her device usage at 3 hours per day. Besides the use of Instagram to check on her friends, Janet uses her phone to communicate with her family and friends. She has recently deleted a lot of other social media apps to cut her usage. She still has the TOWaste App on her phone but consults it less since it’s not very reliable.

Man with his dog

Age | 31

Occupation | Engineer

Location | Toronto, Canada

Profile | Originally from Vancouver, Ronald moved to Toronto to pursue his career in engineering.

He is currently living with his dog, Kona, in a downtown Toronto apartment close to where he works.

"Work is my top priority for me but my dog, Kona, is also an important facet of my life. I care about his well-being and I don't like the fact that our streets and parks are littered with trash."

Ronald, "The Dog-Loving Workaholic"

Behaviour | As a busy individual, Ronald strives for efficiency in all aspects of his life. He prioritizes his work and his dog first in which everything else comes second. Living in the downtown apartment, he takes the public transportation for work and has access to everything he needs within 3 blocks of where he lives. He orders out at least 4 nights out of the week and spends most of his time either working out, playing video games or walking his dog.

Frustrations | Since living at the apartment for about 5 years now, Ronald has noticed an increased traffic of people around the city. With that also brings a growing amount of garbage on the streets. There have been too many close calls with Kona eating littered food left on the sidewalk or picking up garbage while they were on walks especially in the park where they go through.

Motivation | At his current stage of life, Ronald’s focus is advancing in his career. He has little time to participate in anything other than his dog and the essentials. He doesn’t travel much and stays within the Toronto core most days although he does visit a nearby city park to meet up with other dog owners once every few days. During the summer, he spends his lunch time at the park and enjoys walking Kona through the park after work.

Lifestyle | Ronald doesn’t drive and relies heavily on the public transportation which is about a block away from his apartment. On his busier nights after work, Ronald usually picks up food from nearby. All personal shopping is done online and delivered to his place. He disposes most of his household litter in the garbage bin that is collected by the apartment. Rarely does he sort compost and recycling.

Device Usage | Ronald is on his laptop everyday for at least 8 to 10 hours for work. In addition to work, he is a huge participant on Instagram which serves as a procrastinating app when he has downtime. He also likes to play Candy Crush on his phone and is currently chasing his ranking among his friends.

User Stories

In addition to the user personas, I wanted to highlight the common high priority needs for new and returning users of Feed the Bins. New users have the added task of onboarding and signing up to become eventual returning users. To capture both user goals, I listed out the possible stories for each user perspective.

As a new user,

I want to create an account.

I want to start doing my part to clean up the streets.

I want to be rewarded doing the right thing.

I want to explore this app’s potential to change my habits.

As a returning user,

I want to sign into my account.

I want to manage my account settings.

I want to see my progress.

I want to compare my progress with others in the leaderboard.

I want to track the nearest bins and be given the most direct route there.

I want to quickly scan to see if an item is recyclable or trash.

I want to be held accountable for my progress.

I want to designate my own private competition with friends.

I want to ensure that my data is shared only when I want to.

I want to earn points.

I want to visualize my points.

User Flow

To map out the process users go through in Feed the Bins, I mapped out a user flow to organize the construction of the app which served as the basis for my Information Architecture phase.

User Flow
Overview
A reward-approach app that merges location tracking technology and gamification to rewire the act of littering.
What's the story?
Problem Context
During one of my morning walks around the neighbourhood, my earphones had run out of battery. So, I begrudgingly had to walk with my own thoughts sans distractions. That’s when I took notice. Trash. Trash everywhere. Half-empty coffee cups crumpled on the curb. Dishevelled plastic bags strewn on tree branches. A single sock lying in the middle of the road.

I was horrified with the sight I was taking in. “Why is there trash everywhere when a trash can was just around the corner?”, I thought. It just didn’t make sense to me because trash cans were plenty in my neighbourhood. This ignited an emotional concoction of frustration and annoyance which turned into a brainstorming session inside my head. This is when Feed the Brains began materializing. 

Objective

When I got to work on Feed the Bins, I was inspired by the popular game of Pokemon Go. Although I wasn’t obsessed with the game, I knew so many others who were. The use of AR alongside GPS location to locate, capture, train, and battle virtual Pokemon characters through the app proved to be a smashing success with a diverse range of audiences.

I wanted to piggyback the GPS location approach for Feed the Bins without incorporating the use of VR and AR to make this accessible and engaging for scalability. The first challenges to address for me were the issues of “why litterbugs litter in the first place” and “what would motivate them to change this awful habit”?

Design Thinking Process

    Empathize                         Define & Ideate                       Prototype                          Iterate

Competitive Analysis

User Research (Survey)

User Personas

User Stories

User Flows

Information Architecture

Mind-mapping

List-mapping

Wireframe

Interactive Prototype

Usability Testing

Preference Testing

A&B Testing

Information Architecture
Organizing effectively the design structure.
Architecture Approaches

Through the discovery and understand phase of Feed the Bins, I was confident that the idea was not only viable, but it had relatable users with user goals. While the user flow was important to create an initial planning of the app, the Information Architecture phase saw to fulfill the key features and structure that directly focused on addressing the initial challenges.

Design Focus

Mind mapping and list making were methods I used to refine the provoking user thoughts and feelings by generating words and emotions. The results of these activities helped me construct the copywriting and features that would be included in Feed the Bins.

1 | Mind-mapping
2 | List-making
3 | Wireframing
Mind Mapping

App

accountability

motivation

data-centric

human-centric

simple

educational

social

reward

game

tracking

Reward

data

badges

competition

leaderboard

Clean Streets

positivism

vibrancy

gratification

less trash

influential

community

contrasting

giving back

feeling good

Wireframing

After the validation, empathizing, and structuring, I started the wireframe process to construct the main screens that would embody the key features essential for Feed the Bins. I found it helpful to sketch out the layout and general flow of the screens then transforming them into low fidelity wireframes on Adobe XD.

Low-Fidelity Wireframe
Design
Formulating all the design aspects.
Moodboard

The next step for me was to define a moodboard that served as a style guide for the app’s design. It was useful for me when designing to keep the UI consistent throughout the app.

Mood Board

Colour Palette

The colour palette drew inspiration from the mood board including the dark blue of the can along with the light blue of the sky to showcase the contrast between man made material versus nature. Blue is picked to convey trust and comfort and will be used as an accent colour of the app.

 

Complementary to the blue accent colour, the yellow is chosen as a display of vibrancy and upbeat energy since Feed the Bins app is a game made to combat the growing issue of litter. The body text colour palette consists of white and grey scale as a safe and contrasting choice to the accent colours.

C2B09E
Font

0850AF
Accent

FFDE59
Accent

545454
Font

5CE1E6
Accent

F3F3F3
Font

Font Selection

Alata is a geometric low contrast sans design that is a little old-fashioned with a splash of eccentric undertone which is why I selected this font as the font personality fits well into the gamification of the app whilst conveying the seriousness of the app’s mission. Alata will be used mainly for the titles or for the eye-catching text.

Paired with Alata is Poppins which is a geometric sans serif typeface that has basis on circular geometry. The legibility and the curvature of the font is a compelling font made for the body of text of the app.

Prototype

With the moodboard serving as a style guide for the prototype, I started creating multiple screens for the key features that Feed the Bins would include. Using Adobe XD and Figma, I designed all UI aspects that were based on all the accumulative data from each preceding phases. Each design component and interaction within the prototype would eventually address the initial problem the project was set out to solve.

Prototype
Usability Testing
Testing Feed the Bin's usability.
Project Objective

I wanted to the final prototype to be user-friendly and engaging and to gauge Feed the Bins’ overall usability, I conducted usability testing with 8 participants to collect qualitative feedback. In addition to usability testing, I also performed several preference tests to flesh out the copywriting and UI aspects of the app.

Test 1 | Progress Landing Page Preference:

I conducted A/B Testing to decide whether or not the dashboard with an overview features would be preferred over the dashboard with the progress graphs.
 

Survey Results:

Of the 8 survey respondents, 6 prefer the dashboard with the overview features as it allows for simplicity by summarizing the day's stats and gives users an oversight of the user's status.

Solution:

Taking into account the majority preference of A (dashboard with the overview features), I committed it as the default Progress Landing page. In addition, I linked B (dashboard with progress graphs) as a more detailed look into the user's progress stats and badges with a tap on either section.

Test 2 | Feed the Bin Icon Preference:

I conducted A/B Testing to see if the pizza icon for the "feeding" function conveys the right idea in terms of the user goal of the app. Other suggestions regarding the best fitting icon were discussed if the test respondents disagree with the use of the pizza icon.
 

Survey Results:

Of the 8 survey respondents, 2 respondents think the pizza icon was suitable for the app. 5 respondents suggested the use of a garbage bin icon. 1 respondent thought it would be better with text instead.

Solution:

Taking into account the majority preference of a garbage bin icon, I revised the main "feeding" function from previously, the pizza icon, to a garbage bin icon to accurately identify with the user goal of the app.

A | Dashboard with Overview

Test 1 | Dashboard with Overview

B | Dashboard with Graphs

Test 1 | Dashboard with Graphs

A | Pizza "Feeding" Icon

Test 2 | Pizza Icon Screen 1
Test 2 | Pizza Icon Screen 2
Test 2 | Pizza Icon Screen 3
Test 2 | Pizza Icon Screen 4
Test 2 | Pizza Icon Screen 5

B | Garbage Bin "Feeding" Icon

Test 2 | Garbage Bin Screen 1
Test 2 | Garbage Bin Screen 2
Test 2 | Garbage Bin Screen 3
Test 2 | Garbage Bin Screen 4
Test 2 | Garbage Bin Screen 5

Test 3 | Should Feed the Bins add in an AI trash classification feature and why?:
 

Survey Results:

Out of the 8 survey respondents, 5 thought that incorporating an AI trash classification feature on the app would be useful when determining whether or not an item is trash or recyclable. The respondents all felt that it would promote the app's user goal of reducing trash by eliminating ambiguity whilst educating users.

Solution:

When users decide to locate the nearest bins for proper trash disposal, they will be able to choose between using the AI trash classification feature or forgoing the feature  to start the tracking. The additional pages shown here dictate the flow of the use of the new feature.

After | AI Trash Classification Feature

Test 3 | AI Feature Screen 1
Test 3 | AI Feature Screen 2
Test 3 | AI Feature Screen 3
Test 3 | AI Feature Screen 4
Test 3 | AI Feature Screen 5

Test 4 | What data visualizations would correspond to user engagement and promote motivation in the app?
 

Survey Results:

All of the 8 survey respondents thought the badges were a great touch to their overall sense of achievement. 5 respondents liked the lifetime stats since it really showcased the impact they had, while the other 3 felt indifferent about it. As for the weekly stats, there were a mix of thoughts regarding the data comprehension with half of the respondents liking the breakdown between the trash and recycle items but half of the respondents having to spend extra time to decipher the different colours and breakdown.

Solution:

Under the detailed Progress page, I have shifted the badges section to the top of the page as all respondents thought the use of it corresponded well to the app's goal of promoting users' sense of achievement. I kept the lifetime stats in between the badges and the weekly stats and all things the same. As for the weekly graph, I have decided to have a single bar to represent the day's stats instead of breaking it down into trash and recycle items. This will eliminate the confusion and be easier for user comprehension.

Before | Progress Landing Page

Test 4 | Progress Landing Page Before

After | Progress Landing Page

Test 4 | Progress Landing Page After

Further Usability Testing

Feedback 1 | Profile Icons:

All profile icons are clickable to access the profile page.

Feedback 1 | Profile Icons Screen 1
Feedback 1 | Profile Icons Screen 2
Feedback 1 | Profile Icons Screen 3

Feedback 2 | Education Landing Page:

Creating an Education Landing Page for users.

Feedback 2 | Education Landing Page Before
Feedback 2 | Education Landing Page After Screen 1
Feedback 2 | Education Landing Page After Screen 2

Before | Education Landing Page

After | + Education Landing Page

Project Takeaways
What I learned in this case study.
Main Takeaways

Based on the usability feedback, Feed the Bins was a great starting point to kickstart the conversation and the design notion. Further collaboration and testing would be valuable to materialize the app into an arsenal to tackle the litter issues in Toronto which could later be used in other metropolitan cities.

One major takeaway throughout this process was that most ideas were inspired from personal needs but to ensure that your designs are useful and understandable, user research and user testing are highly important. Personal judgements are always subjective, but user data are not and designs ultimately need to fulfill user needs. Testing your designs to see what works, what is important, and what matters to users is extremely valuable.

Challenges

Feed the Bins didn’t have much of a design comparison or blueprint for how the app should be structured or designed. No existing data or analysis were available in the discovery phase especially when it came to competitive analysis. The biggest challenge was to keep focus on the initial challenges as a north star to guide us through the process in addressing the rationale behind each of my design decision.

As a sole designer for this project, I also took on multiple roles in crafting research strategies, formulating information architecture, and designing the UI features. It was a feat to perform responsibilities framed within each role and it was a learning practice at times.

Improvements

If I had to revisit this project again, I would place usability testing before creating a high-fidelity prototype. Usability testing is important throughout all design process to progressively gauge usability with potential users. Having a mid-fidelity prototype that users can interact with provide the basis to test out important tasks that would be used by others. Any improvements could be iterated before the final prototype which would minimize additional time spent.

Lastly, rounds of iterations were made to this prototype to encompass user research, forcing me to not get attached to my designs and to listen to the data. Most times, I learned, simplicity is key.