A mobile app that rewires habits
and transforms community.
Scope
Mobile App Design
Roles
Product Designer & Researcher
Time
April to Dec 2021
Tools
Survey Monkey
Maze
Adobe XD
Excel
Miro
Zoom
UsabilityHub
Google Anlytics
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.
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.
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.
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
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.
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.
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.
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
B | Dashboard with Graphs
A | Pizza "Feeding" Icon
B | Garbage Bin "Feeding" Icon
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 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
After | Progress Landing Page
Further Usability Testing
Feedback 1 | Profile Icons:
All profile icons are clickable to access the profile page.
Feedback 2 | Education Landing Page:
Creating an Education Landing Page for users.
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.