Re - cycle

Re - cycle: An End-to-End App

Client

Re - cycle (fictional)

Role

UX/UI Designer, UX Researcher

Tools

Figma, FigJam

Timeline

80 Hours - November 2021

View Prototype

Background

Recycling is important in order to reduce the amount of waste in landfills and conserve natural resources.

However, it can be difficult to know what can be recycled (and where it can be recycled!). Due to this confusion, items don't end up being recycled because materials are contaminated or thrown out.

Challenge

Around 80% of items in landfills could have been recycled. How can we design a solution that will increase recycling rates?

Solution

A simple and straightforward end-to-end app that allows users to look up if an item can be recycled and where it should go.

EMPATHIZE

Research Goals

We want to know how people view recycling and what would help them do it more often.

Research Objectives

Understand what motivates people to recycle.
Understand why items aren't recycled correctly or thrown in the trash.
Understand what competitors do in the market space.

Research Methodologies

Competitive Analysis
Survey

I chose competitive analysis because I wanted to see what competitors are doing in the recycling space. Initially, I was planning on conducting user interviews.
‍
However, from speaking with my design mentor, I decided to do a survey instead. An anonymous survey gives people more space to be honest about their recycling habits.

Research Results

A handful of US cities—including Seattle and Austin—have an app attached to the servicing company, WasteConnect.

Outside of the WasteConnect apps, the user experience of other apps was difficult to navigate and didn't have information on my city.

11/12 respondents recycle because they want to help the environment.

The top reason for not recycling is simply not knowing if an item is recyclable.

The most important feature users wanted was the ability to look up how to recycle an item.

Meet Adam

I created a persona to guide my design process. I summarized my research with his persona quote below.

DEFINE

Task Flow

I created a task flow to get a sense of how a user would interact with the app. Since Adam's main goal is to be able to figure out what is recyclable easily, I determined that an appropriate task flow would be searching to see if an item is recyclable.

IDEATE

Initial Sketches

With the task flow and Adam in mind, I used sketching to brainstorm ideas about how someone could search to see if an item is recyclable. I imagined that Adam could use a search bar or click on a category of items (i.e. electronics or paint.) I explored using iconography, photos, and text within the screen.

Lo-Fi Wireframes

Using my sketches as I base, I created lo-fi wireframe screens. As I made these wireframes I thought, "What would make it the easiest for Adam to use?" For that reason, I included a simple search and result screen.

Hi-Fi Ideas

I first approached this project using stock images. However, I found that it didn't look cohesive. That's why I decided to create my own icons.
‍
Additionally, as I designed I remembered that different places have different recycling rules. That's why I added an address field at the top of the page, so results would reflect where someone lives. I also added an option to scan a barcode, as that would be another quick and convenient option for Adam.

Creating A Logo

I sketched out logos inspired by the brand words eco-friendly, green, environment, easeful, serene, and earth. When I digitized the logos, I played with the curved arrow in between in a variety of typefaces. I looked at the weight of them and how they would look at a smaller size. Since it can be difficult to see the arrow at a smaller size, I put the arrow within a circle for improved visibility.

UI Kit

I created a UI Kit to tie together all of my design elements.

TEST

Prototype

In a group critique session, I got feedback about the brown and green colors looking dull and the serif font being difficult to read. I made revisions on those aspects for the prototype I made for usability testing.

Usability Test Results

I conducted moderated usability tests with 6 people over Zoom. I asked testers to input their address and look up if three different items were recyclable: pizza boxes, batteries, and peanut butter jars. All users were able to successfully complete the tasks and they described the experience as "easy" and "straightforward."

‍The big things were that users:

Were confused about why they were inputting their address.
Were confused about the search bar icon being a Q.
Understand what competitors do in the market space.

I created an affinity map to group the results of my usability test and prioritize revisions. Check it out here.

Updated Screens

Updated App Walkthrough

View Prototype

NEXT STEPS

I would test my revised prototype and incorporate the feedback from those tests. Additionally, I would work with developers to handoff my prototype.

In order for this app to be successful, it would need to have accurate and updated information about products. I imagine that this app would start in one city, and then expand into other cities.

I would continue to iterate on the design and possibly add features that people were looking for like:

Ability to see the actual impact of your recycling.
More straightforward viewing of whether or not you can recycle an item with icons.

‍What I Learned
‍
‍It was fun to take ownership of a project and focus on the UI design of my icons. When I started this project, I didn't really like the design, but I couldn't exactly put my finger on it. Iteration was really important for this project, and I'm happy with what I came up with. It's a reminder that things take time and sometimes time away can be helpful.