Title
Problem
Research
Design
Final Solution
Takeaways
ECO HERO
Eco Hero is a mobile app prototype that makes recycling simple and accessible through tools like item scanning, recycling lookups, pickups, and impact tracking. It educates and motivates users with news, community groups, and rewards for recycling.
View Prototype
screenshot of ECO HERO in phone layouts
Timeline: 05/2024 -7/2024
Tools Used: Figma
Role: Lead UI Designer
Title
Problem
Research
Design
Final Solution
Takeaways
Problem Statement
Importance of the Project
Recycling plays a critical role in environmental sustainability, yet many people recycle incorrectly or not at all due to confusion, inconvenience, or lack of motivation. When users are unsure whether an item is recyclable, they are more likely to dispose of it improperly, contributing to waste contamination and environmental harm. This lack of accessible education impacts not only individuals but also recycling systems and communities as a whole. Eco Hero is important because it lowers the barrier to recycling by making information easy to understand, locally relevant, and engaging. By combining education, reminders, rewards, and community features, the app encourages consistent, informed recycling behaviors. This benefits users by saving time and reducing uncertainty, while also supporting local recycling programs and promoting more sustainable habits within communities.
User Need Addressed
Many existing recycling apps focus on low-involvement information, offering limited guidance that does not fully educate users on proper recycling practices. As a result, individuals who want to recycle correctly often lack the knowledge and confidence to do so. Recycling rules vary by location, items can be confusing to categorize, and reliable information is often scattered across multiple sources. Eco Hero addresses this gap by providing accurate, accessible recycling education through interactive tools. By centralizing item scanning, local recycling lookups, educational content, and community engagement into one platform, Eco Hero empowers users to make informed recycling decisions in their daily lives.
My Role: Lead UI Designer
I established Eco Hero’s visual design system, including color, typography, and reusable UI components. I guided component styling and interaction patterns across the product, refined layouts after early wireframes, and designed core user flows. I also participated in user interviews and research.
Team Members
Liz Furlow
Group Leader and UX Designer
Led the overall vision for the project and contributed across all stages of the design process. Designed the community and events pages and collaborated with the team on user interviews, research synthesis, and final execution.
Luke Barker
UX Designer & Researcher
Created the initial rough prototype layout and contributed significantly to user research and interviews. Designed the settings, account, and profile pages and assisted with persona development and research analysis.
Kaya Bobo
UX Designer & Researcher
Designed the map-based recycling search results and item scanner pages. Participated in user interviews and research, developed personas, and created the requirements list outlining key product needs.
Nelson Ray
UX Designer & Prototype Integration
Designed the community following page and collaborated on user interviews and research. Reviewed project notes for clarity and ensured the prototype was fully connected and logically structured across all user flows.
Title
Problem
Research
Design
Final Solution
Takeaways
Research and Insights
To ground our design decisions in real-world context, we first conducted research on recycling systems and education. We then performed a competitive audit of existing recycling apps to identify strengths, gaps, and opportunities for improvement.
Domain Research
Competitive Analysis
User Interviews & Personas

Domain Research

Purpose:

To build a strong foundation of knowledge around recycling systems, rules, and common challenges before designing a solution.

Process:

We conducted research using articles, reports, and educational resources focused on recycling practices, contamination issues, and sustainability. This helped the team understand how recycling works, why it often fails, and where knowledge gaps exist.

Key Insights:

  • Recycling rules vary significantly by location

  • Improper recycling leads to contamination and inefficiencies

  • Many people lack basic education on what can and cannot be recycled

  • Clear, accessible information can improve recycling participation

Impact on Design:

This research emphasized the need for accurate, easy-to-understand recycling education and localized information within Eco Hero.

Lit review template

Competitive Analysis

Purpose:

To evaluate existing recycling apps and identify strengths, weaknesses, and opportunities for improvement.

Process:

We conducted a competitive audit of multiple recycling-related apps, comparing features, usability, educational value, and engagement strategies. Each app was assessed for what worked well and what fell short.

Key Insights:

  • Many apps provide only basic or static recycling information

  • Educational explanations are often limited or unclear

  • Interfaces can feel cluttered or unintuitive

  • Few apps offer strong community or motivation features

Impact on Design:

These findings informed Eco Hero’s focus on an education-first experience, intuitive navigation, interactive tools, and community-driven motivation.

competitive audit

User Interviews & Personas

Purpose:

To understand real user behaviors, motivations, and pain points related to recycling and validate assumptions made during early research.

Process:

The team created a shared set of interview questions and conducted five user interviews. Key insights from each interview were documented using sticky notes and synthesized through affinity mapping to identify recurring patterns. These patterns were then translated into primary and secondary user personas.

Key Insights:

  • Users feel overwhelmed by unclear recycling rules

  • Many are unsure how to recycle specific items correctly

  • Convenience and confidence strongly influence recycling habits

  • Motivation increases when recycling feels rewarding and meaningful

Impact on Design:

Personas helped guide feature prioritization, reinforcing the need for item scanning, localized recycling lookups, reminders, educational content, and reward-based engagement.

personas
Title
Problem
Research
Design
Final Solution
Takeaways
Design Process
This phase focused on turning research insights and wireframes into a modern interface. Through iteration and refinement, the design evolved to improve usability, clarity, and consistency.
1. Wireframing & Layout Foundation
I used the wireframing path created by my teammate to guide layout decisions and screen hierarchy. This helped establish a clear structure before moving into visual design and ensured the app’s navigation felt intuitive.
Low-fidelity layout
Low-fidelity pathway
2. Visual Exploration & Color Direction
I explored multiple color palettes centered around green, since it’s commonly associated with recycling and environmental apps. After applying brighter options to early mockups, we realized a darker palette felt more modern and visually cohesive, which led to a refined color direction.
color palettes and Canva home pages with those color palettes
Our color palette choice and design choice
3. Interface Refinement & Design System
After studying UI principles more closely, I revisited the design to ensure colors, typography, and spacing were used intentionally. I refined the interface by assigning specific roles to colors and creating consistent variables for text, icons, navigation, and cards.
Variables
components organized
Title
Problem
Research
Design
Final Solution
Takeaways
Takeaways
Result
This project taught me the importance of strong design components and consistency. As my first project, I did not initially realize how much using similar sizes, colors, and layouts could improve clarity and usability. Organizing components made the design process more efficient and helped create a more cohesive experience. I also learned that color is not just decorative but communicates meaning. Using consistent colors for buttons, cards, and text helps users recognize patterns and understand functionality more quickly. When elements share the same shape and color, users naturally understand that they serve the same purpose.