Recycling Web App
HCDE Master’s Project
Research and design an interactive system that promotes sustainable recycling practices in Seattle office environments.
Lead designer, contributing researcher - I independently completed the final wireframes
Group project through HCDE M.S. program at UW
Second Nature is an educational app designed for touchscreen devices that engages users in office environments through gamifying recycling. It serves as a one-stop shop for recycling guidelines, featuring data visualizations of real time in-office recycling stats, crowd-sourced content and local restaurant waste profiles.
With the understanding that "designing for everyone is designing for no one," my group and I crafted a very explicit "How Might We" question in order to optimize the UX for a specific user group: Seattle employees working in office environments.
HMW: How might we create a tool that encourages Seattle employees in office environments to recycle more accurately.
In order to better understand our target users' behaviors, needs and motivations, we developed a set of research questions to guide us throughout the user research phase of the project. The questions were targeted at discovering how much our users know about recycling, how much they care about it, and how they perceive their contribution to sustainability.
What stops people from recycling?
Do people understand why they should recycle?
Do people follow recycling guidelines?
How do people perceive their "recycling identities"?
We posted a survey online and collected data from 106 Seattle residents. We chose to start our research off with this survey to cast a wide net and gain an understanding of the general atmosphere and culture surrounding recycling. The survey also helped us shape a better view of our users' demographic makeup, which we reflected in our personas.
After the survey, I conducted card sorting exercises with 6 participants. During the exercises, I instructed participants to sort images of items into "recycle," "garbage," and "not sure" categories while thinking aloud. During the card sorting, it became clear where the biggest areas of confusion lay in terms of understanding recycling guidelines. This method allowed me to witness our participants hesitation and listen to their questions and internal dialogue.
Extreme User Interviews
Because our survey results indicated that our target users lean towards the extreme pro-recycling side of the spectrum, extreme user interviews helped us understand how recycling fits into our users' value structures and dig deeper into their habits and goals. Here are the questions we asked 7 participants, who were screened as "extreme recyclers." I moderated 1 of the 7 interviews.
What compels you to recycle?
If you don't know if something is recyclable, what do you do?
If there was a tool to help you sort your recycling would you use it?
What would you consider a usable tool/solution to help promote recycling?
What are some recycling tools you have used or not used and why?
Assumptions confirmed regarding recycling education leading to more accuracy and frequency
Motivations for recycling: guilt, shame and environmental consciousness
Deterrents of recycling: knowledge gaps and lack of time
After distilling down our core user research findings, we developed 3 personas to embody our users and guide our design process. Our primary users are busy Seattle professionals who care about recycling and sustainability, but don't necessarily understand all of Seattle’s regulations on what is recyclable and what's not. These personas helped humanize our users and were used to focus our designs on solving for our users’ core recycling goals and pain points.
With the design problem space and target users defined, we had a solid foundation to begin ideating on how our tool would function and be used. Before jumping right in, I created a couple mood boards to serve as emotive inspiration of how I want users to feel when they use Second Nature.
Sketching Round 1
My team and I began rapidly sketching a wide range of design ideas for what was to become Second Nature. My sketches (select few shown below) involve: education, energy efficiency, gamification and IOT. Some of my ideas included an automatic waste sorting receptacle, a recycling guide with voice, photo or gesture recognition ... and what actually ended up becoming our final design!
Sketching Round 2 & Design Rationale
My team and I compiled our strongest sketches and discussed the pros and cons of each. Ultimately, we wanted to design a tool that empowers users to make the right recycling decisions rather than an auto-sorting device that would prevent users from learning and changing their behavior.
As a team, we decided to move forward with one of my ideas. Shown below are my first sketches of Second Nature.
My team and I set out to fine-tune two core concepts that stemmed from my above sketches: 1) data visualization of real time recycling stats 2) an educational recycling guide. We spent the bulk of our efforts designing the latter, due to end-of-quarter time constraints. Here is a photo of our paper prototype, which was tested and iterated upon.
The home interface shows two separate categories of waste products. On the left-hand section, the vertical column displays popular search items with green or red signifiers of whether something is recyclable or not. In the right-hand section, the user can click a restaurant tile to view waste products specific to the chosen restaurant. This layout is designed to minimize the time it takes the user to get the answer they need.
The user also has the option to add to the tool's gallery of content. To engage the user, we decided that the gallery of waste products should not only be personalized to an office's local lunch spots, but should also give the users the option to contribute any missing content. This, we felt, would be popular in office environments where both "team-building" and social responsibility are important parts of the company culture.
We tested the above paper prototype with five participants. Through this testing we discovered some areas we could strengthen prior to moving forward with wireframing.
Core findings: Waste item images look click-able and request page is difficult to navigate to
Main changes made to design: Vertical scroll changed to horizontal scroll; clearer labels of recyclables; re-design of the request page
I lead the design phase, working independently on the lo-fi wireframes show here(I used Axure and photoshop). I had multiple design critiques with my team, incorporating feedback and iterating on the final lo-fi wireframes.
Reflection & Constraints
As a result of quarterly time constraints, only one round of usability testing was completed with the paper prototype. The final solution would have been stronger had there been time for more iterative testing and designing of the wireframes. The class deliverables focused much more on upfront research work and ideation, so the final designs are not as strong as I think they could be.
The time constraints also resulted in a de-prioritization of visual design. After the quarter was over, I revisited the wireframes and worked independently to increase the fidelity of the designs. I fleshed out some possibilities of what the final design might look like. Here are a couple UIs from my favorite option.