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 Roles
UX/UI designer
My Team
2 developers,
1 data analyst
Tools
Figma/FigJam, Procreate
Duration
May 2024 (3wks)
Problem
Despite growing environmental awareness and the rise of eco-friendly marketplaces, many shoppers still struggle to align their intentions with their actual purchasing behaviors. Why do shoppers find it difficult to follow through on sustainable choices?
Solution
Leveraging machine learning, VISA spending data, and our own research, we developed ecoScore—a Chrome extension powered by an ML algorithm for real-time sustainability ratings and VISA-sponsored e-commerce platform, during online shopping. It also guides users to discounted, eco-friendly alternatives.
Scroll down to see my process
⬇️
VISA has integrated sustainability into its operations, reducing operational carbon footprint, offering biodegradable credit cards, seeking new solutions, etc. 2024 hackathon’s theme: How to leverage payment data to improve global sustainability? Examining 3 years of raw expense data from 5 families provided by VISA, revealed high spending areas: Grocery and Household items. This discovery shaped the direction of our initiative— How might we encourage shoppers to adopt more sustainable habits when buying groceries and household items?
Background
We used VISA payment data to pinpoint high-spending areas for our hackathon project
Household items
Grocery
Through forums, online research, and AI—I identified competitors for ecoScore. My goal is to understand their pros and cons, identify patterns that attract or deter shoppers, and explore factors that influence eco-friendly shopping habits: their successful strategies and potential market gaps.
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
-
c
-
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.
Primary Research
Despite eco-consciousness, shoppers need sustainable info, convenience, and affordability to follow through
To identify how to help shoppers engage more in eco-friendly shopping despite the abundance of grocery/ household items marketplaces, I conducted survey & interviews. This also aids in selecting relevant interview participants matching VISA's user demographics to obtain representative insights. The result informs us how might we create a seamless, incentive, eco-friendly shopping experience that fits naturally into shoppers' routines.
We aim to learn:
Eco-awareness across the target audiences?
What are the regions with sustainable engagement?
What drives / hinders eco-shopping?
Users:
5 Household Items Shoppers - 2 singles & 3 has families
Shoppers’ pain points:
Knowledge gap
Shoppers unaware of product impact, struggle to verify eco-friendly options
Price concern
Eco-friendly products are often pricier
Convenience is key
Shoppers avoid multiple marketplaces or actively seek eco-friendly products
Personal benefit
Shoppers prioritize personal health and benefits > global impact
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.
Despite environmental awareness, a gap remains between shoppers' intentions & actions in green shopping.
Problem
User Journey
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
Early Sketches: Chrome extension + Sustainable marketplace
Sustainable marketplace
Chrome extension
Chrome extension with ML algorithm for eco score
Not eco- friendly product on Amazon
Brand Design & UI Kit
Color: Earth-toned greens and blues chosen for their calming / nature / health association, inspired by competitive analysis and user interviews.
Typography: Poppins was selected for it’s modern geometric sans-serif design, rounded letterforms, and even spacing.
Solution components
The ecoScore platform promotes sustainable shopping through a Chrome extension that integrates with major e-commerce sites like Amazon. On product page, we used an ML algorithm to provide real-time sustainability ratings based on recognized systems like Environmental, Social, and Governance (ESG) score, guides users toward eco-friendly choices on both the ecoScore website and their preferred shopping platforms. Additionally, the ecoScore website features high-spending product categories, scientific insights, and VISA sponsorship to support informed, sustainable purchasing decisions.
Component 1:
Chrome extension integrates with popular marketplaces
Component 2:
Chrome extension using an ML algorithm to rate product sustainability & provide alternatives on product page
Component 3: Chrome extension guides users towards more sustainable shopping choices
Component 4: Sustainable marketplace
Usability Test
Moderated usability tests with 5 participants were conducted via Google Meet to evaluate ecoScore's usability. Key goals included pinpointing task completion barriers & user pain points, gathering user feedback on overall functionality, visual design, and user flow efficiency for the Chrome extension, website, and purchase task. Click the links for full Usability Test Plan; Usability Test Report; Usability Test Affinity Map.
I aim to learn:
Task completion time?
User task completion barriers & pain points
Functionality and design feedback?
Key findings:
5/5 users finding the Chrome extension integrates into their shopping routine seamlessly.
5/5 users love the the minimal aesthetics including favicon, logo, color theme.
5/5 users finish purchase task flow starting from Chrome extension within 1’ 20”, relatively swift compared to industry averages.
2/5 users want more eco-friendly information throughout the shopping process.
2/5 users want to see more product information before they scroll down.
Next step:
Provide sustainability labels
Show eco-friendly score info without overloading shoppers by tooltip design
Iteration
Usability testing revealed that users want concise yet detailed eco-friendly information while also accessing more product details without scrolling. So I redesigned the layout by reducing image sizes, prioritizing key details like reviews, adding more product info upfront, and creating a clear eco-label to prevent overload.
1. Providing informative sustainability labels
Before
After
From both primary research and usability testing, I learned that users need trustworthy, scientific data to avoid being misled by advertising and ensure their money goes toward truly sustainable products—without feeling overwhelmed. To address this, I designed a tooltip that concisely explains our scoring system and evaluation process.
2. Providing score breakdown without overwhelming the shoppers by tooltip
Before
After
Prototype
Final Thoughts
What we 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 esthetics, VISA incentivized, eco-friendly e-commerce website.
Turned the dense scientific information into bite-sized user friendly product info.
Improvement and Reflection
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. From this experience, I learned the importance of improving team efficiency through clearly defined roles, including those of project managers, creating detailed timelines, assigning a minute-taker for meetings, and documenting plans, progress, and feedback in written formats 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 the two aspects. Moving forward, I plan to integrate these lessons to streamline workflows, enhance team collaboration, and deliver well-rounded outputs that address both functionality and presentation in future projects.
<< Previous
Adding an AI-driven personalized stylist feature to ASOS e-commerce
Next >>
Redesigning a Background Check Website for Faster Task Completion