Green Tomatoes: Carbon Footprint of Food
Nudging consumers toward more eco-conscious grocery shopping choices
Task
Create a website that encourages consumers to make more eco-conscious grocery shopping choices by educating them on the urgency of climate change and the impact of food
Overview
Green Tomatoes is a website that empowers consumers to make eco-conscious food choices at the grocery store. Based on insights gathered from user interviews, concept testing, and usability testing, I designed and developed a website featuring:
- Data visualizations that educate users on the relationship between food and climate change
- A quiz that assesses users’ grocery shopping habits and provides personalized actionable insights
As the lead designer and team member with the most front-end experience, I was responsible for both the design and development of the Green Tomatoes website, including four of five data visualizations.
Final Product
Data vizualizations that educate consumers on the environmental impact of food
The homepage of the Green Tomatoes website uses data visualization and storytelling to educate users on the urgency of climate change and the relationship between food and carbon emissions.
I designed and developed four data visualizations, two static and two interactive.
Personalized recommendations for reducing your carbon footprint from food
The Green Tomatoes website invites visitors to take our quiz to assess their food shopping habits and receive personalized recommendations for how to reduce their carbon footprint from food based on their budget, dietary restrictions, goals, and frequently bought groceries.
User Interviews
Through affinity mapping, we identified common goals, motivations, and behaviors among our millennial participants:
- Want to learn more about environmental issues and make eco-friendly purchases but often don’t because:
- Lack of go-to sources of information
- Time, convenience, and financial constraints are prioritized higher
- Predictable grocery shopping habits
I created three storyboards to ideate on different solutions for how we could empower consumers to make more eco-friendly buying choices at the grocery store.
A: Educating users on the environmental impact of food
A online resource that provides information about the relationship between food and climate change.
B: Looking up products while grocery shopping
An app that would enable consumers to look up information about the environmental impact of specific products while shopping in the grocery store.
C: Personalized assessment and recommendations
An online personalized assessment of users’ current grocery shopping habits that provides recommendations on how they can do better.
In concept testing, participants showed the most interest in C: Personalized assessment and recommendations, followed by A: Educating users on the environmental impact of food. These results were consistent with the goals and motivations uncovered in our discovery user interviews.
Since our goal was to both educate consumers and influence their behavior, we ultimately decided on a combination of A & C, creating a website that provides both educational information on the relationship between food and climate change (data visualizations) and a personalized assessment (quiz).
How can we encourage consumers to make more eco-conscous food shopping choices?
My approach was to educate consumers and influence their behavior through:
- Logical data-driven arguments → Data Visualization
- Emotionally compelling imagery and language → Storytelling
Using Adobe Illustrator, Tableau, and d3.js, I created 4 data visualizations to illustrate the following points:
- We are far from where we need to be to beat climate change
- We need to take action immediately
- Food has a big impact on climate change
- The types of foods you choose to eat matter
Created with Adobe Illustrator
Created with d3.js
User Feedback/Findings
- Takes time to understand the graphic and how to interpret the thermometer
- Not clear what result of “too high” means other than it’s bad
Interventions
- Added additional titles and helper text
- Revised text to clarify meaning
- Simplified the visual by removing the yellow mercury color
- Added the carbon footprint amount per person to help users understand what the percentage is referring to
Created with Adobe Illustrator
Created with Tableau
User Feedback/Findings
- Successfully identified foods with highest and lowest emissions
- Learned things they did not know before
- Struggled to correctly identify average CO2 emissions
- Labels don’t match bars
- Identified miscoded data
- Some food category labels did not match users’ mental model
- Second graph is easily overlooked
Interventions
- Fixed label amounts to match bars
- Reclassified categories to be more understandable and fixed miscoded data
- Changed layout from horizontal to vertical to increase readability
Here are examples of data visualizations I created for other projects. Click any image to expand it.
Accounts Payable Dashboard
Unlocking data-driven payment decisions and enhanced visibility over invoices