A Little Summary
Team
Tianhao He
Wireframing, UI & Brand Design
Wireframing, Prototyping & Testing
Secondary Research
User Research & Testing
Skills
Wireframes
Prototypes Testing
UI Design
Visual / Brand Design
Timeline
May – Aug '19
14 Weeks
Tools
Figma
Sketch
Google Suite
Brief
ECRecycle is a communal volunteer-led program that aims to collect, classify, and educate within communities that may not already have recycling services. It provides online services, including material recycling session scheduling, educational content, and personal feedback. There are also weekly local recycling drop-off sites inside communities run by volunteers, making 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 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 two:
01
High Contamination Rate
MRFs need recyclables that are better sorted and cleaned.
02
Low impact on recycler education
MRFs want better ways to educate consumers about recycling without generating confusion.
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.
The team working on affinity diagram
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.
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.
Affinity Diagram
Motivations
The main motivations are the monetary incentives and the benefit it brings. Interviewees said they would recycle more if the monetary incentive from hand in the materials increases. They also mentioned how being responsible for the environment or being a role model for the kids makes them willing to recycle more.
Affinity Diagram
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.
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.
Swipe to see more →
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.
Swipe to see more →
Nicholas always wanted to recycle, but his apartment didn't provide the basic infrastructures, and the closest drop-off center was too far. It was so frustrating that he couldn't help making our planet cleaner.
An email from the leasing office caught Nicholas' attention, saying a recycling drop-off site would operate this Friday in the community. Nicholas was excited and he downloaded the provided app called ECRecycle.
He learned some recycling knowledge from the app and followed the app's instructions to rinse, collect, and compress bottles and cans. He also placed the cleaned materials separated from his regular garbage.
On Friday, he brought a bag of recyclables to the drop-off location, where he met Ashley, who works as a recycling volunteer.
Ashley scanned Nicolas' QR code for his data entry and tracking. She also indicated Nicholas to put his materials on the weighing machine.
The weighing machine automatically calculated the total recyclable material and synced the data to Ashley's app for further inspections.
Ashley was able to categorize the materials further and give feedback to Nicholas on where can be improved.
After Ashley's checking, the recycling process was finished. Nicholas also instantly got the data and feedback in the ECRecycle App.
All the recycling data, including the amount of each material and the rewards, were all shown in the app. Nicholas can now finally enjoy a more convenient and intelligent recycling experience.
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:
Prototyping & Testing
Content
We formed our research plans and sought out participants, while also tested what features and content should be provided.
Prototyping & Testing
Engagement
We further refined the features, content and designs and made sure that they intuitive and accessible to all the users.
Prototyping & Testing
Clarity
We 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 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 iterations of changes 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.
NOTABLE CHANGES
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.
NOTABLE CHANGES
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.
Main Feature
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.
Main Feature
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.
Main Feature
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.
Main Feature
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 & Next Steps
It was such a fantastic opportunity to work with fellow amazing designers and researchers. I got the chance to meet amazing people from different industries and learn more professional research and design methods from our instructors, and here are the two spots I think I learned the most during the process:
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 Efficiency
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. Still, with 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.
You can also check out Jiaming's future iteration on how ECRecycle can also be implemented more efficiently with the current curbside pickup system.
Thank you for being here along our journey, and see you in the future ;)