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