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.
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
-
Scan product barcode to analyze how recyclable the plastic is
-
Learn the meaning and lifecycle of recycle codes
-
Find nearby recycling locations that accept designated recycle codes
-
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.
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.
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.
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.
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.”
.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
02
03
04
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
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
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.
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"