New RecycleFund thmbnail.png

UX Design, UI Design,

RecycleFund App

Duration

March  2022 - May 2022

Team

Me, Anna Sharfman, Cristian Lopez, Katherine Cimini

Tools

Figma, Adobe Illustrator

Overview

RecycleFund is an app to motivate neighborhoods of Los Angeles and surrounding areas to recycle more?

Problem

Christine needs a way to find recycling centers because she wants to improve the environment and earn cash for items she no longer uses.

Solution

We believe that by developing an app that will help locate recycling centers with a reward system for people that recycle, we will achieve getting more people motivated to recycle. We will know this to be true when we see an increase in the data on the number of people that went to their nearby recycling location.

Design Process

As the experienced designer for this project, I was responsible for both strategies and visual design.

Group 533.png

Discover

Qualititave Research

We interviewed 5 people that recycle through zoom & in person to understand how often and why they recycle.

Questions

1. Do you recycle? If so, how often?
2. Do you get money from recycling? If so, how much on average?
3. Why do choose to recycle?
4. What would make you recycle more often?

5. Is recycling more of a chore to you or something you enjoy?

Key insights derived from the interviews

  • People wish they can get more money for their recycling materials because they don't get enough.

  • If they get more money for their materials, then it will encourage them to recycle more often.

  • Some people recycle their items about once a month or every two weeks.

  • Not only do they do it as a chore, but they do it to get money and to help the environment.

Quantitative Research

A survey was conducted using qualtrics with 65 people to identify how often, why and if they have some knowledge on how to recycle.

Briefly elaborate on what you want to dcuss 10.png

77%

out of 65 people are in agreement that they recycle often.

Briefly elaborate on what you want to dcuss 11.png

67%

out of 65 people are in a disagreement that they know of locations to go to recycle electronics

(batteries, old TVs, etc.).

Briefly elaborate on what you want to dcuss 12.png

77%

out of 65 people are influenced to recycle because they want to help the environment.

Key insights derived from the survey

  • A lot of people recycle to make money, to help the environment, and to make money.

  • About 40% agree that they don’t know where to recycle electronics.

  • The majority of the respondents don’t know where some specific materials like batteries, hazardous, or construction
    items are recycled.

Competitive Analysis

competitive analysis.png

Define

Personas

Creating personas helps to understand who our product’s users are, what their goals and frustrations are, and for what purposes they will use the product. The result should be believable people with their own experiences and values.

Group 536.png
Group 729.png

Ideate

Userflow

To outline all necessary functionality I created a simplified flow diagram of the main tasks the user can do.

Group 24.png

Style Tile

Once the user flow was complete, I started by defining the typography, color, icons, illustrations, and buttons. 

style tile_update.png

Mid-fidelity Wireframes

Once I organized all my insights from the define phase, I began to build my mid-fidelity wireframes, using my user flow and style tile as a guide.

Splash screen.png
Sign Up.png
Waste Categories.png
My Rewards (after Activity).png
Gift Card.png
Onboarding 1.png
Dashboard grid fixed.png
new_Items 3.png
Redeem Points (from main activity).png
New Profile.png
Onboarding 2.png
Support.png
autozone_new web icon.png
Redeem Points (from main activity) giftcard).png
Profile.png
Onboarding 4.png
Service Request.png
Locations Listed.png
Cash Back.png
New Profile-1.png
Onboarding 3.png
Tips.png
Locations from Home pg.png
Cash Back-1.png
Add Debit Card.png
Sign In.png
Tips 3.png
Rewards (after user redeems).png
Cash Back-2.png
Add Debit Card-1.png

High-fidelity Wireframes

Here are some of the final design screens.

iPhone 13 Pro-1.png
iPhone 13 Pro-2.png

First Screens

These screens provide a short guide for the new user about the app’s features, it is important to show them key functions and their descriptions.

Sign in/ Sign up

Users can sign in to their account if they are already registered.

Users can also sign up if they are not registered.

iPhone 13 Pro-3.png
signup_iPhone 13 Pro.png
iPhone 13 Pro-4.png
iPhone 13 Pro_new.png

Tips

Users can read tips on how to recycle.

Profile

The user can edit their profile information. They will also be able to add their payment method, allow notifications, and get support.

The QR code is for the recycling location to scan, so the user can receive their points or the user can also scan the QR code that's on their receipt after they recycled their items.

iPhone 13 Pro-6.png
iPhone 13 Pro-7.png
iPhone 13 Pro-8.png
iPhone 13 Pro-9.png

Waste Categories

Users can search for an item that they want to recycle to find the nearest location that accepts that item. Then, after the items are recycled, they will receive points for rewards.

Reward System

With the reward system of points and rewards, the user has more motivation to engage in recycling more often. This whole process is more like a game.

iPhone 13 Pro-10.png
iPhone 13 Pro-11.png

Test

Usability Testing

After the visual design was completed we tested the prototype with 5 people to see how user-friendly the app is. The test was conducted over Zoom video calls where the participants were given the following tasks while we observed how thy navigated through the app.

Tasks

1. Can you find tips about knowing your plastics?
2. Can you find a recycling center that accepts car batteries?
3. Can you add your credit card to your Profile?

4. Can you redeem your points in Rewards as cash back with the option of 1-3 business days?

Suggestions to make the experience better

  • Add more space between the like and share icon in the location information screen and tips screen.

  • Change the rewards bar because when the user reaches the 500 points goal. It looks like a button and when it's empty after the user redeems their points it looks like a text field.

  • Change the button color to grey on the screen that shows 0 points after the user redeems their points because it shows active.

Implementing Feedback

The suggestions from the usability testing were considered and the following changes were made.

500 points new screen example.png

Changed the design of the reward bar to be more detailed. The new bar shows different sections of each 100 points, so the users can see how far they are from reaching the next 100 points.

o pints new example.png

Removed the back arrow since the user can’t go back after redeeming their points. Added a new button that says “My Activity,” so the user can go to the main screen that shows their activity of the items that they recycled. The users won’t also be able to click on the “Redeem Points” button because they have no points to redeem.

tips screen_new.png

Added more space in between the heart and share buttons, so they are not too close to each other and the user won’t have trouble pressing one button. I also moved up the body text and left-aligned the title.

Next Steps

Come back to fix the suggestions from the feedback. Then, after I fix the changes I will conduct more user testing.

More Case Studies

salsa&beer_thumbnail.png

UX Design, UI Design

Salsa & Beer 

main small thumbnail.png

UX Design, UI Design

CSUN Connect App