EcoLens

EcoLens is a browser extension and e-commerce companion that encourages consumers to make more sustainable shopping decisions by educating them about the products they're browsing in real-time, offering comparable alternative better for the environment.

Role
UX Designer

Tools
Figma, Photoshop, Miro

Duration
2 months

THE CHALLENGE

In recent years, young Americans, particularly Millennials and Generation Z, have grown increasingly interested in sustainability and the environment as the climate crisis threatens their future. More than any generation before them, they are most likely to advocate for change, from their personal lifestyle to demanding accountability to businesses they support.

But while they consider ethical and eco-friendly products in alignment with their environmental values, very few of them actually spend their money like they say they would.

65% of consumers prefer to buy from sustainable brands, and would even pay 10%+ more for them

But...only 26%
of them actually do so

SO WHAT'S STOPPING THEM?

Users lack social and personal motivation

Why haven't they adopted better shopping habits? Why do they want to support green brands in the first place? What would encourage them to change their behavior?

There is a huge disconnect between consumers' good intentions and their subsequent actions that don't reflect their personal beliefs:

1. Their personal benefit comes first

Users associate sustainable products with a higher cost, lack of options, and more effort to purchase than it's worth putting in.

"It's easier to 'default' and grab the brand I usually buy because I need it ASAP."

2. They want to know their impact

Users want to know the value of their purchase in regards to how it helps the environment, and receive acknowledgment for doing so.

"I can't really tell what my personal impact is when I buy these products."

3. They lack knowledge of trusted alternatives

Skepticism over products marketed as environmentally friendly when they're not (green-washing) drives users away.

"Not knowing if a product is actually as green as it claims stops me from buying."

4. Their actions are influenced by people they trust

Users are more likely to make sustainable decisions if their friends or other customers like them recommend green products.

"If other people say it's good, then I'll probably give it a chance."

DESIGNING FOR ERIN

I found that Millennials and Gen Z feel and behave similarly when it comes to their green shopping habits and needs

Our target user persona, Erin, cares about the environment and knows it's her job to make better decisions when she shops.

It's important that she's able to:

• find a sustainable option when she needs something
• see all of her options in one place
• read product reviews
• learn about the product's sustainability factors
• compare regular products with green ones
• get recommendations based on products she usually buys

So...how could we provide Erin with the resources and knowledge to empower her to practice better shopping habits?

SOLUTION 1

A do-it-all browser extension

The EcoLens browser widget educates the user about a product they're viewing while they're shopping, offering comparable, more sustainable alternatives to the product they're looking at from the same store.

PLAY WITH THE PROTOTYPE

TESTING

Making the most out of the limited screen space

The biggest challenge with the browser extension was finding a balance between keeping it simple and easy to navigate while effectively displaying the crucial features users wanted to see upfront.

Adding a side-by-side comparison of the products (1)

After adding a separate screen for comparisons in mid-fidelity and testing again, users preferred to see the comparison immediately on the landing screen to save them from having to select each product one at a time.

Trying out two comparison tables

Unsure of which table would work best for users on the landing page, I tested one with a horizontal scroll, typically seen on e-commerce websites, vs. a compressed version that fit into the screen vertically.

Another round of testing showed that 100% of users preferred one-way scroll (Choice B).

Testing

I went in to usability testing with an assumption that users may not be able to differentiate the factor icons from one another, but they did not end up having any issues.

However, while users successfully completed all of the tasks, they felt that factor descriptions were not clear enough to grasp whether it’s good or bad.

5/5 successfully identified attributes the original product did and didn't have

5/5 successfully found a better alternative to the original product

5/5 were able to find out what customers are saying about the product

Writing jargon-free descriptions

Early research indicated that users lack knowledge of sustainability in general, including all of the complex terms that come with it. The adjusted copy tells the user how an attribute affects them in a more simple, digestible way.

No further issues arose in the second usability test with 5 new users.

SOLUTION 2

An e-commerce website dedicated to sustainable products

The EcoLens website is a one-stop-shop for users to discover an abundance of trusted sustainable products in one place and find alternative options to replace brands they usually buy.

PLAY WITH THE PROTOTYPE

Discover products by searching or browsing

Users can use the search bar to easily find eco-friendly products or alternatives based on a generic product type or brand they normally use.

For users interested in discovering new brands, 'Browse' is the way to go.

Filter by what matters most to you

Users can check for better options by comparing products by price, rating, and the number of sustainable attributes the product to determine how good it is.

Find the best deals for a product

Like the browser extension, product details on the website share a similar format to learn about its sustainable factors and a list of stores to purchase it.

Find a better alternative to your favorite product

EcoLens can help you find more sustainable options for a product you usually purchase by comparing them to similar ones.

TESTING

Consistency is key

Initial feedback on the website was minimal because the screens were from a high-level perspective, but usability testing later proved to be valuable in identifying issues in the details like the product filters and the path that users take to find certain items.

0/5
could identify why an alternative product was better than Clorox Wet Wipes

5/5
successfully navigated the website to find a sustainable face cleanser

Showing product comparisons upfront

Users didn't understand why they should "Consider These Alternatives". I added a comparison table of the regular product against the recommendations earlier in the journey.

An additional round of testing resulted in a 100% success rate from the previously failed task.

BRANDING

Style Guide

In order to stand out from competitors in the space while also staying true to the color green, which is often associated with nature and the environment, I chose a palette and style for EcoLens that was both clean and minimal but had a sense of warmth. Noto Sans is a sans serif typeface that's friendly and casual but also very versatile, which works well between the extension and website.

Next Steps

As a business, EcoLens would ideally receive a percentage of the revenue made from purchases on retailer websites the browser extension redirects customers to. To start, the e-commerce website would not ship to customers directly but instead lead users out like the extension. As an MVP, the goal is to eliminate the hassle of finding sustainable products and alternatives, and the widget and website fulfill Erin's most crucial needs.

In a future iteration of EcoLens, I would implement a rewards system for users who buy products through the website or extension to receive perks or discounts from retailers, both as an incentive to use the platform and encourage them to buy sustainably.

Learnings/Takeaways

• Working without constraints made it difficult to run with a solution that I felt was practical and could truly solve the problem at hand. While the product is hypothetical, I still wanted to consider how we might navigate working with third parties (in this case, individual stores for referral %) and developers to implement a feasible MVP.

•More so than the successes, I took failed tasks from usability testing as an exciting opportunity to look at the solution from a different angle I hadn't considered until hearing from users and why it didn't work as I had expected.

• It's easy to find out what users (say) they do, but finding out why and how they behave that way is just as crucial in order to truly understand their perspective and put myself in their shoes.