Effortless Sustainable Shopping- Chrome Extension + Website

Summary

In the VISA Climate Tech Hackathon, my team identified a gap between consumer intentions and actions when making eco-friendly choices. Using our analysis of VISA’s customers spending data, along with our own research, we developed our solution, ecoScore, a combination of Chrome extension that provides real-time sustainability ratings for products on popular online marketplaces and guides users to the VISA-sponsored ecoScore e-commerce platform, offering discounted, eco-conscious alternatives.

My Roles
Lead UX designer,
UI designer

Tools
Figma/FigJam, Procreate, Gform

My Team
2 developers,
1 data analyst,
2 UX/UI designers

Duration
May 2024 (3 weeks)

Opportunity: VISA Climate Tech Hackathon

We used VISA raw finance data to identify high impact areas

The VISA Climate Tech hackathon challenged participants to leverage payment data for innovative solutions enabling sustainable choices. Analyzing three years of expense raw data from five families that VISA provided, our team found significant spending on groceries and household items, guiding our focus for the initiative.


Problem

End users’ limited knowledge, access, and high costs hinder eco-friendly practices

VISA raw data reveals significant retail spending. Surveys and interviews exposed barriers hindering participation even with the interest in sustainable practices. Current eco-friendly platforms fall short in addressing these barriers due to limited knowledge, product diversity, trust-building materials, and data-driven insights, emphasizing the demand for an innovative solution to facilitate eco-friendly practices.

Users want to participate more in eco-friendly practices but feel there's room for improvement

Current eco-friendly platforms lack essential knowledge and diverse product offerings

Platforms are also deficient in trust-building materials and comprehensive data-driven insights

Solution

A Chrome extension integrates with popular shopping platforms with sustainability score & redirects users to our incentivized eco-friendly website

Leveraging VISA finance data, we identified high-spending areas: groceries and household items. We designed a Chrome extension with machine learning (ML) algorithm to integrate with popular platforms such as Amazon. It also rates product sustainability on product detail page and guides users towards more sustainable shopping choices on our ecoScore e-commerce website. The algorithm follows major sustainability score system like Environmental, Social, and Governance (ESG) score and Sustainable Development Goals (SDGs) Index.

Solution component 1: Chrome extension integrates with popular ecommerce platforms

Solution component 2: Chrome extension scores & displays products' sustainability on product detail page

Solution component 3: Chrome extension provides more/ better eco-friendly alternatives

Solution component 4: A eco-friendly website sponsored by VISA

Solution component 5: Chrome extension directs users to more eco-friendly alternatives on ecoScore site

Our Chrome extension analyzes sustainability scores on popular shopping platforms and guides users towards our incentivized, sustainable shopping website.

Chrome Extension

ecoScore Website

Our ecoScore e-commerce platform offers sustainable practices knowledge and an informative, incentivized, and eco-friendly shopping journey.


Surveys and Interviews Show Shoppers' Real Needs

Despite environmental awareness, prioritize price, convenience, and personal benefits over making eco-friendly choices

To identify areas with sustainable engagement, assess overall environmental awareness, and comprehend the motivations and limitations, I conducted a survey & user interviews. This also aided in selecting relevant interview participants matching VISA's user demographics to obtain representative insights. The affinity map indicates the insights listed below.

What are the regions with significant sustainable engagement?

What are the driving factors and barriers for eco-conscious shoppers?

How are the general environmental awareness across the target audiences?

Eco-friendly purchases are mainly driven by price, product quality, convenience, and personal benefits, while environmental concerns actually play a secondary role.

Credible information and reliable knowledge are essential building blocks for establishing brand trust.

Consumers seldom actively seek eco-friendly knowledge, despite recognizing its importance.


What Do Our Competitors Do?

Competitors offer either limited categories or lack scientific insights

Through extensive research using including but not limited to forums, white papers, and AI, I identified competitors in this space: Ecowiser, EcoRoots, Grove, GreenSeal, EcoCentric, and EarthHero. Guided by competitor analysis, user interview insights and VISA credit card shopping data, I decided to focus on creating a platform offering diverse household items, groceries, educational materials, and an earthy tone to establish brand trust and identity.

    • 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

    • Blog

    • Earthy theme

    • Conventional website layout design

    • Business eco-certification focused, not product-oriented

    • Digeestable eco-friendly information

    • Streamline certification for small businesses

    • Modernize website design

    • Include engaging multimedia content

    • No products available for purchase

    • In-depth eco-certification system

What’re successful eco-friendly e-commerce strategies and best practices?

What’re potential market gaps and opportunities for differentiation?

These eco-friendly brands emphasize a natural and earthy aesthetic.

Most of the brands focus on educating approaches but not necessarily academic research-driven.

Eco-friendly e-commerce sites all curate selection of environmentally conscious products.


Site Map

ecoScore site was built based upon high-spending areas in VISA data and competitor analysis research

Utilizing VISA finance data and competitor analysis, we structured ecoScore's ecommerce platform to target high-spending areas, optimizing user experience and driving growth.


Feature List

Leveraging our user interviews and competitor analysis, we prioritized ecoScore's features based on research findings to align with user needs and preferences.

P1: must have
(Chrome extension)

Eco—Score rating: Products’ eco-friendliness score on major ecommerce sites.
Eco-alternatives: More eco-alternatives suggestions.
Profile: To save favorite products and potentially track user behavior and link to VISA.
Data and privacy terms: Safety terms to protect user data.

P1: must have (Website)

About: Including who we are, our mission & story; how we calculate the eco-score; incentive partners, VISA, and eco-brand partners.
Profile: User info, potentially track user behavior, and link to VISA. Competitor-informed decision.
Product list: Including product info & product eco-friendly info. Competitor-informed decision.
Shopping cart & check out: ecoScore is an eco ecommerce site. Competitor-informed decision.

P2: nice to have

Shopping history: Offer a convenient shortcut to previously purchased items. Competitor-informed decision.
Featured products: Highlights trending items and enhances visibility for popular items.
Eco-habit tracking: Users' purchases & eco-score tracking, user-validated decision.
Favorite products: Encourages personalization and enhances user experience.

P3: surprising & delightful

Accessibility: Ensures that websites are usable by everyone, including people with disabilities.
Blog: Eco-friendly articles, resources, and news. Competitor-informed decision.

P4: can come later

Live chat: Provided real-time live chat support. Competitor-informed decision.
Community: People share their eco-friendly tips. Competitor-informed decision.


Task Flow

Our task flow demonstrates users navigating from Amazon, utilizing our Chrome extension to assess product sustainability, and being redirected to more eco-friendly options on Amazon or the ecoScore website.


Lo-Fi Wireframe

Utilizing VISA finance data and competitor analysis, we structured ecoScore's features based on the priority defined by the research.


Brand Design & UI Kit

Airbnb Cereal, Poppins, & earthy tone were chosen to evoke a sense of health and eco-consciousness

To align with user preferences for natural materials and sustainable purchases, I chose earth-toned green and blue for their calming effects and associations with nature, health, and balance, resonating with products that are not only better for the environment but also for their well-being. Airbnb Cereal and Poppins were chosen for their modern geometric sans serif design, rounded letterforms, even spacing ensure familiarity and accessibility.


Usability Test

Users are excited about the Chrome extension idea, pleased with the aesthetic, but need more eco-conscious knowledge

Moderated usability tests with five participants were conducted via Google Meet to evaluate ecoScore's usability and effectiveness. Key goals included identifying task completion barriers, pinpointing user pain points, and gathering user feedback on the product's overall functionality, visual design, and user flow efficiency for the Chrome extension, website, and purchase process. Please click the links for Usability Test Plan; Usability Test Report; Usability Test Affinity Map.

How are the users think about the functionality and visual design of the site and Chrome extension?

How efficient is the user flow in terms of completion rate and task completion time for the ecoScore Chrome extension and purchase process on the ecoScore website?

100% of users appreciate the Chrome extension, finding it seamlessly integrates into their shopping experience.

100% of users love the favicon, logo, color theme, and the minimal aesthetics. 

100% finish ecoScore Chrome extension task flow within 1’ 05” and purchase process within 1’ 20”.

20% users want to see more eco-friendly related information.


Iteration

  1. Providing informative sustainability labels

Before

Single large product image

After

Smaller and more product images

Eco-labels

Make recommerce labels horizontal

2. Providing score breakdown without overwhelming the shoppers

Before

No eco-score explanation

After

Score breakdown with a tooltip design

Prototype


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

AI-driven personalized avatar & stylist clothing shopping

Next >>

Transform Obscure User Experience in Background Check