Designing an application to improve recycling habits
Role: UI Design Lead, Interaction Design
Client: US Census Bureau
Type: Mobile Optimized Web App
Time Frame: 6 weeks( Nov 2021 )
Team: 10 person team of Software Engineers, Data Scientists and (4) UX Designers
Tools: Figma, Figjam, Illustrator, Photoshop
Primary Contribution: Led UI & interaction design, Competitive Analysis, Visual Design
Created in Figma
Context
As part of the US Census Bureau open Data for Good Challenge my team was tasked with using Federal open datasets to create a high impact digital tool that solves problems for the public. We chose to focus on the issue of Climate, Resilience, and the Natural Environment.
Problem
Most plastic products have a recycling code that implies the plastic is recyclable, when in fact only a few types are recyclable and even fewer are accepted by local recyclers.
Users want to recycle their plastics but have a poor understanding of which plastics are recyclable in their area. The current market does not offer a fast way for users to determine which products are recycled in their area.
How might we use US Census Bureau data sets to create a product that helps reduce the consumption of single use plastics and encourages best recycling practices.
Hypothesis
If we create an application that allows users to quickly find out if a product is recyclable in their area, with practical recommendations for disposal, user recycling and responsible shopping habits will improve. Educating the public on how to better recycle may also reduce the burden on recycling service providers by reducing the amount of non-recyclable materials they must sort through.
Research Goals
- Determine potential of marketplace product for the client
- Analyze competitors to determine gaps in the marketplace and potential opportunities
- Discover applicable Census Bureau data sets
- Identify main features
Competitive Analysis
We conducted a competitive analysis of direct and indirect competitors and found that direct competitors provided many useful features but expected an unrealistic time investment from the user. Indirect competitors provided a similarly deep set of features but were far more engaging through well developed user interfaces and product focused solutions.
Direct Competitors - Joule Bug, My Little Plastic Footprint (Apps focused on reducing user impact on the environment)
- Offer gamification features to improve habits, but not engaging enough to keep users coming back
- User interfaces are cluttered with unconventional iconography and naming
- Learning curve and time commitment too steep, not enough value to encourage returning users
- Appeal to dedicated environmentally conscious people but too involved for casual users
Indirect Competitors - Plant Snap, Think Dirty (Apps with product scanning features that provide information and alternatives)
- Think Dirty provides an excellent example of providing deep information without being overwhelming
- User interfaces are very clean, easy to understand
- Incorporate product scanning in a fun way, providing a wealth of interesting information
- Users stay more engaged by analyzing their product use in the real world through scanning technology
View PDF
User Interviews
Participants
- 4 User Interviews
- 13 in-depth questionnaires
- 45% Urban / 55% Suburban
Topics
- Recycling Habits
- Recycling industry knowledge
Key Findings
- 82% Throw all perceived recyclable items in one bin
- 12% Sort recyclable materials
- 6% Recycle only if option is available
- 100% are not clear on what happens after they recycle items
- 82% of users feel their community should provide more information on recyclable materials
Recommendations
- Users need clear instructions real-time
- User want more knowledge on impact made
"I don't know which numbers are recycled in my city or where they go"
"I have a recycling bin and I put things in there, but does it get recycled?"
"It's kind of difficult to find info on what codes our recycling facility accepts"
"Information is available, but not made visible, so people have to look"
Design Phase
Sketching
Our team conducted a design studio remotely via Zoom to quickly identify the main features and functions.
I focused on a simple, clean interface with minimal learning curve. We had a great number of feature ideas but I believed a solid foundation of conventional features was critical before we went outside the box. To keep users returning we had to provide fast scanning of products at home and in the store.
Iteration one
In the interest of speed and maintaining a consistent visual scale, I built our original Figma design file with imported interface templates and examples for my teammates to use. We quickly built our first iteration with simple versions of our core functions, product scanning, recycling location mapping and recycling information.
User Flow
Usability Testing
Design Comments
- Add "Read More" option to highlight critical information
- Clarify "Alternative Products"
- Solidify global navigation
- More info on local drop-off
- Increase text size
Design Comments
- "It's educational and helpful. I recycle, but wasn't sure I was doing it right..."
- User want more knowledge on impact made
Affinity Mapping
Visual Design
Iteration two
Armed with insights from our first test we began designing our second iteration. During this process I provided design support to my team while beginning to develop our style guide, color scheme and creative visual elements.
Design Progression
I used the color schemes examples in our competitive analysis (through extraction with Adobe Color) as inspiration for the tone of our work, while trying to incorporate colors reminiscent of the environment (blues and greens since Ocean plastic is a key plastics issue).
Visual Design Breakthrough
During the design process we decided to avoid a tone that focused on ocean plastics in favor of a broader environmental feel. In that vein I researched visual styles and began to think about a more local, familiar tone that is more applicable to an app designed to help a user find local recycling options.
I pitched my concept to the team through a walkthrough of the visual concept, interactions, motion design elements and potential for future iterations.
Style Guide
Due to time and resource constraints our initial research consisted of a survey distributed through social media, Slack and Discord.
Greenscan at a glance
The current recycling code system is confusing to the average consumer; not only are consumers unaware of what the numbers represent, they frequently assume that any plastic with a code is recyclable.
Through Greenscan users can scan a plastic product or manually enter a recycling code to see if it is recyclable in their area and how. A search of our database will also yield educational information about what each recycling code means, what impact the products make and what potential alternatives are.
MVP Prototype
A brief walkthrough of the live Greenscan prototype
Next Steps & Retrospective
- Enhance "Greener Choices" through content design focusing on "Reuse"
- Create a responsive web version and landscape mode for mobile
- Implement motion design elements to add a level of fun and hidden function discovery
- Build and test a feature for emailing corporations to advocate for changes to product or packaging
- Develop crowdsourcing for product database
UX / UI Designer | Visual Designer
Sculptor | Photographer | Fine Artist
Contact
