WeRecycle_Hero.png

WeRecycle

Role

UX/UI Designer

Tools

Sketch, Figma, Procreate, iOS Design System

Time

5 months

Coffee

46 cups

WeRecycle is a mobile app designed to help users quickly discover what they can and can’t recycle wherever they are, and also provides interactive learning opportunities to understand how their actions make a difference.

UX Deliverables: Research plan, survey, user interviews and testing, competitor analysis, personas, user stories, content strategy, site map, user flows, wireframes, prototype

Challenge

As of 2015, humans have generated 6.3 billion metric tons of plastic waste, and only 9% of that waste has actually been recycled. Scientists predict that if present trends continue, by 2050 there will be 12 billion metric tons of plastic in landfills. That amount is 35,000 times as heavy as the Empire State Building. Knowing the repercussions, how do we get people to recycle more?


User Research

I developed a research plan to explore the problem and understand the different pain points users experience when recycling. My research consisted of a survey, 5 user interviews, and an immersive study. Before the survey, my assumption was that WeRecycle would have to convince people to care about the environment, but the problem proved to be much more complicated:

Even when I know I should recycle, my subconscious still falls back on the cultural norm that whatever seems easiest at the time is good enough.
— User Interview

Recycling isn’t convenient

95% of users actually do care about the waste and pollution problem, but they’re still less likely to recycle if it’s not convenient, they’re confused, or they’re in a hurry.

Hard to see the benefits

Nearly half of people either rarely or occasionally feel like they’re making a difference when they recycle. For one interviewee they thought the pollution problem was so large that there was nothing they could do to ever make a difference.

No validation or feedback

Interviewees said they don’t feel confident when they recycle, because they don’t receive any feedback on whether they’re doing it correctly. 

Recycling is confusing

Although 50% of users claim to have read their local recycling guidelines, 67% of people still experience confusion about what’s recyclable. Every interviewee noted that recycling labels were often too complicated to understand.

Trusting intuition over research

Because recycling tends to happen on the fly, most users rely on their own intuition when determining what’s recyclable. One user said they describe recycling as “wish-cycling” in their home.

Google Survey results gathered in 2018 from 91 survey responders.

Google Survey results gathered in 2018 from 91 survey responders.

Immersive Study

For one afternoon, I followed the recycling habits of a conservationist while taking on the task of cleaning my fridge (way overdue). I studied my city’s recycling rules and regulations, and had to research whether I could recycle something before throwing it away. This study validated the same pain points users indicated in the survey and interviews:

My recycling bin after the immersive study. I legitimately broke a sweat and realized I buy way too much packaged food.

My recycling bin after the immersive study. I legitimately broke a sweat and realized I buy way too much packaged food.

Key Takeaways

Answers to questions are hard to find. My local recycling website is garbage (pun intended) — the website isn’t responsive and the content is poorly organized.

I don’t recycle if it’s too difficult. Multiple times, I had to fight the urge to throw away plastic containers with food that was hard to remove.

I’m really bad at recycling. Discovered that the garbage bags I’ve been using for 2 years to line my recycling bin aren’t even recyclable.


Competitor Analysis

Now that I had a better understanding of the different pain points people experience with recycling, I wanted to learn how other applications were trying to solve these problems. I discovered that there’s not many environmental apps in the industry that are user friendly, which is likely due to a lack of funding as many of these apps are government funded or non-profit organizations.

These apps also don’t balance features of gamification and education well — one feature tends to fall short rather than working together for a more seamless experience.

WeRecycle Competitor Analysis.png

Key Takeaways

  • Although it’s the most poorly designed and difficult to use, iRecycle has the most potential of the 4 apps because it solves the top reasons why users don’t recycle: not being able to find a recycling bin and being confused about what’s recyclable.

  • My Little Plastic Footprint asks users to to accept pledges that commit oneself to taking actions that improve the environment. People tend to hold themselves more accountable when they formally pledge to do something.

  • Joulebug provides achievements when users complete environmental actions, but it uses confusing terms like “buzzing” where plain language would be less confusing.

iRecycle uses crowdsourcing to help people find the nearest waste bins. It also comes with a guidebook that shows users how to properly dispose of different types of waste.

iRecycle uses crowdsourcing to help people find the nearest waste bins. It also comes with a guidebook that shows users how to properly dispose of different types of waste.


User Personas

I created two distinct user personas that visualize user needs, desires, and pain points using the information gathered during research. These manifested themselves into people I (not so cleverly) named “Conservation Kate” and “Ben the Busy Body.” Although they’re two different individuals, they each combine the different characteristics of many people.

ConservationKate.png
BenBusyBody.png

Problem Statement & User Stories

Based on the user research, I came up with the following problem statement to encapsulate the focus of WeRecycle:

Problem Statement

People are CONFUSED by what they can and can’t recycle and think the benefits don’t outweigh the INCONVENIENCE of recycling, but they CARE about the environment and are WILLING to make sustainable choices when they feel CONFIDENT and MOTIVATED to make the right decisions. 

User Stories

From the competitor analysis, I determined there was a large opportunity to use gamification in the environmental space that both motivates users to live more sustainably while also providing them with the information they need to feel confident as recyclers in one streamlined experience — bridging that gap would be WeRecycle’s goal.

My original list of features for WeRecycle consisted of 12 different items, but I paired them down to 5 key features and broke them down into smaller tasks that could be implemented as deliverables, tested, and then iterated upon. Each task is written from the user’s perspective and why it benefits them. Examples below:

user-stories-werecycle.png

I tend to dream big, so writing tasks in the form of user stories helped me stay focused on the goals of each user persona. Any ideas outside of the 5 defined features would get placed in the backlog or labeled “Version 2”, so that I could still capture their importance and revisit them for a future iteration of the project.


Content Strategy

I conducted 1 in-person card sort and received 6 responses from users who completed the exercise remotely via Optimal Workshop. Participants represented WeRecycle personas — those who are passionate about reducing waste and want to do an even better job, and those who are interested but feel like they lack the time and education to build more sustainable habits.

Hey! That’s my friend Sam! She’s just the best.

Hey! That’s my friend Sam! She’s just the best.

Key Takeaways

  • Say what you mean and mean what you say. I assumed most users would attach the word “Recycling” to tasks related to the Map. But most of them understood the context and used simpler, more succinct language (ex. “Recycling Map” became just “Map”).

  • Make it visible. Users placed the “Tap to record whenever I recycle something” task in multiple categories, which lead me to believe they may want access to this feature in different views. As a result, this task became part of the main navigation so users could quickly get there from any screen.

  • Group similar tasks together. 80% of participants grouped together “View history of my recycling activity” and “See my current level as a recycler,” which I categorized under two separate features. For the prototype, I placed these two tasks on the same screen because it was more intuitive for the user. (Note: the concept of “levels” became “achievements” later).


Sitemap & User Flows

Sitemap

The data gathered from the card sorting exercise informed my sitemap and allowed me to see how users might relate to and make connections with the application:

1.6 Sitemap.png

User Flow Examples

After the sitemap, I dove into creating user flows of each feature to get a birds eye view of how the user might navigate through the different features of the application.

1.4 Recycle Map.png
1.5  Recycle Log-werecycle.png

Key Takeaways

Perhaps the biggest takeaway from sitemaps and user flows was finding the points of entry in which WeRecycle requires the user to login, create an account, or accept permissions. As a rule of thumb, I didn’t want to ask for information from the user until the moment it was needed.


Wireframes

Wire framing is really where WeRecycle came to life for me. When I started to wireframe, I was able to gain deeper empathy for the user and walkthrough the application like a storybook. Below are a few examples from the wire-framing process:

Map

This wireframe shows how I start to think about users navigating the map to find nearby recycling bins. I simplified this UI by removing the handlebars functionality in the first screen, because I wasn’t sure how users would interact with this feature yet — do they need a quick view of nearby locations that they can hide/show or would they click the icons on the map to find out more? Before adding that complexity, I wanted to test a simpler version with users first.

wireframe-find-bin.jpg

Recycle Tracker

This wireframe demonstrates the beginning the stages of how I start to think about users logging items they recycle, earn achievements for those actions, and learn about sustainability. Users were confused about how all three of these pieces were connected, and this UI drastically changed after user testing (before/after in next section) based on feedback.

wireframe-log-item.jpg

Search

This section of the app allows users to search for an item in order to determine it’s recyclability in their location. In the first image, I start to explore a classic search and category listing of material types modeled after Etsy and AirBnB. After testing Google Lens and other image recognition software, I decided to switch directions and use this technology because it’s made huge advancements in accuracy over the last 5 years.

Because knowing what’s recyclable in the U.S. is dictated by local policy, no state or county has the same standards for what they accept as recyclable waste. I love the idea of creating a nationwide database of images that local governments can customize to their own rules and regulations. Less duplication and more sharing of technology!

Version 1 of search

wireframe-search-classic.jpg

Version 2 of search with image recognition

wireframe-search-image.jpg

Visual Design

For user testing, I wanted to provide people with a visual experience of the WeRecycle app that was as close to reality as possible. I didn’t want to reinvent the wheel, so I used Apple Design Resources in Sketch as a launching point to define typography guidelines and design elements.

StyleguideRedesign.png

Logo

WeRecycle is a minimal typographic logo that uses color to focus the eye on the word “Recycle” — this allows the user to understand the app’s purpose simply from the logo.

Color

I chose a simple color palette of two primary colors (green and black) to keep things simple and minimize distraction for the user—recycling is a confusing enough topic.

The color green is a common choice when it comes to environmental topics, but I chose a lighter variation of the hue to communicate the feeling of youthfulness, excitement, and energy.

Typography

I chose to follow Apple’s Human Interface Guidelines and use SanFrancisco Display to maximize readability and to take advantage of the Dynamic Type feature in iOS to improve accessibility.


User Testing & Iterations

I created a prototype of WeRecycle and facilitated usability testing sessions with 5 different people. Each participant was asked to complete 6 tasks using the prototype, so that I could observe how well they were able to use the app in order to reach their goals. You can view my interview script and testing tasks here.

I watched for moments when users experienced confusion or encountered problems, and got great feedback on where the app could be improved. Below are some improvements that were made as a direct result of user testing:

Image Search Feature

It took users a few seconds to read through the search results content to determine whether the laundry detergent container was recyclable, so I identified this as something that required additional work and testing. Below is a wireframe of an alternative solution to the above and adds an additional step for the user to complete—if the item in question is plastic, the user needs to identify its plastic number before the results are shown.

With this change, the user only sees “Yes” or “No” in the results, rather than both.

Before

 
ImageSearch_Before.png
 

After

ImageSearch_After.png

Button Labels

One of the improvements I made was changing the design of button labels within the Image Search screen. Most users thought the labels, rather than the buttons themselves, were the clickable element which caused confusion about how to accomplish each task.

Following the lead of Google Lens, I removed these labels in favor of relying on iconography to communicate each task — search with an image or search by taking a photo. The buttons would include the appropriate labels for screen readers, and the onboarding process would help guide first time users to each method of dynamic image searching.

After this change, no other users experienced confusion moving forward:

ImageSearchButtons_BeforeAfter.png

Recycle Tracker

A majority of the users didn’t understand the recycle log screen. There were too many features packed into one screen and they didn’t understand where to start or how everything was connected.

Iteration 1: I re-organized the different sections into a tabular navigation, so the user could focus on one thing at a time but still have the flexibility to move between each feature. During testing, the remainder of users had no trouble understanding each section, how they were related, and what actions they could take. This design change was a major improvement.

Iteration 2: People were still struggling with the idea of “Learn” and how logging what you recycle unlocked various lessons. I decided to simplify the navigation and include this content within the user’s profile to make these features more secondary to the app. Rather than “Learn” and complicated locking, I transformed these into courses for those interested in digging deeper into environmentalism and fighting climate change:

RecycleTracker_BeforeAfter .png

Redesign

After two years, I decided to revisit this project for a redesign to see how far I’ve grown as a designer. Below you can see the old and new designs. I think it’s important to revisit old work — for any project — to see how the product can improve, and also to challenge ourselves to be better.

Learning never ends, but this redesign helped show me that I’m improving as a designer who’s able to think about branding, modern aesthetic, usability, and accessibility as part of the whole design process.

Old Designs

WeRecycle_Old.png

New Designs

WeRecycle_Redesign.png

Conclusion

WeRecycle is still a work in progress, but that’s sort of the beauty of user experience—it’s an iterative process of thinking, making, testing, and then repeating those steps all over again to make a solid product that people can actually use.

Perhaps my favorite thing throughout the design phases, was being able to connect with users on all different levels. One survey participant reached out to me personally to say the survey inspired them to start a recycling program at work. How cool is that?

Making connections with people and understanding where they come from, is really the heart of user-centered design. Get to know people. Ask questions. Dig in. You never know who you’re going to inspire.