Effortless Sustainable Shopping: Chrome Extension + Website

TL;DR
In the VISA eco-hackathon, my team identified a gap between consumer intentions and actions when making eco-friendly choices. Our solution, ecoScore, is a 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 researcher & solo UI designer

Tools
Figma/FigJam, Procreate, Gform

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

Duration
May 2024 (3 weeks)

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 in top spending areas

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 and rate products sustainability on current popular platforms such as Amazon and guide 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.

Chrome extension scores products' sustainability on popular platforms

Chrome extension directs users to VISA sponsored ecoScore's eco-friendly e-commerce alternatives

Leveraging VISA data to identify high-spending areas for our ecommerce platform

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


What Do Our Users Really Care About?

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.

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 academic research-driven, and educating approaches.

They all curated 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.


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. Adding more product images & eco-friendly labels

Before

Larger product image

After

Smaller and more product images

Provide sustainability labels

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.

Limited knowledge, access, and high costs hinder eco-friendly practices. Most consumers, despite environmental awareness, prioritize price, convenience, and personal benefits over seeking knowledge.

A Chrome extension integrates with popular shopping platforms with sustainability score & redirects users to our curated earthy esthetics, VISA incentivized, eco-friendly e-commerce website.

Turn the dense scientific information into bite-sized user friendly product info is one of the goals in this project.


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

Transform Obscure User Experience in Background Check

AI-assisted personalized clothing shopping experience

Next >>