Maggie Howell | UX Designer

SortSmart

Recycling is in Your Hands

Project Type: End-to-end case study exploring digital solutions for US residents currently navigating a faulty recycling system.

Role: UX/UI Designer, Researcher

Designing for: IOS

Tools: Design Thinking Process, Human Centered Design, Figma, Figjam, Google Analytics

Timeline: 10 weeks

View Hi-Fidelity Prototype

Discover

The Problem Space

Primary Research

Methodology + Findings

Methodology + Findings

Experience Map, User Stories, + Epics

Experience Map, User Stories, + Epics

Usability Testing Plan, Notes, + Prioritization Matrixes

Usability Testing Plan, Notes, + Prioritization Matrixes

User-Centered Design

Define

Wireframes + Prototypes

User Testing

UI + Branding

Develop

Deliver

Hi-Fidelity Prototype

Next Steps

Introduction

Why is recycling important?

The Bad News

The Good News

Only 21% of residential waste makes it through the entire recycling process.

3/4 of the waste produced in the US is recyclable, according to the EPA.

77% of people believe recycling makes a difference.

3/4 of the waste produced in the US is recyclable, according to the EPA.

Only 21% of residential waste makes it through the entire recycling process.

Secondary Research

Why is there such a disconnect between our high motivation and efforts, and the less-than-stellar rate at which it is actually being done?

No Federal Recycling Program

There are over 9,000 community recycling programs throughout the nation, each with different standards for what materials can be collected.

This can be cause for major confusion and incorrect sorting of garbage.

There are over 9,000 community recycling programs throughout the nation, each with different standards for what materials can be collected.

This can be cause for major confusion and incorrect sorting of garbage.

Source: Environmental Protection Agency

No Standardized Labeling

60% of consumers are confused about what and how to recycle.

A lack of standardized labeling across different items and brands leads to identification misinterpretation and sorting.

Source: Consumer Brands Association

Lack of Public Trust

Source: the Recycling Partnership

Only 17% of residents feel well-informed about what happens to their recycling.

6 out of 8 people with recycling programs say they do not recall getting any kind of communication from their municipality.

Surely the larger, more progressive metropolitan areas are doing their part to stay ahead of the curve?

While San Francisco and Los Angeles lead with high recycling rates, New York City falls drastically and uncharacteristically behind!

This data provided the missing puzzle piece in finding a focus for my project.

How might we offer residents of the New York City Metropolitan area a simple way to eliminate confusion around household recycling to validate their contribution to positive global change?

Primary Research

Research Goals

Participant Criteria

Find out what improvements residents would like to see in their current disposal programs.

Find out what improvements residents would like to see in their current disposal programs.

Understand where people draw the line in their willingness to participate and defer responsibility to the city.

Understand where people draw the line in their willingness to participate and defer responsibility to the city.

Learn about the residents of NYC and their recycling habits, access to resources, and views toward municipal mandates.

Learn about the residents of NYC and their recycling habits, access to resources, and views toward municipal mandates.

Current residents of the New York City Area (Bronx, Queens, Manhattan, Staten Island, Brooklyn)

Current residents of the New York City Area (Bronx, Queens, Manhattan, Staten Island, Brooklyn)

Partake in sorting household trash and recyclables for curbside pickup

Partake in sorting household trash and recyclables for curbside pickup

Adults 18+ with a high school diploma or above

Adults 18+ with a high school diploma or above

View More: Methodology and Findings

After reviewing the insights from my primary research, I found that the most compelling data pointed to user’s confusion in identifying recycling labels and how to correctly sort them.

77.3% of New Yorkers would change their recycling habits if labels were easier to decipher.

With no easy way to decipher recycling codes and a lack of municipal outreach, interview participants felt set up to fail.

92% of Americans do not understand recycling labels.

User-Centered Design

I created Antonio, my user persona, based on my key research insights.

View More: Experience Map, User Stories, and Epics

With a refined understanding of my user’s goals and pain points, I designed the simple user task of scanning an item and learning how to dipose of it.

Inspiration + Sketching = Wireframes

Collected inspiration using resources like Dribbble and Behance

Collected inspiration using resources like Dribbble and Behance

Used that inspiration as a reference to sketch out my ideas

Used that inspiration as a reference to sketch out my ideas

Translated those sketches to a low-fidelity wireframe

Translated those sketches to a low-fidelity wireframe

For each location screen in my design, I:

Low/Mid-Fidelity Prototypes

When creating my prototype, I really wanted to make sure the task flow presented a clear solution for my users, so I started with a very low-fidelity wireframe in terms of layout. My first round of user testing gave me ample feedback to then expand on the design for my second iteration.

View Low-Fidelity Prototype 1.0

View Mid-Fidelity Prototype 2.0

User Testing

I conducted two separate rounds of user testing.

In each round, 5 individuals (ages 26-38) were tasked with scanning an item to dispose of it correctly.

100% successful completion rate by all 10 participants.

Most feedback concerned the layout of content, language of the copy, and feature design.

View More: Usability Testing Plan, Notes and Prioritization Matrix

Moodboard + Color Exploration

App Name + Wordmark

Color Palette

Developing a Visual Identity

I used my second prioritization matrix to iterate on a hi-fidelity prototype. Confident in what I had created as a user experience, I began to explore colors, font, and copy to develop a visual identity for my design. I wanted my app to elicit friendliness, accessibility, efficiency, and community, so I gathered inspiration to reflect those traits.

I explored various color options, utilizing the WCAG color contrast guidelines so that I was designing with accessibility in mind.

Sort

S art

UI Colors

Brand Colors

UI Colors

When I saw that my original color extractions did not meet the WCAG guidelines, I found success in deeper brand colors that worked better with lighter neutrals.

Color Injection

UI Inspiration that focused on bright tone combinations helped me see how I could inject colors into my screens for a hi-fidelity design.

I sketched out design ideas and played around with fonts and icons for SortSmart, a name I felt was a strong representation of my brand.

Hi-Fidelity Protoype

Working diligently to address my user feedback, I simplified the home page and created an overlay menu to hold all of the various tabs. I also cleaned up the copy and graphics throughout the design

View Hi-Fidelity Prototype

Key Learnings

What’s Next?

From a research perspective, I found a few flaws in my recycling survey. Many of the questions I asked were not actually helpful in ascertaining information related to my problem, so I ended up with less data than I originally wanted.

From a research perspective, I found a few flaws in my recycling survey. Many of the questions I asked were not actually helpful in ascertaining information related to my problem, so I ended up with less data than I originally wanted.

From a research perspective, I found a few flaws in my recycling survey. Many of the questions I asked were not actually helpful in ascertaining information related to my problem, so I ended up with less data than I originally wanted.

Less is more in UI. I was very excited about all of the features I could make available to my users, but had trouble finding out where to put them when the key focus was on one task. Simplifying content and copy was a challenge, albeit a necessary one.

Less is more in UI. I was very excited about all of the features I could make available to my users, but had trouble finding out where to put them when the key focus was on one task. Simplifying content and copy was a challenge, albeit a necessary one.

Build out a flow for a more complex recycle task, such as mixed packaging material or finding a disposal site for an item.

Ideate a design for “my history” page. This would reflect all of the past scanned items and allow the user to see the outcome of their efforts.

I had a few people reveal themselves in my anonymous survey and request a summary of my final project, so I’d like to reach out update them on my findings.

Build out a flow for a more complex recycle task, such as mixed packaging material or finding a disposal site for an item.
Ideate a design for “my history” page. This would reflect all of the past scanned items and allow the user to see the outcome of their efforts.
I had a few people reveal themselves in my anonymous survey and request a summary of my final project, so I’d like to reach out update them on my findings.