final mockup

Green Glasses

A web extension to make sustainable shopping, simple.
Duration
6 weeks
Role
Discovery and Research
Sketching and Prototyping

Team of 2 other designers
Tools
Figma

Project Overview

An estimated 1.8 billion people shop online, and with the pandemic raging on, this number will only increase. Climate change has dominated global conversations in the past year - and for good reason. Our team decided to hone in on sustainable shopping because of the disparity between the desire to shop sustainability and the knowledge about sustainability. We delved deep into sustainable shopping, analyzing the space, emerging platforms and sustainable brands, and finally designing and prototyping a web-extension to help Gen Z users, make more sustainable shopping choices.

30 second demo

Phase I: Understand
Problem Space
How Might We enable Gen Z students to make greener choices when shopping online?

This broad HMW guided the questions we asked in our survey and our semi-structured interviews with people between the age of 20-25 so we could better understand the problem space.
key quotessolution spacestats
Background Research
We familiarized ourselves with the world of sustainable fashion by reading articles and research papers, watching videos, and downloading and using apps which focused on sustainability.
background research
Competitor Analysis
We carried out a competitor analysis by scouring the internet and looking at reviews of various solutions to find user pain points. We even reached out to a couple of failed startups to ask why they had failed to find out the business side of things.

Key takeaway: Users who didn’t have a strong intrinsic motivation to be sustainable were put off by any app that interrupted their shopping process (i.e where they had to go on a separate website/app to check how sustainable the item was.) Users need a seamless solution to actually change their shopping habits.
competitor summarycompetitor analysis chart
Phase II: Define
Target audience
We decided to focus on female college students. We did research on online shopping habits and found that even when men shop online a majority of them rely on the women in their lives (siblings, partners, mothers) to shop or make decisions for them. We focused on college students because Gen Z is paradoxical in that they are aware of climate change and the need to be sustainable but are also enthusiastic about fast fashion brands.
personapersonauser task
Solution
Defining the problem space and existing solutions allowed us to have a very niche strategy which targeted intuitiveness, accessibility and seamlessness. We were initially thinking about a label scanner that would scan a QR code but by roleplaying the process and going to a store and taking a picture on our phones of the label we realized-
• Scanning process isn’t organic or natural
• Brands have different label constructions
• Information is on different sides
• Awkward when salesperson follows you
Journey Maps
By asking female college students to walk us through their shopping journey (both online and in-person) we could narrow our solution and eliminate features that would disrupt their shopping journey since we recognized there were certain shopping habits that were harder to change. We also found that shoppers, if re-directed to a coupon site, would rarely return to their shopping basket. This again emphasized the importance of a seamless solution.
journey map
Phase III: Sketch
Low-fi Sketch
Sketching our design alternatives and doing crazy 8’s helped us visualize what was feasible.

We settled on a web extension that was non-intrusive to ensure seamlessness, intuitive by having a simple color code as users hovered over an item, and informative by providing users the option to learn more about the rating as well as providing greener alternatives.
We settled on a web extension that was non-intrusive to ensure seamlessness,intuitive by having a simple color code as users hovered over an item, and informative by providing users the option to learn more about the rating as well as providing greener alternatives.
Phase IV: Prototype
Low-fi Prototype
Iteration 1.0
Key features:
• Color coded boxes [red, yellow, green] to quickly see and understand rating
• Learn more option with GreenGlasses Icon
• Simple explanation of rating
• Alternative more sustainable options
user test
Phase V: Validate
User testing
We were initially thinking about solutions and  were focused on the technicalities of our solution rather than the problem and other design alternatives. Our mentor encouraged us to zoom out and focus on our user their pain points rather than solving the problem.

User testing by far was the most challenging and interesting exercise since people had very strong views on how they shop and make decisions. I enjoyed analyzing and implementing user feedback while designing version 2 of Green Glasses.

User Scenario

You have downloaded “GreenGlasses”, a web extension which runs in the background as you’re shopping online. You downloaded the extension to see what items were more sustainable than others to help make decisions about which clothes to buy, quickly and seamlessly. Purchase any item(s) of athletic clothing with the web extension on.

taskheat map
Version 2.0
Changes -
• Web extension notification to make increase task clarity
• Thicker color frames to improve visibility
• Icon color change on hover to increase discoverability
View Prototypehero
Conclusion
Next steps
• Keep iterating through our prototype and conduct user testing
• Improve UI and visuals and UX writing
• Reach out and ask sustainability experts to help us with ratings
• Build website for users to learn more about sustainability
Reflections
We were initially thinking about solutions and  were focused on the technicalities of our solution rather than the problem and other design alternatives. Our mentor encouraged us to zoom out and focus on our user their pain points rather than solving the problem.

User testing by far was the most challenging and interesting exercise since people had very strong views on how they shop and make decisions. I enjoyed analyzing and implementing user feedback while designing version 2 of Green Glasses.