Recycle Hero

Comprehensive Product Design

Recycle Hero Hero Image

Project Overview

Recycling guidelines create confusion, and many of us wonder if our conservation efforts make a difference. Recycle Hero cuts through the confusion to support users in maximizing their recycling through AI scanning and increasing recycling convenience, all while providing rewards for their conservation efforts. The scope of this project includes the design of a mobile recycling app as well as a corresponding landing page to transition viewers into customers.

The Problem

Environmentally conscious individuals are overwhelmed by the repetitive challenges of recycling and often feel that there is a lack of opportunity to take personal action on climate change.

The Solution

Provide users with the tools, information, and incentives to improve their recycling practices while empowering them to take daily personal action against climate change.


UX Researcher, UX Designer, UI Designer, Front-End Developer


4 Weeks
April 20th - May 15th, 2023


Jordan Modic
Emily Martinez
Alex Bigot


Miro, Whimsical, Figma, VS Code, Github, Google Suite


Make a daily impact, recycle with accuracy.

AI Scanning empowers users to make the most sustainable choices in disposal and purchasing.

Ai Scan Highlight Mockup

Turning interest into product downloads.

Responsive landing page design transitions visitor curiosity into customer engagement.

RWD Landing Page Highlight Mockup



Why does it feel so hard to make a difference for the environment?

User Interviews, surveys, and analysis uncovered a variety of challenges surrounding recycling participation and taking personal action on climate change.

Research Findings Icon


Complex recycling guidelines and concerns over recycling contamination present a large challenge to recycling participation.

Research Findings Icon

Climate Fatigue

Interviewees felt overwhelmed by climate change and struggled to take personal action to support sustainability.

Research Findings Icon


Recycling specialty items, like plastic film, can be expensive. Interviewees were interested in offsetting these costs.

Research Findings Icon


Researching guidelines, sorting items, and driving to drop off locations presented barriers to recycling participation.

User Insight

Environmentally conscious individuals require convenient access to recycling information and incentives. Complex recycling guidelines and the mental fatigue associated with climate change can often overshadow their motivation to support conservation efforts.


Feature Prioritization

Features that empower users in making a difference.

We set out to address three primary goals: increasing recycling contributions, incentivizing recycling participation, and empowering users to take personal action for conservation.

Recycle Hero Feature Prioritization Matrix

User Journey Map

Cutting through the confusion to make conservation more convenient.

Our users are seeking convenience and confidence in their conservation efforts. How can we make it easier to make a difference for our planet?

User Journey Map Visual
User Journey Map Number 4

Simple scan interface that quickly identifies sustainable disposal methods.

User Journey Map Number 6

Suggest alternative purchasing options for non-recyclable items.

User Journey Map Number 8

Users' points are updated upon recycling pick-up.

User Journey Map Number 9

User sees growing impact of their conservation efforts.

User Flows

Developing three tools for taking personal action.

We pursued user flows that provided the most beneficial tools to our users. Through scanning, recycling mapping, and impact tracking, users are able to take control of their conservation efforts.

User Flow Visual


Moving into style and feel.

Our hi-fi frames included several additions to functionality, including an easily accessible scanning button on the home screen and a simplified scanning interface.

Home Wireframe
Scanning Wireframe
Suggested Product Wireframe

Recycle with confidence

Our frames were brought to life through the addition of interactions, allowing our users to experience the power of recycling confidently.

Home Hi-Fi Mockup
Hi-Fi Ai Scanner Mockup
Hi-Fi Recycle Finder Mockup

Gearing up in grayscale.

The home screen design prominently features updated information on rewards, impact, and community events. Wireframing the AI Scanner allowed us to identify our approach for presenting information.

Mobile App

Low-Fidelity Landing Page

Establishing a layout, utilizing existing patterns.

Our initial layout utilized Ridwell's landing page as inspiration, providing compelling CTAs, feature information, and frequently asked questions.

Lo-Fi Landing Main Frame
Lo-Fi Landing Recycling Facts FrameLo-Fi Landing Solutions Cards
Lo-Fi Landing Community FrameLo-Fi Landing FAQs
User Testing Results

Users found call-to-action sections compelling but indicated a lack of details regarding product features.

Lo-Fi Landing Testing Results Icon

Users were unsure if this product was an app or a different offering. They were about how they could access these features.

Lo-Fi Landing Testing Results Icon

Users were looking for more information on types of rewards offered.

Lo-Fi Landing Testing Results Icon

Recycling statistics motivated user action.

"We need to do something about this."

Style Guide

Styled to support accessibility.

We expanded upon Ridwell's current styling to create a product-specific logo, a broader color palette, and improved accessibility while maintaining the Ridwell feel.

Style Guide: Color Palette

We chose to expand the color palette to incorporate darker shades of green, providing opportunities for more contrast.

Style Guide: Logo

The Recycle Hero logo was iterated several times throughout the design process. This design highlights Ridwell's logo while adapting well for responsive design.

Style Guide: Button

Text and background colors were updated to meet WCAG Guidelines.

Mid-Fidelity Landing Page

Implementing testing results to improve user understanding.

We utilized imagery and iconography to address user confusion over product details. The application of our style guide decreased cognitive load and highlighted CTAs.

Mid-Fi Landing Main Page
Mid-Fi Landing Recycling FactsMid-Fi Landing Impact Graph
Mid-Fi Landing Solution CardsMid-Fi Landing FAQs
User Testing Results

This time around, users were able to easily identify features and how to access the product. Imagery and call-to-action sections continued to motivate user action.

Mid-Fi Testing Results Icon

Users easily identified features and were most interested in the AI Scanner

Mid-Fi Testing Results Icon

Users expressed excitement by the potential to improve conservation efforts.

Mid-Fi Testing Results Icon

These sessions provided helpful feedback on layout, spacing, and color choices.

RWD Landing Page Prototype

Landing Page Prototype: Desktop Mockup

Accomplishing mobile first scalability.

By using mobile, tablet, and desktop breakpoints we were able to hone the scalability of our mobile first design. Ultimately providing a consistent experience across the three breakpoints.

Coded Landing Page

Deployed Landing Page

Bringing our designs to life with code.

This was my first time coding an entire page, and I found that I really enjoyed the process. Figma has helped my understanding of HTML, and vice versa.

This page was coded using HTML, CSS, Bootstrap, and jQuery.

Coded Landing Page Mockup

Future Opportunities

App Prototype

The landing page was the primary focus during this project timeline. Recycle Hero’s features could benefit from additional user testing and design iterations, especially for alternative product and specialty recycling instruction flows. A dedicated timeline for the app could really improve its accessibility.

Community Building

User interview data consistently showed that people are motivated to build community through conservation. Many users expressed interest in organized park cleanups and a desire to know that they are part of a community making an effort for conservation. Future iterations of the product could explore ways to meet these user needs.


Animations within the landing page and the app prototype could benefit from further development. Iterating on these animations will lend the product a more polished finish and ensure that it stands out as a high-tech solution to our recycling problem.