Effortless Sustainable Shopping-
Chrome Extension + Responsive Website
Global warming is a critical reality, with 2023 being the hottest year on record. Recognizing this urgency, VISA launched a climate tech hackathon to explore green fintech solutions. Our goal was to bridge the intention-action gap in sustainable consumer choices, a shift that could reduce global emissions by 40%.
My Role
UX/UI designer
My Team
2 developers,
1 data analyst
Tools
Figma/FigJam, Procreate
Duration
May 2024 (3wks)
Every year, global shopping habits contribute to over 60% of greenhouse gas emissions. Yet, most consumers have no idea how their purchases impact the planet. Despite growing environmental awareness and eco-friendly marketplaces, why do shoppers still find it difficult to follow through on sustainable choices?
Problem
Using machine learning and VISA data, ecoScore—a Chrome extension that rates sustainability in real time on popular marketplaces and links to a VISA-backed, incentivized, eco-friendly marketplace were built.
Solution
Background
Hackathon Theme: How can VISA expense data be used to identify opportunities for sustainable shopping?
Analyzing 3 years of VISA expense data from 5 urban families revealed high-spending areas: groceries and household items. I then focused on exploring how to encourage sustainable shopping habits in these categories.
Groceries
Household items
Where can sustainable shopping experiences be improved?
I then began exploring existing eco-shopping platforms. Four major platforms were identified through forums, online research, interviews, and AI tools. My goal was to uncover successful strategies, spot market gaps, recognize shopper behavior patterns, and understand the factors that influence eco-friendly shopping habits.
Competitive Analysis
-
Earthy theme
Wide range of products
With a wealth of eco-friendly resources
Chrome extension design
-
A cleaner user interface
Address browser compatibility for broader accessibility
Incorporate more visual elements for user engagement
-
Beauty & personal care, babycare, clothing & accessories, health, groceries, pet supplies, toys & games, electronics
-
Chrome extension
Blog
Eco-Rating
-
Relatively contemporary website design
Wide range of products
Accessible through popular platforms like Target/ Amazon
-
Expand product selection for wider audience appeal
Expand zero-waste alternatives across product lines to maximize impact
-
Home decor, food & drink, women, beauty & wellness, jewelry, paper & novelty, kids & baby, pets, men
-
Blog
-
Earthy theme
Subscription based business model
Subscribe and save incentive program
Live chat support
-
Provide more various of products
Modernize & streamline the website design
Provide a stronger incentive program
-
Home & kitchen, cleaning, bathroom, beauty, baby & kids, pets
-
Eco habit tracker
Carbon footprint insights
Progress rewards
Blogs
-
Earthy theme
Cluttered website layout design
Limited household item offered while no grocery
-
Digeestable eco-friendly information
Streamline certification for small businesses
Modernize website design
Include engaging multimedia content
-
infection control, cleaning, catering, first aid, etc
-
No specific educational resources on their website
Business opportunities:
These eco-friendly brands emphasize natural and earthy aesthetics.
Most brands prioritize informal education materials in blogs, but scientific evidence is needed.
Most brands only offer limited household items categories without groceries.
I then realized the need to conduct another competitive analysis of popular marketplace websites to uncover where eco-friendly shopping falls short in users’ everyday shopping routine. With similar approach, I identified the four most widely used platforms for groceries and household items.
-
Unmatched variety and fast delivery, with strong personalization through data.
-
Extensive product range, but eco-conscious choices are buried and inconsistent.
-
Lacks clear eco-labeling and filters for sustainable products.
-
Overcrowded UI with overwhelming content hierarchy and too many CTAs.
-
Competitive pricing and accessibility, especially for budget-conscious shoppers.
-
Essentials available at scale, though eco-alternatives are limited or unclear.
-
Sustainability efforts exist but are hard to find or understand on-site.
-
Functional and direct, but visually flat and less intuitive for eco-focused browsing.
-
Strong brand alignment with wellness and eco-conscious messaging.
-
Decent selection of green alternatives, especially in household and personal care.
-
Eco-filtering and sustainability score visibility could be more centralized and interactive.
-
Clean, modern design, though product sustainability info is inconsistent.
-
Convenient and fast grocery delivery across multiple retailers.
-
Product availability depends on partner stores; green labeling is inconsistent.
-
Lacks a unified approach to surfacing eco-friendly choices.
-
User-friendly and efficient, but lacks transparency on eco impact and sourcing.
Business opportunities:
Popular marketplaces lack consistent and visible eco-labeling and filters.
Most platforms offer limited eco-friendly product ranges.
UIs tend to be overcrowded or visually flat.
User Research
Despite eco-consciousness, shoppers need sustainable info, convenience, health benefits, and affordability to follow through
To identify how to boost eco-friendly shopping despite the abundance of marketplaces, I conducted a survey (11 participants). 72% of survey participants struggle to make eco-friendly choices. I also interviewed 5 household shoppers (2 singles, 3 with families), aligned with VISA's user demographics for representative insights.
Eco-awareness
Environmental consciousness across the target audiences
Shopping routines
Shoppers’ everyday shopping habits and preferences
Influences
What drives or hinders eco-shopping choices
Affinity map was performed to synthesize key insights. This partial view shows how I got the insights. Click the link for the full report and the image to enlarge.
Shoppers’ Pain Points
We discovered that users needed clear, convenient, timely guidance—without disrupting their shopping experience. This insight became the foundation of ecoScore’s mission: to embed sustainability into shoppers’ everyday behavior, not their to-do list.
Shoppers unaware of product impact, struggle to verify eco-friendly options
Knowledge gap
Price concern
Eco-friendly products are often pricier
Shoppers avoid multiple marketplaces or actively seek eco-friendly products
Convenience
Health benefits
Shoppers prioritize personal health benefits > global impact
How might we seal the gap between groceries and household items shoppers' green intentions & actions?
Rapid ideation for sustainable shopping solutions
Ideation
In response to the How Might We question, I led a timed brainstorming session using quick sketches and team discussions. We identified the first key idea: a Chrome extension that gives you real-time sustainability ratings while shopping online.
The user journey helped clarify the decision to design ecoScore as a marketplace
Sustainable Shopping Journey
Moving along, our team debated whether ecoScore should remain solely a Chrome extension, serve as an educational platform with sustainability scores and knowledge, or evolve into a full marketplace. To fully address user pain points, I illustrated a journey where users navigate from Amazon, use the Chrome extension to assess sustainability, and seamlessly explore eco-friendly alternatives on the ecoScore site.
User shopping cleaner on Amazon
Shopper finding Amazon product's lack of eco-friendliness through ecoScore Chrome extension
Shopper finding better products on ecoScore site though ecoScore Chrome extension
Happy shopper
Eco Product Shopping Task Flow
I then mapped out the step-by-step actions and touchpoints users take to discover and choose sustainable product alternatives when they shop on their familiar online marketplace.
Solution Sketches
Chrome extension + incentivized eco-marketplace
ecoScore promotes sustainable shopping with a Chrome extension that rates products in real time on sites like Amazon for knowledge and convenience. It guides users toward eco-friendly choices on the ecoScore site, which offers insights, discounts, and VISA-sponsored healthy, sustainable products.
Chrome extension
Sustainable marketplace
Visual Style & Design Choices
Crafting ecoScore’s modern, calm, earth-toned aesthetic
I began ecoScore’s visual identity with a gradient text-only logo to reflect a calm, modern brand rooted in sustainability. The second option was chosen for its balanced shape and subtler colors, best expressing our core values—calm, nature, and health.
❌ Option 1
✅ Option 2
Rooted in and expanded from the logo design, ecoScore’s visual identity uses carefully selected colors, typography, imagery, and iconography to reflect the brand’s core values.
Brand & CTA Colors: The color palette centers on earth-toned greens, chosen for their soothing, natural associations—insights that were reinforced through competitive analysis and user interviews.
Typography: I selected Poppins, a modern geometric sans-serif with rounded letterforms and even spacing, to convey clarity, approachability, and a contemporary feel.
Icons & buttons: Icons and buttons were designed with higher border radius to create a smooth, rounded appearance that feels friendly and inviting. These softer shapes contribute to a cohesive, approachable interface.
Product cards & Imagery: Muted, natural tones and soft lighting were used across imagery to complement the earth-toned palette and evoke a sense of calm and balance. The visuals aim to create an emotional connection with users, reinforcing ecoScore’s message of sustainable, mindful living.
Solution Highlights
1. Convenient and informed shopping
Chrome extension integrates with popular marketplaces, uses a machine learning algorithm to rate product sustainability based on recognized systems like Environmental, Social, and Governance score and guides users toward more sustainable shopping choices.
2. Incentives and sustainable choices
the ecoScore website features high-spending product categories, scientific insights, and VISA sponsorship to support informed, sustainable purchasing decisions.
Users are excited about the Chrome extension idea but still need more eco-conscious knowledge
Usability Testing
5 Moderated usability tests were conducted via Google Meet to evaluate ecoScore's usability. Goals included pinpointing task barriers, pain points, gathering feedback on functionality, design, and user flow across Chrome extension, website, and purchase task.
Task completion time
Functionality and design feedback
User task completion barriers & pain points
The key findings include the following:
Every user found the Chrome extension integrates into their shopping routine seamlessly.
Every user loved the minimal aesthetics including favicon, logo, color theme.
Every user finished purchase task flow starting from Chrome extension within 1’ 20”, relatively swift compared to industry averages.
2/5 users want even more eco-friendly information throughout the shopping process.
2/5 users want to see more product information before they scroll down.
4/5 users found the VISA incentive is still not compelling enough for them.
Usability Testing Insights
ecoScore needs stronger business model and more sponsors
Users want more info, without overwhelm
Users appreciate ecoScore’s convenience and design
Iterations
1. Adding informative sustainability labels
Usability testing showed users want more clear, detailed eco info without scrolling. I redesigned the layout by shrinking images, prioritizing key details, and adding clear eco-labels to reduce overload.
BEFORE
AFTER
2. Providing score breakdown without overwhelming the shoppers by tooltip
Research showed users want trustworthy, science-backed data to avoid greenwashing but don’t want to feel overwhelmed. I addressed this by designing progressive disclosure through tooltips that clearly explain our scoring system and process.
BEFORE
AFTER
Prototype
Final Thoughts
What was accomplished
Using VISA finance data to identify groceries and household items as high-spending areas to effectively foster eco-consciousness.
Identified limited knowledge, access, and high costs hinder eco-friendly practices. Most consumers, despite environmental awareness, prioritize price, convenience, and personal benefits over seeking knowledge.
Developed Chrome extension that integrates with popular shopping platforms with sustainability score & redirects users to our curated earthy aesthetics, VISA incentivized, eco-friendly e-commerce website.
Turned the dense scientific information into bite-sized user-friendly product info.
Improvement and Reflection
Time management:
One key challenge in this hackathon project was managing time constraints, which prevented the development of an eco-activity tracking feature that could have further enhanced user engagement and provided meaningful insights into environmental impact.
Team efficiency improvement:
I learned the importance of improving team efficiency through clearly defined roles, creating timelines, assigning a minute-taker for meetings, and documenting plans, progress, and feedback to foster better collaboration and accountability. Additionally, I realized that an over-emphasis on implementation led to insufficient focus on the slide presentation, highlighting the need for a better balance between execution and communication.
A stronger business model needed:
Finally, I also recognized that ecoScore needs a stronger business model. Typical credit card incentives range from 1–5%, but even at the higher end, a 5% VISA reward isn't compelling enough to drive user behavior or differentiate the offering. This insight underscored how crucial a sustainable financial strategy is—not just for user incentives, but also for securing partnerships and sponsorships long-term.
This project pushed me to grow beyond just creating beautiful interfaces:
I learned how to pivot quickly in response to shifting priorities, design with behavioral impact in mind, and ground visual decisions in research-driven insights. Moving forward, I aim to apply these lessons by streamlining design workflows, collaborating more effectively across teams, and delivering solutions that balance user needs, business goals, and long-term impact.
<< Previous
Adding an AI-driven personalized stylist feature to ASOS e-commerce
Next >>
Redesigning a Background Check Website for Faster Task Completion