Wireframing, UI & Brand Design
Wireframing, Prototyping & Testing
User Research & Testing
Visual / Brand Design
May – Aug '19
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.
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.
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:
MRFs need recyclables that are better sorted and cleaned.
MRFs want better ways to educate consumers about recycling without generating confusion.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
We formed our research plans and sought out participants, while also tested what features and content should be provided.
We further refined the features, content and designs and made sure that they intuitive and accessible to all the users.
We finalized the user flow, information architecture, and moved towards final branding, graphic, and High-fi UI design.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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!
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:
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 ;)