GreenScan

Case Study

GREENSCAN

UX/UI Designer・October - November 2021

Stumped as to whether that VitaminWater bottle can be recycled? Or do you shrug and put your faith in your apartment building?

New York City produces 12,000 tons of waste every day, and has no incinerators or landfills; only 17% of waste is recycled.

GreenScan helps us recycle better, together.

GreenScan 2.jpg

Overview

Part of the US Census Bureau Open Data for Good Grand Challenge

GreenScan is a web application focused on reducing single-use plastics using open-source federal government data. This product raises awareness of single-use plastics and encourages users to create sustainable recycling habits.

Key Features

  1. Scan product barcode to analyze how recyclable the plastic is

  2. Learn the meaning and lifecycle of recycle codes

  3. Find nearby recycling locations that accept designated recycle codes

  4. Discover sustainable, alternative products

Platform

Web Application

Role

UX/UI Designer

Team

4 UX Designer

2 Developers

1 PM

1 Data Scientist

Tools

Figma, FigJam, Notion, Slack, Zoom

Time

3 Weeks,

joined mid-way through project

Public Demos
Sprint Goal

Create a product based on open-source federal data that solves user problems.

Contribution

In this product design sprint, I designed the initial wireframes and developed the Map feature.

November 10, 2021: General Assembly Product Club Showcase

December 13, 2021: US Census Bureau, The Opportunity Project Summit 

Research

Our Research Lead conducted research via Google survey and user interviews prior to my involvement.

 

Click on the button below to explore artifacts from their research, including discussion guide, competitive and comparative analysis, and UI analysis.

The Situation

After speaking with a mix of suburban (65% ) and urban (45%) recyclers, the overwhelming consensus was that recycling is confusing. 

Here's why:

01

Mixed Information

Participants were confused at every stage of the recycling process, from buying sustainable products, to what happens after an item is tossed in the recycle bin. 

02

Unclear Impact

Many participants felt disheartened by the process, especially when they searched for information on what the local recycling facility accepts. Why bother if nothing actually changes as a result of their actions?

03

Ambiguous Process

As one participant said, "Information is available, but not made visible." Participants struggle with understanding their municipality's most up-to-date regulations.

The Solution

01

Clarify

Educational Resources

02

Localize

Map Feature

03

Actuate

Product Analysis
via Barcode Scan

Provide context for plastic products, the recycling process, and suggest alternative products. 

Empower local change through a map function that highlights which businesses accept certain recycling codes.

Encourage action through direct impact. Understand immediately whether a product can likely be recycled at home or should be recycled elsewhere.

 

The Opportunity

How might we empower communities to recycle mindfully by providing actionable, local recycling information?

 

Early Design

Concept Structure

Based on user research, our Research and UI leads prioritized features that inspired immediate action. As such, the primary product feature revolved around scanning and delivering information in real-time to the user. You can see a low-fidelity rendering of the "Scan Product" wireflow to the right ☞

Early wireflows were communicated to developers while they built the back-end.

 

Explore the "Early Design Artifacts" documentation below for user flows and iteration on the "Scan a Product" Wireflow.

GreenScan_Scan_wireflow

Early iteration on how scan feature would work.

Initial Wireframes

I joined the project at this stage.

Data Set Challenges

An early challenge to this project was access to data on the composition of individual plastic products. The US Census Bureau site listed a data set that would provide insight and verification on these products; the data, however, had restricted access.


One possible workaround was access to data on plastics that most commonly washed up on beaches. With this in mind, the first iteration centered upon that understanding. Meanwhile, our Data Scientist and PM pursued the blocked information and sought additional data sources that fit the challenge requirements.

From Data to Design

The Design Team ran a design studio exercise via Zoom where we sketched out low-fidelity ideas on paper and shared with one another. Using the Design System our UI lead had imported into Figma, I took elements from the discussion and transformed our ideas into three possible wireframes for the home screen. I based the dummy copy on using ocean-based data, as mentioned in the previous section. 

Screen Shot 2021-12-13 at 4.24.31 PM.png

Ultimately we chose a hybrid screen focusing on a minimalist aesthetic that would also emphasize our CTA to scan a product barcode.  After speaking with the developers, we decided to adjust the product from a native application to a web application for broader accessibility; as such, we removed the bottom navigation bar.

Feature Development: Map and Location Filtering

People understand recycling in various ways—by number, by specific product, and by general keyword—which made the map's filter feature initially complex. We were able to scale down based on Engineering's capacity and by using data from Earth 911 via their API.

Recycle

Considering Google Maps was a familiar interface, we modeled the map itself after it, and used their API to provide directions. We also incorporated a "List" and "Map" toggle view.

We had hoped for a "smart search," but engineers determined this out of scope. We then settled on a filtering overlay.

GreenScan_Map MidFi UI.jpg
Reduce

Initial design had a complicated filter overlay that would allow people to search by recycle number or by common product.

These would have been too complex for the Engineering team. Luckily, midway through, our Data team found a workable dataset from Earth 911, and we leveraged their API.

Screen Shot 2021-12-13 at 6.46.33 PM.png

No. 1: Filter by number sequence

No. 2: Filter by keyword sequence

Earth 911 API Integration

Initial Testing

“It’s educational and helpful. I recycle, but wasn't sure I was doing it right. This could bring so many people awareness.”

Frame 887 (1).jpg

—Participant No. 3

Initial testing and concept validation was conducted on mid-fi wireframes via Zoom; most participants used desktop.

 

100% of users were able to successfully navigate the pathways, and 60% found the pathways intuitive. The biggest structural point of confusion was using the hamburger menu vs the logo to return to the home screen. 

All in all, the concept proved successful from initial testing.

Iteration

“I would change my brand loyalty to a business that provided a one-stop [recycling] shop.”

—Participant No. 5

Revisions & High Fidelity

01

GreenScan_HiFi_UI.png

02

GreenScan_GreenerChoices_UI.png

03

GreenScan_Map List_UI.jpg

04

GreenScan_MapFilter_UI.jpg
 

Since participants mentioned recycling can be stressful and confusing, we wanted visual elements to friendly and lighthearted.

We believe there are a lot of opportunities for gamification beyond the MVP, such as a points system for gauging our impact on the environment and encouraging mindful habits. 

 

Implementation

GreenScan_Dev Handoff Sample.png

Handoff

Handoff sample with wireflow and specifications to assist engineers.

Files were handed off to developers through Figma. Each screen and their individual components were broken down with annotations to help with construction.

 

Engineers were able to download each visual element and re-construct them.

Live Product

Screen Shot 2021-12-06 at 4.55.23 PM.png

The live product was deployed on Vercel and Heroku. 

Due to the limits on the barcode scanning API, the current version of GreenScan can only accommodate scanning 100 items per day.

http://www.greenscan.app

 

Next Steps

Data Verification
  • Continue pursuing blocked US federal government data on plastics to enhance information from Earth911

Crowdsourcing Features 
  • How might we leverage the experience of plastic recycling advocates to...

    • enrich and enliven our data on local recycling options?

    • provide insightful alternative products to the Greenscan community via “Greener Choices?”

Software Engineering
  • Create native app for app stores

  • QA & bug testing

  • Further iterations of MVP

Content Development​
  • Enhance Greener Choices through content design focused on "Reuse"