Effortless Sustainable Shopping: Website + Chrome Extension
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 - Jun 2024 (3 weeks)
Case Study Index
>
>
>
>
>
>
>
Reflection
Prototype
Iteration
Usability Test
Brand Design and UI Kit
Competitor Analysis
Site Map
Project Summary
>
>
Survey & Interview
Opportunity & Constraints
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 nature, 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 design, pleased with the aesthetic and eager to learn more eco-friendly knowledge through the site
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 (edited the arrow)
Helping shoppers learn the product information more effectively by adding more product images, intuitive & concise eco-friendly labels
Before
Larger product image
After
Smaller and more product images
Provide sustainability labels
2. Providing score breakdown without overwhelming the shoppers with an information tooltip design
Before
Without explaining how to get the eco-score
After
Providing score breakdown with an information tooltip design
Prototype
Design Summary & Highlights
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
Time constraints prevented the development of an eco-activity tracking feature, which could have further enhanced user engagement and environmental impact monitoring.
Improve team efficiency by: clearly defining roles including PM roles, creating a detailed timeline, assigning a minute-taker for meetings, and documenting all plans, progress, and feedback in written formats for better collaboration and accountability, in brainstorming, designing, development, and implementation tasks.
Over-emphasis on implementation led to inadequate attention on slide presentation; better balance between the two aspects is essential in the future.