2019 - UX Research, UI Design

ECRecycle

Volunteer-led communal service that aims to educate, classify & recycle.

brief

ECRecycle is a communal volunteer-led recycle program I created with my fellow designers to improve recycling quality and recycling rate through around local communities digital and physical recycling experiences.

Main Contribution

Wireframes, prototypes, UI, visual and brand design

Duration

May 2019 – August 2019

Team

Tianhao He, Jiaying Zhou, Jiaming Mao, Mason Noboru

Tools

Figma, Sketch, Google Suite

Educate, Classify, and Recycle.

ECRecycle is a communal volunteer-led program that aims to collect, classify, and educate within communities that may not already have recycling services. It provide online services that include material recycling session scheduling, educational content, and personal feedback. There are also weekly local recycling drop-off sites inside communities that run by volunteers, which make the whole process easier. All these services create a closed loop that not only facilitates people to recycle more materials properly but also reduces the current burden on material recycling facilities.

THe team working on paper prototypes

The Problem

Since 2001, China was the biggest buyer of American recycling. Much of the world, especially America, has been handling a large part of the recycling by exporting everything to China. Until Operation National Sword in 2018, China banned several categories and materials from being imported and only accepts waste with under 0.5% contamination rate. This implemented operation helped expose American Recycling deficiencies: MRFs (materials recovery facilities) need to put more effort into improving recyclables' quality and ridding recycling contamination. The additional costs, which are generally around 300 million dollars per year, can be significantly reduced if MRFs receive cleaner recyclables.

Qualitative Research

Based on these preliminary data, we further conducted more qualitative research by visiting the MRFs to get more insight and understand what the industry needs. During the process, one of the employees at Athens Services gave us this quote:

“Something as small as a greasy pizza box can mess up a whole batch of recyclables. Sometimes people would even throw things like water hoses, which would jam an entire sorting line.”

After interviewing and understanding MRF's general workflow and technologies, we were managed to conclude the current pain-points into the following three:

  • High contamination rate
  • Incorrect recyclables jamming the machines
  • Low impact on recycler education

They give us a clearer idea of what problem we need to solve and what our vision is.

visiting athens services' mrf in la

Our Vision

How might we educate and motivate average recyclers in order to reduce contamination in their recyclables?

Understanding the Users

To further understand what our potential users need, we conducted 15 interviews with people aged 18 to 54, who have different experiences and unique points of view with recycling. Some interviewees provided helpful feedback regarding their opinions on what they know about recycling, why they recycle, and what problems they are facing. These insights helped us in the following process of creating the affinity diagram and our service's personas.

Affinity DIagram

We organized raw data from interviews in order to analysis the behavior pattern behind what people said using an affinity diagram. All of the data are categorized into 3 major categories, including Knowledge, Motivations, and Behaviors.

The team working on affinity diagram
Knowledge

Most interviewees have limited knowledge about recycling. The knowledge often comes from school, conversation with friends and parents, and simple instructions provided by recycling companies. The limited knowledge also leads to loose categorization and misconceptions about how MRFs works.

Motivations

The main motivations for the interviewees are the monetary incentives and the benefit it brings. Interviewees mentioned they would recycle more if the monetary incentive from hand in the materials increases. They also mentioned how being responsible for the environment, benefiting others, or being a role model for the kids makes them willing to recycle more.

Behaviors

The interviewees also gave us insight into their regular recycling behaviors, where we noticed fascinating patterns as well as mistakes. Some interviewees don't do in-depth cleaning or categorization, and they also have distinct recycling schedules based on the provided facilities and the number of recyclables they have.

Creating Personas

Prior to the final personas, we already created two rounds of mockup personas based on our perceptions waiting to be validated. With the insight we got from the affinity diagram, we further iterated these two personas with different backgrounds, intentions, and habits to build empathy for our users while covering as many potential users as possible. These two personas, Markus and Ashley, also indicate two main user groups for our service: recyclers and volunteers. Both of them are going to participate in the user journey in their own ways.

The Solution

Before we settled on our exact solution, we also examined some of the existing drop-off or recycling solutions, including RePlanet and GoodWill, to see their business model and disadvantages. A lean canvas for our service is also introduced during the process to make sure our solution is viable.

Lean Canvas

The lean canvas not only gave us a better overview of what our service is doing better compared to the available solutions but also led our way to make sure that our service is financially practical when we introduce it to the MRFs. This was when we decided that ECRecycle will be a communal program within the local community that involves both volunteers and recyclers while providing more convenient recycling services, more effective educational solutions, and more compelling motivations.

User Scenario

After deciding how our service is going to be, we imagined how both our personas would fit into the process of using our service and interact with each other. During the process, one persona will act as a volunteer, who provides recycling assistance, suggestions, and feedback, while the other persona will be the regular recycler who brings in recyclables.

As our primary user scenario, we focused a lot on how the digital product plays a significant role in helping the user understand the knowledge, request and perform a recycle, and receive feedback more effectively. This was also when we started developing prototypes to accompany the scenario.

Prototyping and Testing

During prototyping and testing, we conducted three rounds of user testings with 15 people in total based on Nielsen Norman's theory. Based on the participants' feedback, we iterated our prototype four times from low-fi sketches into our final design. We separated our whole process into 3 phases: Content, Engagement, and Clarity. In different phases, we all have different goals and progress:

  • Content: Formed research plans and participants. Tested what features and content should we put in the mobile app.
  • Engagement: Further refined whether the provided features, content and designs were accessible to the users or not.
  • Clarity: Finalized the user flow, information architecture, and moved towards final branding, graphic, and High-fi UI design.
Low-fi Wireframes

We started our low-fi wireframes with the process of developing the primary scenario. With some of the early stages of sketches, we were able to visualize a preliminary idea of what screen or content the user is going to be looking at, when the user is going to be notified or interact with the app, and how the user is going to finish the whole process using the app. All of the sketches gave us a solid foundation for the future user tests, iterations and improvements.

Mid-fi prototypes
Digital Prototype and Paper Testing

The first mid-fi prototypes are based on our first digital version of the previous wireframes. We transformed lots of our early-stage ideas into interfaces with basic elements and pages to be more understandable for the participants. We also printed them out as paper prototypes for testing, marking, and pointing out changes.

Our first version of mid-fi with things need to be changed

We also separated our group when working together: two people mainly focused on prototype development and iterations, while the other two focused on user testing and feedback gathering. This strategy significantly improved our efficiency and allowed us produced four rounds of changes related to different parts of our design.

NOTABLE CHANGES
Educational Content

Originally we placed the educational content in setting up a recycling appointment, but multiple participants reported how redundant this process is and how vague the information provided in the prototype is. Based on this feedback, we redesigned the mandatory reading process and created denser, more interactive educational pages for the user to reference as they wish.

Linear Process

The linear process of finalizing the recycling appointment initially contains numerous checking and educating steps, but the participants reported the lack of skipping options and lengthy process. So we simplified the process with far fewer steps and provided choices for users to skip steps, including checklist and education content, and directly go to the time setting and appointment setting steps.

Frequently Used Features

One of the essential features of our service is the customized tracking and feedback system with user registration and QR code scanning, but the participants reported that getting the QR code is tiring due of the code is unique after each drop-off or educational process and the setting up process is unavoidable. We rethought how the system works, made the code unique to each user when they register their account, and made it accessible right on the home screen when the drop-off site is operational.

Final mid-fi prototype for primary scenario

Final Design

Educate, Classify & Recycle.

Home, Discover and My

After signing in, the user will see three different sections ECRecycle provides: Home, Discover, and My. The user can check whether the recycling drop-off service is available in the Home tab and see their recent recycling data, community record, and rewards. The Discover tab is where the user can find all the knowledge regarding recycling, including materials, tips, and more. If the user needs to see all previous records or configure the account or the app, they can go to the My tab.

Recycling

As soon as the community drop-off service is available, the users who opt for notification will be notified. If the user is familiar with the process of drop-off recycling, they can directly go to the drop-off site with their QR code. Suppose the user is not familiar with the process. In that case, they can always choose "What to do?" to get acquainted with some basic recycling knowledge, a checklist to help him prepare his materials, and instruct him to the site.

Discover

The Discover tab is a throughout place for users to get familiar with all the knowledge related to recycling and materials. Different content sections are provided. Users can dive into various topics or articles to find detailed guides, facts, and even AR models that help them identify their materials or trash.

Record & Feedback

After finishing the recycling at the drop-off site, with the volunteer's help, the users will get detailed feedback, including their recycled materials, how many rewards they earned, what challenges they finished, and providing feedback on the whole experience. We hope this tracking and gamified experience can further encourage the users to keep participating the program and recycling effectively.

Branding and Visual Design

When it comes to our service's naming, ECRecycle is direct and straightforward enough: the abbreviation of Educate, Classify and Recycle. For the color, we chose a green that follows the Material Design color guideline that provides both the eco-friendly idea while being not overly saturated and user friendly. A darker green and white complete the brand color and the logo of ECRecycle to give it a consistent and calm look.

Design system

We also created a design system to ensure the interface has consistent font sizing and design element throughout all the pages. We chose Nexa as our main font considering its modern and geometric shape, making it a great header and display font. For paragraphs and reading content, we chose SF Pro, considering its excellent readability in smaller sizes.

Complimenting the font and the content, we created a series of iconography to make the interface more intuitive. Based on the amazing Myicons library, we were able to find icons that fit our categories and infographics perfectly and created a filled variant, making them suitable in different supplemental colors and places. We chose SF Symbols for our button icons, considering it is natively implemented in SF Pro, making the design more coherent.

Learnings and Next Steps

Professional Interview & Field Research

During the process, I learned the importance of getting professional perspectives and feedback from people who work in the industry and the effectiveness of actual field research. These things gave our group a lot more concrete idea of how MRFs work and their real problems, making our solutions more viable and practical.

Group Efficency

The creation of ECRecycle is one of the most challenging for us so far. Under the hood, we altered our ideas, solutions, and scenarios multiple times, but with the collaboration, communication, brainstorming, and proper task assignment, we are proud that we improved our group efficiency and delivered our final design!

What's next?

For ECRecycle there is clearly a lot more things that we can add and improve. For the next step we are planning to expand the project further in the following points:

  • Further finalize and develop the second scenario and design for volunteers
  • Do more extensive user testing on our high-fidelity design and further improve the user flow
  • Incorporate more cost-effective designs, including code scanning and digital feedback for people living outside the community or inside individual houses, into the current MRFs' trash picking process.

Thank you for being here along our journey, and see you in the future with ECRecycle ;)

Thank You for Viewing :)