Recyclopedia

UX/UI Design
Project Overview
Recyclopedia is a mobile app that helps people learn how to recycle properly and creates a community that encourages healthy recycling habits. The primary challenge was developing an easily accessible tool that is comprehensive and easy to understand.
My Contributions
In this solo capstone project, my responsibilities included:
- Conduct primary and secondary UX research
- Developed information architecture
- Created wireframes
- Designed user interface
- Designed and conducted usability tests
Problem Scenario

Why is Recycling is so hard? 
Oftentimes, I found that many people including myself were confused when it came to recycling, even for common items. According to the National Waste and Recycling Association, around 1/4 of what people throw in their recycling bins actually ends up in the landfill. This is largely caused by "wish-cycling", which is the practice of tossing questionable items in the recycling bin, hoping they can be recycled. 

Accidents Caused by "Wish-cycling"

Another big problem is recycling contamination, which usually caused by people not properly rinsing the recyclables. Recycling contamination causes many problems for the recycling centers that receive your materials after collection. Mentioned in an article by Brucemetal, contaminants can expose workers to safety hazards and increase the amount of cost that must be spent on machine maintenance. Product residue can attract insects, rodents, and other undesirable pests into the recycling center.


As much as we all want to reduce waste and recycle as much as we can, wish-cycling is a real threat to the success of our curbside recycling program¹. Compared to many other countries, there are many potential improvements for the US recycling system. However, there are small steps individuals can take to become better recyclers. This motivated me to design a solution that makes it easier for people.

Competitor Heuristic Analysis - What's already out there?
Before jumping right into the design, I studied many existing products that tackle the same problems. Most of them are designed for specific cities and function as a dictionary for users to look up objects. Result pages are loaded with long paragraphs of explanations, which makes it hard to find the most important information on the first glance. Users would easily be overwhelmed by the ocean of words and immediately lose their patience to read through

Heuristic analysis/evaluation is a process where experts use rules of thumb to measure the usability of user interfaces in independent walkthroughs and report issues. Evaluators use established heuristics and reveal insights that can help design teams enhance product usability from early in development. I will present the results of heuristic analysis of three recycling apps that are currently top-ranked in the Android play store by using 3 of the Nielsen Norman Group's 10 heuristic principles.

Competitors feature matrix & evaluation

Secondary Research
User research- Who are the users? 
Interviews - Tell me about your experience! 

To better understand the users' recycling habits, struggles and their preferred ways of improvements, I conducted user research to collect users' firsthand recycling experiences.

on November 10, an initial screening survey was distributed to reach out to broad audiences for later interview recruiting. Within the next couple weeks, 20 answers were collected. 100% people think the current recycling system has problems, 35% of them think the current situation is very problematic and needs a lot improvement.

Among 20 responses, 5 people were selected to participate in my 30-45 minutes long user interviews via zoom meeting. Interview questions are designed to collecting data in the following aspects:

  • To establish a basic understanding of the interviewee’s daily recycling behavior and habit
  • What are the most common recycling system people use?
  • What are the shared challenges among interviewees during recycling?
  • What motivates/demotivate people to recycle?
  • What do people feel when recycling
  • How and where people were educated about recycling 

Affinity Map - What are the common topics?

Affinity mapping is such a powerful tool to organize ideas and insights collected from interviews. Through conducting user interviews and affinity mapping, I discovered more about people’s current recycling habits as well as potential focal areas. Here are some quotes from the interviews:

" I probably still don't know what I don't know (what is/isn't recyclable)."
"If other people don't care, then it doesn't really matter to me."
" Wish there is an all encompassing platform."


Some of the commonly mentioned topics included:

  • The desire for a comprehensive resource to help educate users on recycling
  • Encouraging better behavior through a consequence/reward mechanism
  • A visible and measurable way of explaining the impact of a user's recycling activities.
  • Creating a public community to provide encouragement and means to share and communicate 

I reviewed notes of the interviews, summarized and wrote down interesting points and ideas on sticky notes. Then I sorted the sticky notes into 7 groups

  • Problematic Issues
  • External Motivations
  • Internal Motivations
  • Learning
  • Easy Wins
  • Living Situation
  • Common Items
Affinity Map
Primary Research
Problematic Issues
External Motivation
Internal Motivation
Learning
Easy Wins
Living Situation
Common Items
Primary Research

Empathy Map - What are they thinking/feeling, hearing, seeing and doing?

Next, I created empathy map to visually organize insights, observations, and quotes collected from user interviews. This allows me to better understand user’s pain points, goals, feelings, thoughts, and behaviors. Empathy maps is also helpful for persona creations later because it bridge the gap between personas and design concepts.

Empathy Map - Skyler
Empathy Map - Taylor
Empathy Map - Charlie

Personas - Who am I designing for?

I took what I learned from the previous steps and created 3 different personas. Personas helped me identify and understand the target audience and the goals that need to be met.

To demonstrate the range of user’s knowledge and motivations, I designed an expert persona Skyler, a self-motivated beginner persona Taylor, and Charlie who requires more external motivations.

Persona - Skyler
Persona - Taylor
Persona - Charlie

Ideation
      +
Wireframing

User Stories - How might we?

Now that I know who am I designing for, next step is figuring out what I can do to help solve their problem. To help people enhance their recycling skills, the following question emerged:

  1. How might we create an all-encompassing tool to help people better understand recycling?
  2. How might we make it fun for people to learn and conduct recycling?
  3. How might we encourage people to be more aware of their recycling habits?
  4. How might we create a platform for a healthy community that helps each other?


Now it's time to brainstorm potential solutions for my targeted user groups. I took my pen and sketchbook out and sketched out initial ideas for each question.

How Might We Sketches

It seems a mobile app is an excellent platform that can accommodate the above solutions. I kept sketching out ideas of how the screens might look like for 3 Red Routes:

  1. Recycle and log an unfamiliar item.
  2. Recycle and log a familiar item.
  3. Test user’s recycling knowledge (semi-active study)

These sketches helped me visualize the functions and possible screens of the app without investing too much time on making pixel-perfect designs. Although they were rough, they ended up looking very similar to my final product. This also was extremely helpful when I share my capstone project to peers and friends because they have some graphic reference.

Site Map

To better visualize and organize the logic, I created site map and user flows that shows the steps users would take when interacting with this app.

Site Map


Wireframing +Wireflow

Based on these Sketches, I created clickable wireframes in Figma that also doubled as the low-fidelity prototype for the initial round of guerrilla tests. This was my first time building a complete project with Figma, I taught myself how to use a design system. This was especially beneficial because with well organized components, it drastically speeds up the iteration process in the future. But as a detail oriented designer, it has always been a challenge for me to not distracted by designing every little details.

1.Recycle and log an unfamiliar item.
2. Recycle and log a familiar item.
3. Test user’s recycling knowledge

Prototyping
       +
User tests

Initial Usability Test-Is this overall making sense to people?

Next, it’s time to test if my design makes sense to users. 5 people participated in the initial round of the usability test over a week. Each test session was 30~45 minutes over Zoom meetings. 3 tasks were assigned to users to examine whether there are any roadblocks in three red routes. 


Overall the test results show there are no major flaws in the Red routes, all participants completed the given tasks with no major difficulties despite some unclear placeholder contents. There were some valuable feedbacks and comments: 

  1. For items that cannot be recycled at home, there should be a clear sign on the item pages to remind users, and followed by “looking for the nearby recycling center” after. 
  2. The most recycled item of the week/month leaderboard can also appear on the home page.
  3. The progress bar for quizzes is too ambiguous.
  4. On the quiz page, having two next buttons is too repetitive.

Before and After

Another finding is that users need to be familiar with the product enough to use the floating button as a shortcut to recycling common items; they tend to use scan and search bars out of habit. This would most likely to require a onboarding tutorial that helps user to understand this shortcut feature.

Brand + UI Design

Moodboard

Moving forward to realize my app even further, I created high-fidelity prototypes for the next round of user tests. The brand color palette is inspired by colors from nature that evokes a light-weight and fresh feeling, which aims to subconsciously relieve the stress of learning recycling for users. Paired with a minimalist font style, users can browse information effortlessly.

WCAG Contrast Grid

I also tried to test whether my color palette meet requirement of WCAG regulation. I made sure to chose color combinations with enough contrast for legibility in my design.

Next, I applied the color palette and font in a quick sample screen design to further visualize my design. Because home screen is the most crucial and informative screen of my app, I decided to design this screen.

Sample Screens

After self critic and talked to my mentor, I got positive feedbacks of the color choices and overall design. However, the frosted glass effect can be hard to read in some cases, and it creates unnecessary visual distraction, so I decided to simplify my design in the nest step.

High-fidelity Prototype - Bring it to life!

Next step was to  build the first version of the high-fidelity prototype. It was very exciting to see the app getting closer to being realized. However; the more I build, the more details I feel are missing. New ideas also kept popping up all the time during this process. I had to work really hard to avoid getting carried away by these distractions and really focusing on the main functions of this app.

Sample of Hi-Fi Prototype - First Draft


Another round of usability tests is followed right away to validate the UI as well as user flows. 5 moderated remote study with 5 participants over Zoom over a week, each session is 30~45 minutes.

In each session, after briefly introducing the context of this project, participants were asked to take 5 minutes to explore the prototype freely. The following four tasks are given to the participants to complete:

  1. How would you log an item when you are not familiar with how to properly recycle them?  For example, single-use AA batteries.
  2. How would you log a common item that you already logged before. For example, Sparkling water cans.
  3. How would you test your recycling knowledge?
  4. How would you give positive feedback on your friend Chloe’s progress ?

Most participants gave positive feedback on the color scheme and think the name & logo speaks clearly about the intended subject matter. The placement of progress bar also was appreciated by users.

When participants explored the prototype there were occasions where they felt confused due to unfamiliarity of the function. Most of these confusions were rectified after they completed the first and the second tasks. An efficient onboarding walkthrough will be crucial to the success of this app.

Overall the test results show there are no critical usability issues in the four Red Routes as all participants completed the given tasks with no major difficulties. I iterated the design based on the following comments:

  1. Texts are not legible
  2. Back button and notification icon would cover content and hard to read
  3. Less sentence wrapping
  4. Keep sentences’ structure consistent in preparing steps when logging items
  5. The design of logo does not read as "A"
  6. Streamline route 1 more - only show one button on item detail page, then ask users to select finding nearby station or log now on next screen
  7. On preparing screen, users expressed they want learn more why they need to prepare items in certain ways when logging an item


Hi-Fi Prototype Iterations

Reflection

This was my first UX design project, many lessons were learned during the whole process. Undoubtedly, there is so much more room to improve Recyclopedia, and I might take the opportunity to iterate or design a new function to pair up with this one. 


As much as I enjoyed making a product that might potentially benefit my personal passion and help more people to make positive environmental impacts, I learned that UX design is not about the designer but users. It is as important to understand the problem and the users as to build a beautiful and functional prototype. Affinity mapping and personas really helped me to remove myself from the project and focus on being objective when making decisions.


Due to the time limitations, I did not invest in creating on-boarding experience for Recyclopedia. However, three rounds of user tests all indicate this is a vital part to make this a successful app. 


Another potential improvement is to add a way to log common items with voice-assistant like using Siri or Alexa. As an android user, it is important to explore users' behavior on other platforms as well in order to make my future projects more universal, and able to create a smoother experience for different users. 


Thanks to all the participants in my interviews and user tests, I received many valuable feedbacks and inspirations. In my opinion, user testing is the soul of UX design and the key to a successful product that cannot and should not be skipped. 


I also want to thank my mentor John's help and support along the whole journey, who made this whole process so fun and enjoyable. 


You can try out the prototype with this link

References & Resources
Back to Top ↑

Want to work together?

If you like what you see and want to work together, get in touch!

Let's Connect!
Let's Connect!