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 eco-friendly marketplaces, many shoppers still struggle to align their intentions with their purchases. Why do shoppers find it difficult to follow through on sustainable choices?

Solution

Using ML and VISA data, we built ecoScorea Chrome extension that rates sustainability in real time on popular marketplaces and links to a VISA-backed, incentivized, eco-friendly marketplace.

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

Background

Hackathon Theme: How can we use VISA expense data to identify opportunities for sustainable shopping?

Household items

Grocery

Where can sustainable shopping experiences be improved?

I then began exploring existing eco-shopping platforms. I identified four major platforms through forums, online research, interviews, and AI tools and aimed to understand their successful strategies and potential market gaps, identify patterns that attract or deter shoppers, and 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

    • 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, 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) & interviewed 5 household shoppers (2 singles, 3 with families), aligned with VISA's user demographics for representative insights.

Eco-awareness across the target audiences

Usual shopping routines

What drives / hinders eco-shopping

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

Shoppers avoid multiple marketplaces or actively seek eco-friendly products

Health benefits

Shoppers prioritize personal health 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.

How might we seal the gap between grocery and household items shoppers' green intentions & actions?

Solution sketches

Chrome extension + incentivized eco-marketplace


Sustainable marketplace


Chrome extension

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.

Visual Style & Design Choices

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

As part of ecoScore’s visual identity, I carefully selected colors, typography, imagery, and iconography to reflect the brand’s core values—calm, nature, and health—while giving it a clean, modern look.

Logo: The gradient text-only logo captures ecoScore’s mission. It feels fresh and modern, making the brand feel clean, human, and approachable. This subtle shift in color reflects that sustainability is a journey and helps position ecoScore as a thoughtful, forward-looking brand.

Color: 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.

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.

Icon and Button design: 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.

Solution Highlights

1. Convenient and informed shopping

Chrome extension integrates with popular marketplaces, uses an ML algorithm to rate product sustainability based on recognized systems like ESG score, provides alternatives on product page, and guides users towards 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.

Usability Testing

Usability Testing Insights

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

User task completion barriers & pain points

Functionality and design feedback

Users want more info, without overwhelm

Users appreciate ecoScore’s convenience and design

The key findings include the following:

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

ecoScore needs stronger business model and more sponsors

Iteration

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

BEFORE

AFTER

Research showed users want trustworthy, scientific data to avoid greenwashing and shop sustainably without feeling overwhelmed. I addressed this by designing a tooltip that explains our scoring system and process clearly.

2. Providing score breakdown without overwhelming the shoppers by tooltip

BEFORE

After

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

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

    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 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 to support long-term growth. Moving forward, I plan to integrate these lessons by streamlining workflows, enhancing team collaboration, and delivering well-rounded outputs that address both product functionality and business strategic viability.

<< Previous

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

Next >>

Redesigning a Background Check Website for Faster Task Completion