Recycle Chicago

Recycle Chicago

End-to-end Mobile App Design aimed to help Chicago residents with recycling

End-to-end Mobile App Design aimed to help Chicago residents with recycling

IPhone 16 mockup with Recycle Chicago logo
IPhone 16 mockup with Recycle Chicago logo
IPhone 16 mockup with Recycle Chicago logo
iPhone 16 Mock-up with the homepage of the REcycle Chicago App
iPhone 16 Mock-up with the homepage of the REcycle Chicago App
iPhone 16 Mock-up with the homepage of the REcycle Chicago App
iPhone 16 Mock-up with the Scan page of the REcycle Chicago App
iPhone 16 Mock-up with the Scan page of the REcycle Chicago App
iPhone 16 Mock-up with the Scan page of the REcycle Chicago App
iPhone 16 Mock-up with the virtual bin page of the REcycle Chicago App
iPhone 16 Mock-up with the virtual bin page of the REcycle Chicago App
iPhone 16 Mock-up with the virtual bin page of the REcycle Chicago App

01 / Summary

Recycle Chicago is an end-to-end application that I designed from scratch as my Capstone project for the UX Design Bootcamp. Although this project hasn't been developed, I designed it with a real-world application in mind. I have talked to many Chicago Residents, who were very excited to have an App like this to help them and their community recycle with more ease and get rewarded for it.

Duration: 100 hours

My Role: UX Research, UX Design, UI Design, Wireframing, Prototyping, Mobile App Design

Deliverables: Full Competitive Analysis, Detailed User Interviews, User Flows, Site Map, Design System, Wireframes, User-Interface Designs, High-Fidelity Prototype

Outcomes: Working on a tight deadline, I designed a polished prototype, which can be used as a demo for potential city organizations or businesses who are looking to improve their environmental footprint.

Problem

  • Chicago diverts only 9.6% of its waste from landfills - compared to about 65% in Los Angeles

  • Residents are often unsure about proper recycling practices

  • Chicago residents don't have trust in a recycling system, because often it all ends up in the trash due to contamination of recycling bins

  • Chicago diverts only 9.6% of its waste from landfills - compared to about 65% in Los Angeles

  • Residents are often unsure about proper recycling practices

  • Chicago residents don't have trust in a recycling system, because often it all ends up in the trash due to contamination of recycling bins

  • Chicago diverts only 9.6% of its waste from landfills - compared to about 65% in Los Angeles

  • Residents are often unsure about proper recycling practices

  • Chicago residents don't have trust in a recycling system, because often it all ends up in the trash due to contamination of recycling bins

Objective

Create a free, easy-to-use mobile app that guides residents on how to responsibly dispose of any type of waste.

The app provides:

  • Clear instructions on what can and cannot be recycled

  • Information on items requiring special facilities or pickups

  • Donation options and locations for reusable goods

Solution

A mobile app that:

  • Quickly provides users with directions on how to dispose of any item

  • Rewards recycling efforts with points and community impact stats

  • Makes sustainable behavior feel easy, visible, and rewarding

02 / Understanding the Problem

User Experience Research

To better understand the recycling challenges Chicago residents face, I researched existing apps and resources on the market and conducted interviews to gain insight into their daily waste-handling habits.

Methods:

  • Competitive Analysis

  • User Interviews

Methods:

  • Competitive Analysis

  • User Interviews

Methods:

  • Competitive Analysis

  • User Interviews

Key Insights from Competitive Analysis:

  • There are apps available in Chicago and other cities that help residents recycle

  • Only one app had a working "Scan" feature

  • The website with recycling information in Chicago was hard to find, and it took a long time to find the necessary information

Competitive analysis snapshot, showing competitior apps: Scrapp, Recycle Austin, REcycle Seatttle, and Recycle by City (Chicago) Website
Competitive analysis snapshot, showing competitior apps: Scrapp, Recycle Austin, REcycle Seatttle, and Recycle by City (Chicago) Website
Competitive analysis snapshot, showing competitior apps: Scrapp, Recycle Austin, REcycle Seatttle, and Recycle by City (Chicago) Website
Affinity Map Snapshot
Affinity Map Snapshot
Affinity Map Snapshot

User Interviews

I recruited participants from various neighborhoods and building types in Chicago to gather a diverse range of opinions on Recycling. During the interviews, I asked about their current habits and carefully listened to the challenges residents felt, then asked follow-up questions to delve deeper into the root of the problem.

Key Insights from User Interviews:

  • Chicago Residents were not always sure how to recycle less common items like electronics, oily bottles, or chemicals

  • People showed distrust in the recycling program, which has historic roots in the previous Chicago Recycling program, completely failing

  • Users showed a lack of motivation; they didn't see if their neighbors recycled and assumed that they didn't

Key Insights from User Interviews:

  • Chicago Residents were not always sure how to recycle less common items like electronics, oily bottles, or chemicals

  • People showed distrust in the recycling program, which has historic roots in the previous Chicago Recycling program, completely failing

  • Users showed a lack of motivation; they didn't see if their neighbors recycled and assumed that they didn't

Key Insights from User Interviews:

  • Chicago Residents were not always sure how to recycle less common items like electronics, oily bottles, or chemicals

  • People showed distrust in the recycling program, which has historic roots in the previous Chicago Recycling program, completely failing

  • Users showed a lack of motivation; they didn't see if their neighbors recycled and assumed that they didn't

Who are the users?

After analyzing my research findings, I developed two personas that capture the key pain points and motivations of my interview participants. These personas helped me clearly identify my target users and served as a reference point throughout the entire design process.

  1. Busy Environmentalist

Current Behaviors: Actively researches waste management options and tries to minimize environmental impact, but finds the process confusing and time-consuming

Goals & Motivations: Wants a clear recycling system, easy access to waste management information, and to feel good about her environmental impact

Frustrations: Current recycling feels ineffective despite her efforts, composting is expensive and complicated, and finding accurate waste management information is time-consuming

  1. Recycling Skeptic

Current Behaviors: Doesn't recycle because he believes it's ineffective, occasionally brings down cardboard boxes but doesn't research proper disposal methods

Goals & Motivations: Needs reassurance that recycling actually works, would participate if it was easy, and wants to see others recycling successfully

Frustrations: Believes recycling doesn't get processed anyway, finds composting too expensive and inaccessible, and feels building management doesn't prioritize waste efforts

03 / Solution

User Journey

App Features

Based on the research findings, I identified features that could help Chicago residents better manage their recycling. After evaluating potential impact and feasibility within the project timeline, I narrowed the list to the following features:

Item Search (By name and by category)

Scan multiple items or the whole bin

Reward system with points and redeemable perks

Dashboard to track personal and neighborhood impact

Site Map & User Flows

Site Map was the foundation that tied together research, features, and provided a base structure for the app.

To design User Flows, I spent a lot of time iterating various paths a user can take to get to the ideal outcome. I collaborated with peers to gather feedback and refine the flows. It was important to build a strong journey foundation before progressing further. I often referenced these flows and they helped me immensely to produce the wireframes.

Site map for the app, starting with main screen, brunching into homepage, search, your impact and scan
Site map for the app, starting with main screen, brunching into homepage, search, your impact and scan
Site map for the app, starting with main screen, brunching into homepage, search, your impact and scan
Users flows for Search Flow and Impact Flow
Users flows for Search Flow and Impact Flow

Low & Mid-Fidelity Wireframes

To bring my ideas to life, I began with hand sketches before transitioning into digital low-fidelity wireframes. During this phase, I referenced my sitemap and user flows to understand exactly how each feature would connect and how users would move through the app. This step allowed me:

Build a strong foundation: Sketching helped me explore ideas quickly, then refine them digitally without spending too much time

Focus on structure: By working in mid-fidelity, I prioritized navigation, feature placement, and page hierarchy over final colors and look

Validate with user testing: Feedback allowed me to validate the flow of the app and notice areas that needed improvement

To bring my ideas to life, I began with hand sketches before transitioning into digital low-fidelity wireframes. During this phase, I referenced my sitemap and user flows to understand exactly how each feature would connect and how users would move through the app. This step allowed me:

  • Build a strong foundation: Sketching helped me explore ideas quickly, then refine them digitally without spending too much time

  • Focus on structure: By working in mid-fidelity, I prioritized navigation, feature placement, and page hierarchy over final colors and look

  • Validate with user testing: Feedback allowed me to validate the flow of the app and notice areas that needed improvement

To bring my ideas to life, I began with hand sketches before transitioning into digital low-fidelity wireframes. During this phase, I referenced my sitemap and user flows to understand exactly how each feature would connect and how users would move through the app. This step allowed me:

  • Build a strong foundation: Sketching helped me explore ideas quickly, then refine them digitally without spending too much time

  • Focus on structure: By working in mid-fidelity, I prioritized navigation, feature placement, and page hierarchy over final colors and look

  • Validate with user testing: Feedback allowed me to validate the flow of the app and notice areas that needed improvement

mid-fidelity wireframes with open page, homepage, search, scan, and impact pages
mid-fidelity wireframes with open page, homepage, search, scan, and impact pages
mid-fidelity wireframes with open page, homepage, search, scan, and impact pages

Branding & UI

Color Palette & Logo

Before progressing to wireframes, I focused on building a clear visual system that would guide the app’s look and feel. Defining the color palette was not just about aesthetics — it was about usability and reinforcing the app’s purpose:

Motivation through design: I selected bright, energetic tones to make recycling feel approachable and rewarding

Consistency across screens: Establishing core colors early ensured that the interface would remain cohesive as new features and flows were added

Alignment with brand values: The palette reflects sustainability and trust, reinforcing the app’s mission to guide positive environmental action


Colors of the app: shades of green, shades of blue, accent colors: pick and yellow, and black & white shades, and Logo of the Recycle Chicago App
Colors of the app: shades of green, shades of blue, accent colors: pick and yellow, and black & white shades, and Logo of the Recycle Chicago App
Colors of the app: shades of green, shades of blue, accent colors: pick and yellow, and black & white shades, and Logo of the Recycle Chicago App
User Interface system with Button, bottom navigation, card, pill with indicator, and search bar components
User Interface system with Button, bottom navigation, card, pill with indicator, and search bar components
User Interface system with Button, bottom navigation, card, pill with indicator, and search bar components

Design System

For the Component Library, I combined the selected color palette with bold shadows and clean card layouts to create a modern, playful look. Beyond visual style, design system was important for this project in many ways:

Accessibility checks: I validated color contrast to ensure usability for a wide range of users

Faster iteration: As I gathered feedback, I could make global updates to components instead of redesigning individual screens, accelerating refinement

Consistency across the experience: With reusable components, every screen feels cohesive, helping users trust the product

By making these decisions early, I ensured that every wireframe and high-fidelity screen would feel purposeful, intuitive, and aligned with user needs.

High Fidelity Wireframes

Having established a foundation with user flows, mid-fidelity wireframes, colors, and UI elements, I was able to confidently transition into high-fidelity designs. Taking into consideration feedback from the mid-fidelity user testing, I added a screen where users could redeem points for rewards. In final testing, this feature proved to be one of the most appreciated by users.

high-fidelity wireframe of search page of Recycle Chicago App
high-fidelity wireframe of search page of Recycle Chicago App
high-fidelity wireframe of search page of Recycle Chicago App
high-fidelity wireframe of batteries search result page of Recycle Chicago App
high-fidelity wireframe of batteries search result page of Recycle Chicago App
high-fidelity wireframe of batteries search result page of Recycle Chicago App
high-fidelity wireframe of Scan feature page of Recycle Chicago App
high-fidelity wireframe of Scan feature page of Recycle Chicago App
high-fidelity wireframe of Scan feature page of Recycle Chicago App
high-fidelity wireframe of Scan feature results of Recycle Chicago App
high-fidelity wireframe of Scan feature results of Recycle Chicago App
high-fidelity wireframe of Scan feature results of Recycle Chicago App
high-fidelity wireframe of Virtual Bin page of Recycle Chicago App
high-fidelity wireframe of Virtual Bin page of Recycle Chicago App
high-fidelity wireframe of Virtual Bin page of Recycle Chicago App
high-fidelity wireframe of Impact page of Recycle Chicago App
high-fidelity wireframe of Impact page of Recycle Chicago App
high-fidelity wireframe of Impact page of Recycle Chicago App

Testing & Iterations

When I was ready to test my prototype, I created a User Test Plan, which included tasks that I wanted to test and metrics that would help me to measure success.

I recruited 5 participants and interviewed them over video call.

What users had to say:

  • Users liked how easy and quick the Scan function is

  • Users like modern design and ease of use

  • Most users skipped Onboarding due to the navigation not being clear

  • Search bar wasn't clear enough

  • Some users expressed concerns about the accountability of trust based recycling-rewards system

Iterations after User Testing

✅ Improved Onboarding Flow and reduced the rate of participants skipping it from 80% to 0%

✅ Changed Homepage Hierarchy to have the search function more prominent

✅ Improved Search Function to make it easy to find items by just starting to type them

✅ Changed Navigation Menu colors for better accessibility

✅ Added drop-off information for the non-recyclable items

6 wireframes illustrating iterations of the onboarding process
6 wireframes illustrating iterations of the onboarding process
6 wireframes illustrating iterations of the onboarding process
3 wireframes illustrating iterations of the onboarding process
3 wireframes illustrating iterations of the onboarding process
3 wireframes illustrating iterations of the onboarding process

04 / Outcomes

User-centered iterative design

Post-iteration testing confirmed a seamless onboarding experience. Users quickly understood the app’s purpose, achieved a 100% success rate in locating items via search or scan, and easily added items to the bin, as illustrated in a video on the right.

Post-iteration testing confirmed a seamless onboarding experience. Users quickly understood the app’s purpose, achieved a 100% success rate in locating items via search or scan, and easily added items to the bin, as illustrated in a video below.

Post-iteration testing confirmed a seamless onboarding experience. Users quickly understood the app’s purpose, achieved a 100% success rate in locating items via search or scan, and easily added items to the bin, as illustrated in a video below.

User Flows in action

The high-fidelity prototype represents the culmination of a research-driven, iterative design process from idea, to research, to User Journey and to Final Design. Every screen was validated through testing to ensure clarity, ease of use, and visual consistency.

Flow on the left illustrates how users can find an item either through the search bar or the search by category function.

The high-fidelity prototype represents the culmination of a research-driven, iterative design process from idea, to research, to User Journey and to Final Design. Every screen was validated through testing to ensure clarity, ease of use, and visual consistency.

This flow illustrates how users can find an item either through the search bar or the search by category function.

The high-fidelity prototype represents the culmination of a research-driven, iterative design process from idea, to research, to User Journey and to Final Design. Every screen was validated through testing to ensure clarity, ease of use, and visual consistency.

Flow below illustrates how users can find an item either through the search bar or the search by category function.

Conclusion

This project challenged me both technically and personally, but it became a meaningful learning experience. By listening to Chicago residents, I was able to identify real barriers to recycling and design an app that is not only informative but also fun, easy to use with a quick scan, and motivating through points and rewards. While I faced setbacks and moments of doubt, the process reinforced my belief that small, consistent actions can drive larger change. I’m proud of creating a product that reflects my values, taught me essential skills in mobile app design, and demonstrated how thoughtful design can encourage everyday sustainable choices.

05 / More Case Studies

This Case Study

Recycle Chicago

End-to-end Mobile App Design aimed to help Chicago residents with recycling

Next Case Study

Honoring Resilience

Responsive website design for a new non-profit organization