Chrome extension + green website driving sustainable purchasing with real-time product scoring

Overview:
Global warming is a pressing reality. Recognizing this urgency, VISA launched a climate tech hackathon to leverage transaction insights and promote greener spending. Our goal was to bridge the intention–action gap in sustainable consumer choices, a shift that could reduce global emissions by up to 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. Despite growing environmental awareness and eco-friendly marketplaces, why do shoppers still find it difficult to follow through on sustainable choices?

Background

Problem

Users value sustainability, but only when it’s convenient, affordable, and personally beneficial.

Solution

Provide a platform that makes sustainability easy and appealing: surfacing affordable, and personalized eco-friendly options while users shop.

Impact

ecoScore achieved an average score of 9/10 for its perceived impact on motivating eco-friendly shopping behaviors.

Interpreting Hackathon Theme

Analyzing VISA transaction data to identify “groceries” and “household items” as our focus

VISA provided 3 years of VISA expense data from 5 urban families. Analyzing the raw data revealed high-spending areas: groceries and household items. I then focused on exploring how to encourage sustainable shopping habits in these categories.

If everyone cares about the planet, why don’t we shop like it?

I started by 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

Many eco-focused platforms remain costly and not user-friendly

    • 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:

  • Most brands prioritize informal educational materials and lack scientific evidence.

  • Most brands offer limited household items and no groceries, forcing shoppers to visit multiple sites.

Mainstream marketplaces often lack eco-impact visibility

I then conducted 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.

User Research

Shoppers value sustainability but only when it’s convenient, affordable, and health beneficial

To identify how to boost eco-friendly shopping despite the abundance of marketplaces, I conducted a survey (11 participants). 72% of survey participants struggled to follow through on eco-friendly choices. I also interviewed 5 urban household shoppers, 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.

4 Pain Points

I 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 are unaware of product impact and struggle to verify eco-friendly options

Eco knowledge gap

Price concern

Eco-friendly products are often pricier

Shoppers avoid using multiple marketplaces or actively seek eco-friendly products

Convenience

Personal health benefits

Shoppers prioritize personal health benefits > global impact

How might we seal the gap between shoppers' green intentions & actions?

User Journey Map

Guiding frustrated shoppers from information-poor choices to happy value-packed eco decisions effortlessly

As users browse Amazon, they feel uncertain about choosing sustainable products due to unclear information. With ecoScore’s real-time ratings, that confusion turns into clarity and confidence. By discovering healthier, affordable alternatives on Amazon or the ecoScore marketplace, they end the journey feeling empowered and proud of following through a better choice.

Solution Highlight Wireframes

Chrome extension: real-time product sustainability ratings on popular marketplaces

ecoScore promotes sustainable shopping with a Chrome extension that integrates with popular marketplaces, uses a machine learning algorithm to rate product sustainability based on recognized systems like Environmental, Social, and Governance (ESG) score and guides users toward more sustainable shopping choices.


Chrome extension integrates with popular market places


Real-time product eco rating


Guide users to better eco alternatives

VISA-backed eco-friendly marketplace with affordable, health-conscious products

ecoScore Chrome extension guides users toward better eco-friendly choices on the original site or ecoScore site, which offers scientific insights and VISA-sponsored healthy, sustainable products.


VISA-backed sustainable marketplace

Visual Style & Design Choices

Crafting ecoScore’s modern, calm, earth-toned aesthetic

Building ecoScore’s brand and visual identity from the ground up, I started with the logo. The design was chosen for its balanced shape and muted green tones, which best convey our core values of calm, nature, and health.

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 a 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.

Shoppers found ecoScore fit seamlessly into their shopping routine yet still needed more eco-conscious knowledge

Usability Testing

I conducted 5 moderated usability tests 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:

  • 5/5 users found the Chrome extension integrates into their shopping routine seamlessly.

  • 4/5 users felt the solution effectively addressed the core issues, with a motivation score of 9/10.

  • 5/5 users found the minimal aesthetics easy on the eyes and reflective of the brand identity, with a visual aesthetics satisfaction score of 9/10.

  • 5/5 users finished purchase task flow starting from Chrome extension within 1’ 20”, relatively swift compared to industry averages.

  • 2/5 users wanted even more eco-friendly information at every step throughout the shopping process without overload.

Usability Testing Insights

😊

90%

Found ecoScore helped them follow through on eco-shopping

😠

40%

Needed more trust and transparency in eco information without overload

Iterations

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.

1. Adding informative sustainability labels to website

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

Key Screens

Chrome extension

scoScore website

Prototype

View 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 a Chrome extension that integrates with popular marketplaces 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.

How I would measure the impact

  • Conversion Rate Increase:

    Compare the conversion rate of users with the Chrome extension enabled vs. those without it to measure whether users are more likely to choose eco-friendly products when guided by sustainability scores and curated shopping suggestions.

  • Engagement Metrics:

    Track time on site and interactions with sustainability scores to understand user interest and engagement with eco-conscious content.

  • Purchase Behavior Shift:

    Analyze VISA purchase data over time to identify increases in eco-product purchases, showing a measurable behavioral shift toward sustainable shopping.

<< Previous

Adding an AI-driven personalized stylist feature to ASOS e-commerce

Next >>

Redesigning a Background Check Website for Faster Task Completion