
Recycle Hero
UX Case Study by Valentina Maio
Scope: September 12th - October 14th (4 weeks)


Project Overview
By blending education with play, it encourages children to adopt sustainable habits while making recycling fun and easy to understand.
Its intuitive interface and reward system motivate kids to take action and positively impact the environment.
Role
UX Researcher
UX Designer
UI Designer
Tools
Figma
Figjam
Canva
Google Drive
Trello
Zoom
Recycle Hero is an interactive app that teaches kids about recycling through gamified challenges and engaging visuals.

Problem Statement

The Problem
Children often struggle to grasp the importance of recycling and how to properly sort materials, leading to confusion and poor recycling habits. The current app lacks engaging features and clear, age-appropriate guidance, hindering effective environmental education.
My Impact
Research: Led user interviews and analyzed results to guide the project.
Prototyping: Created wireframes for tablet and desktop, and led Figma prototyping and iterations.
Testing: Developed testing scripts, planned testing cadence, and conducted all user tests.
Project Management: Managed team progress through Trello and Google Drive, ensuring timely delivery of deliverables and deadlines.

Design Process
Our design process for Recycle Hero focused on creating an engaging, fun experience to inspire kids to embrace recycling. Through user research and testing, we identified key motivations and challenges, then developed a gamified app with interactive features to keep kids excited. The result is a simple, intuitive app that makes learning about recycling both enjoyable and rewarding.
Research
User Research
User Interview
Competitive Analysis
Project Timeline
Week 1
Define
User Persona
Empathy Map
User Journey
Week 2
Ideate
User Flow
Card Sorting
Information Architecture
Week 3
Design
Wireframe
Hi-Fi
Design
Prototype
Week 4
Test
Feedback
Iteration
Future Enhancements

Pain Points
1. Limited understanding of recycling concepts, like sorting materials, reduces kids' ability to engage effectively.
2. Low retention and engagement occur when the app lacks variety and incentives to keep kids interested.
Opportunities
1. Simplify recycling education with interactive tutorials and step-by-step guides for different age groups. Gamify learning with age-appropriate challenges and rewards to help kids grasp concepts like sorting waste and understanding recycling symbols.
2. Introduce a progress-tracking system that rewards consistent engagement and achievements. Add features like daily challenges, customizable avatars, and virtual rewards to boost interest and encourage frequent use.

Competitive Analysis
A competitive analysis of direct and indirect competitors revealed common features in recycling apps. While competitors addressed some issues, they still lacked effective solutions.
Company Info
Limited to clothing and does not cover any other recycling materials, geographic restrictions, limited to places that only work with app

User Research
We interviewed and surveyed both parents (ages 35-40) and children (ages 5-7) to understand how they approach and learn about recycling. The interviews lasted approximately 15 minutes and took place in September 2024. Participants highlighted a discrepancy in finding accessible, easy, and clear guidelines for recycling. They also suggested that an app offering engaging and informative incentives would encourage more recycling.
Observations
43.4%
of users are confused about what can be recycled
User Insights
Users highlighted that the strongest motivators for recycling are monetary rewards and the ability to see their environmental impact.
Users would like to recycle more often but are confronted with hesitation and uncertainty due to lack of information
Users would recycle more if it was easier and more convenient
33.3%
of users lack any access to recycling centers
23.3%
lack awareness about recycling programs

User Persona

Oliver Taylor
7 years old
Berkeley, CA
Overview
Oliver is a curious and energetic 7-year-old who loves hands-on activities and challenges. He enjoys playing games on his tablet, especially those with a mission. At this stage, he takes pride in being responsible, particularly when it comes to protecting nature. Oliver often plays learning games with some help from his parents
Goals
Feels like a hero on a mission to clean the Earth
Completing tasks makes him feel responsible
Collecting points and comparing progress with friends is important
Learning recycling through interactive games helps him understand his role
Needs
Fun characters (e.g., superheroes) to create an adventure
Rewards system (stickers, stars, coins) for motivation
Clear, simple visuals to show recycling, trash, or compost bins
Short, educational mini-games that are easy to play

User Journey
Task
wants to learn about recycling more,
finds RecycleHero!
Browses menu, recycling modules and games
chooses avatar and plays recycling games and learns through educational videos
Feels more confident and informed about recycling and is excited to continue
Feeling
Thoughts
App design is engaging and friendly, imagery feels playful with purpose
offers a variety of options for both parents and kids - games, videos and recycling tasks
game feels informative and engaging, parent child supervision makes it feel appropriate and safe
will be using this app more for recycling and will use as resource to provide clarity
Opportunities
include clear information and imagery on home page
provide tutorials for games and user journey to showcase app features
provide parent consent through code verification
track recycling efforts and award for participation

Site Map


1st Version
Iterated Final Version
Our sitemap, informed by user input, defined a clear, intuitive app structure, ensuring easy navigation and organized content. This approach delivered a seamless user experience with a logical flow throughout the app.

Paper Prototypes
Starting with paper prototypes helped us map out the information architecture, user path, and key features of the RecycleHero digital experience.




Iterations
Gamification Visuals




Incorporated imagery and story telling through playful color scheme
Selected features include progress tracking and educational videos
Gamification Visuals

Iterations


Profile Journey
Refined Hero Home page to be visually pleasing to the user
Upgraded profile page to incorporate in story theme and included fun, playful avatars



Iterations


Recycle Guide
Added a FAQ for a simplified walkthrough of Recycle Hero and its functions.
Introduced a "Schedule Pick-Up" screen to incentivize and provide users a way to apply their knowledge.


Style Guide

Recycle Hero inspires kids to tackle environmental waste by making recycling fun and rewarding. With vibrant, fruit-inspired colors and engaging animations, recycling becomes an exciting adventure. A clear, simple design helps children track progress and earn real-world rewards, building lasting eco-friendly habits.
UI STYLE ADJECTIVES
FUN!!
Interactive
Inspiring
Colorful
H1 - Headline
TYPOGRAPHY
h2 - Subhead
body - paragraph
H3- Info
(Patrick hand, Regular, 52)
(Patrick Hand, Regular, 46)
(Inter, Regular, 24)
(Inter, Bold, 32)
BUTTON STATES

IMAGE SAMPLES










Button
(Inter, Medium, 24)
COLOR GRADIENT
Fine Print
(Inter, Italic, 14)
ICONOGRAPHY
COLOR PALETTE
“BLUEBERRY”
“KIWI”
“GRAPE”
“PINEAPPLE”
“BANANA”
#B20000
178/0/0
#35716F
53/113/111
#FFDE59
255/222/89
#FFF8DF
255/248/223
PRIMARY INTERACTION COLOR
SECONDARY
INTERACTION COLOR
TYPOGRAPHY BODY COPY
Recycle Heroes aims to inspire kids to take action against environmental waste by making recycling fun, rewarding, and easy to understand.
#35716F
#713537
GRAPHIC PATTERNS




This is a regular link
(Inter, Regular, 16)
BUTTON STYLES
underlined
IMAGE SAMPLES







Usability Testing
scanning items for recycle portion was confusing
remove scan and provide bottles or cans visuals

A/B Testing
Our team conducted two rounds of A/B testing to prioritize a human-centered design. The first round focused on the parent login prompt. The original sign-in screen (left) was compared to the redesigned version (right), which was preferred for its simplicity and intuitive layout.



A/B Testing
In the second round of A/B testing, we focused on the mission page. Initially, we used real animal images to create a direct connection with those being helped. We then tested an illustrated version to gauge audience preference. Both kids and adults showed a clear preference for the illustrated design.



High Fidelity Prototype


Desktop Page Developement


Future Enhancements
Incorporate an Eco-Friendly activity calendar for users to promote recycling activities in creative ways
Provide a more an evolving impact of environmental impact via stats
Kid recycling Directory feature that shows where kids and their parents can drop off their recycled items
Key Takeaways
Gamification and interactive elements (e.g., rewards, challenges, badges) were crucial in keeping kids engaged and motivated to learn about recycling
Prioritizing the needs of both the children (target users) and their parents (who might assist with navigation) ensured that the app was intuitive, fun, and practical for all ages
Simple, visually appealing interfaces with intuitive navigation were critical for keeping children engaged without overwhelming them
