Effortless Sustainable Shopping- Chrome Extension + Responsive Website

My Roles
UX/UI designer

Tools
Figma/FigJam, Procreate,
Google form

My Team
2 developers,
1 data analyst

Duration
May 2024 (3wks)

Project Focus
End-to-end Chrome extension & responsive website

Overview

Global warming is a critical reality, with 2023 being the hottest year on record. Recognizing this urgency, VISA launched a climate 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%.

Problem

Despite growing environmental awareness and the rise of eco-friendly marketplaces, many shoppers still struggle to align their intentions with their actual purchasing behaviors. Why do shoppers find it difficult to follow through on sustainable choices?

Solution

Leveraging machine learning, VISA spending data, and our own research, we developed ecoScore—a Chrome extension powered by an ML algorithm for real-time sustainability ratings and VISA-sponsored e-commerce platform, during online shopping and guides users to discounted, eco-friendly alternatives.

Scroll down to see my process

⬇️

Background

With green fintech rising, how can VISA aid sustainability?

VISA has integrated sustainability into its operations, reducing operational carbon footprint, offering biodegradable credit cards, seeking new solutions, etc. 2024 hackathons theme: How to leverage payment data to improve global sustainability?

We use VISA payment data to identify high-spending areas

Examining 3 years of raw expense data from 5 families provided by VISA, revealed high spending areas: Grocery and Household item. This discovery shaped the direction of our initiative.

Household item

Grocery

How might we encourage shoppers to adopt more sustainable habits when buying groceries and household items?

Research

Competitors Analysis

Through forums, online research, and AI—I identified competitors for ecoScore. My goal is to understand their pros and cons, identify patterns that attract or deter shoppers, and explore factors that influence eco-friendly shopping habits: their successful strategies and potential market gaps.

    • 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 a natural and earthy aesthetic.

  • Most brands prioritize informal education materials in blogs, scientific evidence needed.

  • Most brands only offer limited household item categories without grocery.

Primary Research

To identify how to help shoppers engage more in eco-friendly shopping despite the abundance of grocery/ household item marketplaces, I conducted survey & interviews. This also aids in selecting relevant interview participants matching VISA's user demographics to obtain representative insights. Result shows shoppers need sustainable information, convenient and affordable options.

We aim to learn:

Eco-awareness across the target audiences?

What are the regions with sustainable engagement?

What drives / hinders eco-shopping?

  • Users:

5 Household Shoppers - 2 singles & 3 has families

  • 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 is key

Shoppers avoid multiple marketplaces or actively seek eco-products

Personal benefit

Shoppers prioritize personal health and benefits > global impact

Affinity map was performed to synthesize key insights. This partial shows how I got the insights. Click the link for the full report and the image to enlarge.

How might we create a seamless, incentive, eco-friendly shopping experience that fits naturally into shoppers' routines?

Problem

Despite environmental awareness, a gap remains between shoppers' intentions & actions in green shopping.

Design

User Journey

User shopping cleaner on Amazon

Shopper finding Amazon product's lack of eco-friendliness through ecoScore Chrome extension

Shopper finding better products on ecoScore site though ecoScore Chrome extension

Happy shopper

Early Sketches: Chrome extension + Sustainable marketplace

Not eco- friendly product on Amazon

Chrome extension with ML algorithm for eco score

I created multiple sketches for the extension interface design for our team. The key challenge was incorporating information and prioritizing VIP within a much smaller area. We also debated whether the site should simply provide more details about the analyzed product or serve as a sustainable marketplace. Based on insights from our interviews, we ultimately decided to build a marketplace. Below show the sketch we moved forward to hi-fi wireframe.


An eco-friendly website

Brand Design & UI Kit

Color: Earth-toned greens and blues chosen for their calming / nature / health association, inspired by competitor analysis and user interviews.

Typography: Poppins was selected for it’s modern geometric sans-serif design, rounded letterforms, and even spacing.

Solution components

The ecoScore platform promotes sustainable shopping through a Chrome extension that integrates with major e-commerce sites like Amazon. On product page, using an ML algorithm to provide real-time sustainability ratings based on recognized systems like Environmental, Social, and Governance (ESG) score, guides users toward eco-friendly choices on both the ecoScore website and their preferred shopping platforms. Additionally, the ecoScore website features high-spending product categories, scientific insights, and VISA sponsorship to support informed, sustainable purchasing decisions.

Component 1:
Chrome extension integrates with popular marketplaces

Component 2:
Chrome extension using an ML algorithm to rate product sustainability & provide alternatives on product page


Component 3: Chrome extension guides users towards more sustainable shopping choices

Component 4: An eco-friendly website

Iteration

Usability Test

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

I aim to learn:

Task completion time?

User task completion barriers & pain points

Functionality and design feedback?

Key findings:

  • 5/5 of users finding the Chrome extension integrates into their shopping routine seamlessly.

  • 5/5 of users love the the minimal aesthetics including favicon, logo, color theme. 

  • 5/5 finish purchase task flow starting from Chrome extension within 1’ 20”, relatively swift compared to industry averages.

  • 2/5 users want more eco-friendly information throughout the shopping process.

Next step:

Provide sustainability labels

Show eco-friendly score info without overloading shoppers by tooltip design

Iteration

  1. Providing informative sustainability labels

Before

After

Sustainability labels

2. Providing score breakdown without overwhelming the shoppers

No eco-score explanation

Before

Score breakdown with a tooltip design

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

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

Next >>

Redesigning a Background Check Website for Faster Task Completion