top of page
Rectangle 37

Recycle Hero

UX Case Study by Valentina Maio

Scope: September 12th - October 14th (4 weeks)

Rectangle 37

Project Overview

By blending education with play, it encourages children to adopsustainable 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

Rectangle 37

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.

 

Rectangle 38

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

Rectangle 38

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.

 

Rectangle 38

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

Advantage
Strength
Weakness
Bower
works to make sustainability more accessible by simplifying the process of recycling for consumers and businesses
monetary rewards, convenient and intuitive, wider use base with more than 500K users
Website is user friendly, visuals are engaging and effective, easy to understand info
limited use - can only recycle items with barcodes, cash payouts are small
Imagined Earth
brings reverse vending machines to partners and to the public to reward people for recycling their packaging waste
innovative use of reverse vending machines, users receive immediate payouts
Website is visually pleasant, offers partnerships, effective icons that are visually engaging and educational
limited coverage - app’s function depends on access to RVMs, app functionality - users report glitches when using app
Terra Cycle
mission is to eliminate the idea of waste by providing effective solutions to keep trash out of landfills and from incineration
specialized recycling programs, brand partnerships, global reach, zero-waste boxes
Clear and engaging UI, organized information, easy to contact and get involved
high cost for zero-waste boxes, various programs offered can be overwhelming for users, shipping requirements
Trashie
designed to gamify recycling and waste management, encourages users to recycle more effectively by tracking their habits
specialized focus, targets a unique-niche, rewards system that provides exclusive deals on products
engaging, visually compelling UI, easy and fun for users to explore site

Limited to clothing and does not cover any other recycling materials, geographic restrictions, limited to places that only work with app

Rectangle 38

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

Rectangle 38

User Persona

guenifi-ouassim-pT3eDIvsQ58-unsplash 1.png

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

Rectangle 38

User Journey

Actions
Encounter
Browsing
Decision
Outcome

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

Rectangle 38

Site Map

Screenshot 2024-12-08 at 8.13.52 AM 1
Screenshot 2024-12-08 at 8.14.40 AM 1

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.

Rectangle 38

Paper Prototypes

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

Your First Project-2 1
Screenshot 2024-12-08 at 8.44.16 AM 1.png
Screenshot 2024-12-08 at 8.44.16 AM 1.png
Rectangle 38

Iterations

Gamification Visuals

Screenshot 2024-12-08 at 9.10.46 AM 1.png
Screenshot 2024-12-08 at 9.25.23 AM 1.png
Screenshot 2024-12-08 at 9.10.23 AM 1.png
Screenshot 2024-12-08 at 9.25.12 AM 1.png

Incorporated imagery and story telling through playful color scheme

Selected features include progress tracking and educational videos

Gamification Visuals

Rectangle 38

Iterations

Screenshot 2024-12-08 at 9.10.35 AM 1.png
Screenshot 2024-12-08 at 10.16.10 AM 1.png

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

Screenshot 2024-12-08 at 9.25.30 AM 1.png
Screenshot 2024-12-08 at 9.54.27 AM 1.png
Rectangle 38

Iterations

Screenshot 2024-12-08 at 10.25.23 AM 1.png
Screenshot 2024-12-08 at 10.14.35 AM 1.png

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.

Screenshot 2024-12-08 at 9.54.33 AM 1.png
Screenshot 2024-12-08 at 9.55.04 AM 1.png

Style Guide

Rectangle 38

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)

ACTIVE

BUTTON STATES

NORMAL
NORMAL
ACTIVE
Rectangle 21

IMAGE SAMPLES

Rectangle 22
lita love 1
Rectangle 23
lady red 1
Rectangle 24
lita bw garden 1
Rectangle 38
lita love 2
lady red 2
lita bw garden 2

Button

(Inter, Medium, 24)

COLOR GRADIENT

Fine Print

(Inter, Italic, 14)

DISABLED

ICONOGRAPHY

COLOR PALETTE

“BLUEBERRY”

“KIWI”

“GRAPE”

“PINEAPPLE”

“BANANA”

#B20000

178/0/0

#35716F

53/113/111

#713537

113/53/55

#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

Rectangle 21
Rectangle 22
Rectangle 23
Rectangle 24

This is a regular link

(Inter, Regular, 16)

BUTTON STYLES

rounded

underlined

outlined

IMAGE SAMPLES

lady blue 2
stock1 2
lita banjo 2
bw lita 2
news hat (1) 2
lady blue 2
Rectangle 38

Usability Testing

User #1
User #2
User #3
User #4
User Info
7, M
41, F
9, F
32, M
Can user properly onboard?
Y
Y
Y
Y
Can user easily access recycle games?
Y
Y
Y
Y
Can user successfully schedule a pick-up?
Y
Y
Y
Y
Feedback

scanning items for recycle portion was confusing

prefer to have tutorial beginning sign-up
enjoys the avatar feature
schedule pickup should be more visual
Opportunities

remove scan and provide bottles or cans visuals

provide a F.A.Q screen detailing steps
make avatar journey more consistent throughout app
include calendar icon for schedule pick up feature
Rectangle 38

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.

Screenshot 2024-12-09 at 11.54.47 AM 1.png
Screenshot 2024-12-09 at 11.55.03 AM 1.png
Rectangle 38

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.

Screenshot 2024-12-09 at 11.55.16 AM 1.png
Screenshot 2024-12-09 at 11.55.29 AM 1.png
Rectangle 38

High Fidelity Prototype

Rectangle 38

Desktop Page Developement

Rectangle 38

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

 

Rectangle 38

Thank you for viewing!

bottom of page