Litterbug
Gamifying Environmental Action
TEAM
Irena Zheng
Jaycee Helmer
Matt McConnell
Hannah Blum
TIME FRAME
12 weeks
TOOLS
Figma
Adobe Illustrator
Optimal Workshop
FigJam
MY ROLE
Visual UI/UX Design
UX Research
Concept Development
Overview
Litterbug is a gamified mobile app that motivates users to clean their environment through rewards, competition, and education. By transforming litter collection into a fun, community-driven activity, Litterbug empowers individuals to make a tangible environmental impact.
Problem
Littering damages ecosystems and threatens public health, yet existing solutions fail to engage and motivate individuals to take consistent action.
Goals
1. Educate users on proper litter disposal to foster environmental awareness
2. Encourage competition among users to motivate sustainable behavior
3. Utilize gamification to inspire sustainable habits and long-term action
4. Create opportunities for partnerships and collaborations with businesses
Before diving into interviews, we wanted to find out if gamification will actually encourage litter collection.
Literature Review
We analyzed three key articles, all with great insights:
- Dahlstrøm (2017): Gamification can foster intrinsic motivation if designed to support user autonomy and competence.
- Hsu & Chen (2021): Rewards and playful interactions are effective in encouraging sustainable behaviors.
- Li et al. (2021): A blend of cognitive and emotional engagement is necessary for long-term impact and meaningful behavior change.
This confirmed that gamification can significantly increase participation in sustainable behaviors when utilized correctly as a tool. It guided our design decision to incorporate goal-setting, rewards, and educational content.
Feature Comparison: Litterbug vs Competitors
We took some time to research competitors that have attempted to solve this problem. We concluded that there aren't many user-friendly mobile tools out there for encouraging litter cleanup and prolonged engagement in one place. Many existing solutions are temporary or trend-driven, often losing momentum over time. While platforms like Litterati and Recyclebank do foster sustainability, they fall short in incorporating interactive gamification features that could maintain user interest and long-term involvement.
| Feature | Litterbug | Litterati | TrashTag | Recyclebank |
|---|---|---|---|---|
| Gamification (Points, Rewards, Leaderboards) | Yes | No | No | Yes |
| Social Features (Friend Activity, Challenges) | Yes | Yes | Yes | No |
| Educational Content | Yes | No | No | Yes |
| Progress Tracking (Personal Stats, Goals) | Yes | Yes | No | Yes |
| Focus Area | Litter Collection | Litter Collection | Litter Collection | Recycling |
We interviewed seven participants to gain insights into their perspectives on littering and potential solutions.
Interviews
More specifically, we aimed to gather qualitative insights into the behavior, thoughts, needs, motivations, and initial interest levels of potential end users for our application. We spoke to 7 digital natives (ages 22-30) with varying levels of environmental consciousness to understand how a broad range of individuals might engage with the app. Click here for the interview guide.
Affinity Map & Insights:
With each major insight on a sticky note, we grouped the insights by similarity and topic. The following themes emerged:
- All participants acknowledged that littering is a significant issue, particularly highlighting its negative impact on wildlife and their habitats.
- Gamified applications are seen as an enjoyable way to compete with friends, and gamification is viewed as a powerful motivating factor for joining and engaging with a new app.
- Educational content should be subtle and non-intrusive.
- Litter collection is influenced by location, with people more likely to clean up in less urban areas. Willingness to engage in litter cleanup varies depending on the environment.
- Users are motivated by competition, rewards, and visible impact, with many expressing interest in tracking their progress and comparing themselves to peers.
Persona
We synthesized the most prominent motivations, goals, and frustrations from our interview data into a single, cohesive persona to represent our target user.
Armed with these insights, we started to imagine what Litterbug could look like...
We focused on creating an experience that was both fun and intuitive.
Key features we conceptualized to drive user engagement:
- Leaderboards: Encourages friendly competition by showing users’ standings among friends and community members.
- Rewards System: Points earned can be redeemed for eco-friendly prizes from local businesses.
- Integrated Education: Subtle environmental facts that inform without interrupting the user journey.
- Trash Talk: A feed where users can engage with friends and follow along with their cleanup efforts.
- Personal Zoo: A playful tracker where users “collect” animals as rewards for completing litter collection challenges.
Mid-Fidelity Prototype
My low-fidelity sketches were transformed into mid-fidelity wireframes for a more refined look before any testing with users.
We tested eight users' ability to navigate the prototype intuitively.
First Click Test
High Success Rates for Core Features: Tasks like uploading a litter photo (100%), checking goal progress (100%), and redeeming rewards (100%) were highly intuitive, indicating that the core functionality was well-designed.
Navigation Pain Points: Participants struggled with secondary features like the Personal Zoo (12.5% success rate) and Friends’ Activity Feed (12.5% success rate). Feedback indicated that the icons for these features were not self-explanatory.
Confusion Around Rewards Access: While 50% of participants successfully located the rewards page, others were unsure whether rewards could be accessed through the points widget on the profile or the navigation bar.
Positive Feedback on Layout: Participants praised the overall layout as “well-defined,” “organized,” and “intuitive.” The progress bar and goal tracking features were particularly well-received.
High Fidelity Prototype
Based on the First Click Test insights, we refined the mid-fidelity prototype into a high-fidelity design by enhancing the icon clarity on the profile page and main menu to reduce user confusion. The personal Zoo icon was updated and we allowed the "Rewards" page to be accessed through the profile page by clicking on the "Points" highlight. We also finished prototyping the key flows that would be most important while also incorporating the main branding colors into the UI for a more cohesive experience. The following screens went through major changes after usability testing.
UPLOAD LITTER DISPOSAL
REDEEM REWARDS
MORE SCREENS
- The majority of users could not tell what the icon for the activity feed represented.
- Many users were confused by the "Rewards" page icon symbol with a hand holding a gift box. The icon was not immediately recognizable.
- To improve visibility as the icons are at a small scale, we replaced the "Rewards" page icon with just a gift box.
- The feed icon was replaced with two figures and chat bubbles to better represent its function. More testing will be needed to gauge the clarity and impact.
Will these changes address current user concerns? How can we further improve Litterbug?
Usability Test
We conducted usability testing with eight participants who were tasked with navigating our hi-fi prototype to complete five tasks accompanied by scenarios, as well as answer four post-test questions. Click here for the usability test guide.
Our main objectives were to:
- Identify organizational problems within the application that affect usability
- Measure user performance through task success or failure
- Measure the difficulty of each main task to complete
- Gauge user satisfaction when using the application
Insights & Priority Revisions
Overall, participants navigated through the flows with ease – there were no errors or hesitation of any kind across all five tasks! The updated "Rewards" and "Feed" icons were proven to provide more clarity.
However, all participants had comments and questions about the purpose of the "Zoo" feature. Some found the litter upload success screen overwhelming, describing it as "busy" and "cluttered." Additionally, one participant noted that the "Rewards" page lacked clarity on where to view redeemed rewards. Users also found the floating menu distracting and intrusive, as it sometimes obstructed content and made navigation less intuitive.
Based on user feedback, we made several key improvements to enhance clarity, usability, and engagement:
- Engage with feed – Users can now like and comment on posts, fostering more interaction.
- Less cluttered success screen – Simplified design to reduce visual overload and improve readability.
- Fully conceptualized zoo feature – Clarified its purpose and functionality for better user understanding.
- Updated & refreshed UI – Improved overall design for a more intuitive and visually appealing experience.
- Clearer rewards section – Added a dedicated place to view redeemed rewards.
- Removed "Local" tab from leaderboard – Streamlined leaderboard categories for a clearer ranking system.
- Replaced floating menu with bottom navigation – Improved usability by integrating the menu into the bottom of the screen for easier access and a less obstructive experience.
- Updated font – Switched to a softer, more rounded font to enhance the app's playful aesthetic.
Below is our final solution and the improvements made based on user feedback.
UPLOAD LITTER DISPOSAL
REDEEM REWARDS
MORE SCREENS
ZOO
Interactive Prototype
Click through the prototype here ↓
Litterbug is still a work-in-progress, on its way to becoming a reality.
Our next step is to conduct another round of usability testing to see if this latest iteration resonates with users. When the design system is ready, we will pass the design off to a developer for deployment. Working on an app with potential for real environmental impact has been so rewarding, and we are excited to continue it as a passion project beyond the scope of our class!
MORE CASE STUDIES
