seond nature.png

Recycling Web App

seond nature.png

Recycling Web App

HCDE Master’s Project

 
 

Design Challenge

Research and design an interactive system that promotes sustainable recycling practices in Seattle office environments. 

 

My Role

  • Lead designer, contributing researcher - I independently completed the final wireframes

  • Group project through HCDE M.S. program at UW

 

Final Product

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.

 

 

User Research

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.

 

Research Questions

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.

  1. Who recycles?

  2. What stops people from recycling?

  3. Do people understand why they should recycle?

  4. Do people follow recycling guidelines?

  5. How do people perceive their "recycling identities"?

 

Survey

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.

Group.png
 

Card Sorting

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.

Dawn card sort.jpg
 

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.

  1. What compels you to recycle?

  2. If you don't know if something is recyclable, what do you do?

  3. If there was a tool to help you sort your recycling would you use it?

  4. What would you consider a usable tool/solution to help promote recycling?

  5. What are some recycling tools you have used or not used and why?

 

High-Level Findings

  • 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

 

Personas

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.

 

Mood Boards

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. 

My moodboards showcasing how using our product can help people feel more connected to the environment

My moodboards showcasing how using our product can help people feel more connected to the environment

 

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.

 

Paper Prototype

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.

 

Usability Test

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

Raw notes documenting each usability issue along with design recommendations

Raw notes documenting each usability issue along with design recommendations

 

Design Phase

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.

 

Product Flow

Screen Shot 2018-10-15 at 8.43.55 PM.png
 

Lo-Fi Wireframes

Recycling Guide -  This is the home UI, which shows three different categories of information: recyclable waste items, non-recyclable waste items and restaurant profiles. In the top two vertical sections, the user can swipe through the rotating gallery of content to find out if their waste products are recyclable or not. These categories display the most commonly searched items first, which reduces effort for the user. In the bottom section, the user can also choose to search for their waste product by selecting the restaurant it comes from. The search bar at the top of the interface enables the user to search the entire gallery of content.

Recycling Guide - This is the home UI, which shows three different categories of information: recyclable waste items, non-recyclable waste items and restaurant profiles. In the top two vertical sections, the user can swipe through the rotating gallery of content to find out if their waste products are recyclable or not. These categories display the most commonly searched items first, which reduces effort for the user. In the bottom section, the user can also choose to search for their waste product by selecting the restaurant it comes from. The search bar at the top of the interface enables the user to search the entire gallery of content.

Search Results:  When a user enters key words into the search bar and selects "search," this page emerges with relevant search results. Each waste item is tagged with either a green circle, indicating that the waste item is recyclable, or a red circle around it, indicating that it is garbage.

Search Results: When a user enters key words into the search bar and selects "search," this page emerges with relevant search results. Each waste item is tagged with either a green circle, indicating that the waste item is recyclable, or a red circle around it, indicating that it is garbage.

Localized Restaurant Profiles:  These restaurant profile pages surface when a user selects a restaurant from the home UI. The restaurants included are specifically local to the given office that's using Second Nature. These pages show a custom gallery of waste from the selected restaurant, indicating which items are recyclable.

Localized Restaurant Profiles: These restaurant profile pages surface when a user selects a restaurant from the home UI. The restaurants included are specifically local to the given office that's using Second Nature. These pages show a custom gallery of waste from the selected restaurant, indicating which items are recyclable.

Gamification via Live Stats:  This page is reached by selecting the graph icon from the menu. This UI displays real-time data collected through weight sensors placed at the bottom of office recycling and garbage bins. Offices can create teams and compete to see which team is the greenest by easily viewing their recycling versus garbage percentage scores, engaging users through gamification.

Gamification via Live Stats: This page is reached by selecting the graph icon from the menu. This UI displays real-time data collected through weight sensors placed at the bottom of office recycling and garbage bins. Offices can create teams and compete to see which team is the greenest by easily viewing their recycling versus garbage percentage scores, engaging users through gamification.

Adding an Item to the Tool:  The "Add" Page This page is reached through the "Add" icon from the menu. Users can add new waste items and restaurants to the tool to make it custom to the location of their office. This user generated repository of content gives the user a sense of ownership of the tool, deepening their engagement.

Adding an Item to the Tool: The "Add" Page This page is reached through the "Add" icon from the menu. Users can add new waste items and restaurants to the tool to make it custom to the location of their office. This user generated repository of content gives the user a sense of ownership of the tool, deepening their engagement.

 

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.