UX/UI Design

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 alternatives to purchase that are better for the environment.

Duration
2 months
Role
UX/UI Designer
Team
Barbara Ballard, Mentor
Team
Barbara Ballard, Mentor
Team
Team
Barbara Ballard, Mentor
Team
UX/UI Designer
Company
EcoLens

From the production of goods we use and buy everyday to the food that we consume, our materialistic lifestyle is one of the many factors driving climate change.

The good news: As the consequences of the climate crisis have become more concerning in recent years, general awareness of the crisis and a desire to be part of the solution has become more prevalent than ever.

Young Americans, in particular, have taken a stand as advocates for climate action by engaging in global conversation, rallies and protests as the effects of global warming threaten their future and generations to come.

But what about the way they spend their money?


The Problem

Consumer concerns about the environment rarely translate into green-related spending

Millennial and Gen Z purchase habits are shaped both by strong eco-friendly ideals combined with an economizing mindset. Early research revealed that there is clear conflict between their good intentions and subsequent actions when confronted with the choice to buy sustainably.

While 65% of consumers consider eco-friendly products in alignment with their environmental values, only 26% engage in green shopping.

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

Research Insights

Interviews conducted to gain clarity around the behavioral disparity revealed 4 main barriers:

1. They're uncompromising when it comes to personal convenience

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

2. They don't know their impact from buying green

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

3. They lack knowledge of trusted sustainable alternatives

         Skepticism over products falsely advertised as environmentally friendly (green-washing)
         drives users away.

4. Their behavior is influenced by people around them

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

Who is our user?

Assumption: Users who express interest in changing their consumer habits are most likely to increase involvement in green-related activities.

85% of users surveyed felt a sense of responsibility to build better habits for the sake of the environment (and their future on this planet). In general, I found that Gen Z and Millennials behave similarly when it comes to their consumer habits and needs.

Our target user, Erin, is our MVP persona based on the assumption made above. I often referred back to her profile to help inform my decisions or when I felt stuck and needed clarity.

With her goals in mind...

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

Solution 1

An all-in-one browser extension

The EcoLens browser extension is a downloadable widget that activates on third-party websites to educate the user about the product they're viewing in real-time, offering comparable, more sustainable alternatives from the same store.

Try out the prototype

1. Learn about a products' sustainable attributes

Many ingredients and sustainability terms are difficult to understand, so providing short descriptions of each ingredient's impact on the environment encourages users to think twice about what they're buying.

2. Find and compare alternative products from the same store

Keeping in mind Erin's pain points when it comes to convenience and effort, product alternatives are shown on the landing screen for users to compare against the item they're looking at that are available at the same store.

Assumption: Users would be more likely to purchase the alternative product if it's available at a store they are already browsing on.

3. See what other customers are saying

Since users rely on recommendations from others for products they're unfamiliar with, customer reviews are embedded into the extension to help them vet a product at a glance.

How we got here (testing)

Making the most of the limited screen space

The biggest challenge I faced early on was finding a balance between simplicity and ease of use while displaying the crucial features users wanted to see upfront. Testing often through each fidelity helped prioritize what users value the most.

Initial suggestions from users during guerrilla testing of low-fidelity screens included:

• Using icons for sustainable factors instead of text labels to save space
• Displaying content partially above the fold to indicate a scroll action
• Including a comparison of the different products on the widget

Adding a side-by-side comparison of the regular and sustainable products

I assumed that users would want to compare products once they found an alternative product they were interested in. I was wrong.

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

Testing two different comparison tables

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

Testing showed that 100% of users preferred one-way scroll (Option B) because it was straightforward while still showing enough details to easily compare the products.


User 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 below, they felt that factor descriptions were not clear enough to grasp whether it was good or bad.

Considering user-friendly language

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 finding and buying sustainable products

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

Try out the prototype

1. Discover sustainable products by searching or browsing

Users can use "search" or "browse" to easily find eco-friendly products or alternatives based on a generic product type or brand they normally use. Products on the website would ideally be pre-vetted to ensure full transparency to the user.

2. Finding better alternatives to regular products

Using the search bar, users can find comparable (ie. by price) sustainable alternatives to a regular product they normally buy. On the item details page, a table comparing the products (like the widget) gives the user a clear picture of better alternatives to choose from.


3. Filtering by product traits for a customized shopping experience

For the purpose of this project, filters items for the skincare category were collected from beauty retailers like Sephora, Ulta, and clean beauty brand websites.

4. Find the best deals for a product

Like the browser extension, product details on the website share a familiar experience to learn about its sustainable factors and a list of stores to purchase the product. For the MVP, users are redirected out to purchase the item.

Testing

Considering different mental models when designing Search pathways

Initial feedback on the website was minimal because the screens were mid-fidelity, but usability testing later proved to be valuable in identifying issues in the details like product filters and user flow when tasked to search for certain items.

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.

Before / After

Next Steps

Future Iterations: As an immediate next step for EcoLens after the MVP, I would implement a rewards system for users to receive perks or discounts from retailers through the extension, both as an incentive to use the platform, encourage them to buy green, and to gain customers.

Browser Extension vs. Website: I would prioritize the browser extension to be developed first over the e-commerce website because it fulfills nearly all of the users needs, is more feasible to implement over an entire database of products, and is more convenient to access for the user than attracting people to visit a website.

How It Would Make Money: If ever developed and shipped, EcoLens could receive a percentage of the revenue made from purchases on retailer websites through the browser extension.

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. Although it's a concept project, I still wanted to consider how I would navigate working with third parties (in this case, retailers) and internal teams in order to make it a viable product.

• Failed tasks from user testing serve as an opportunity to experiment with other ideas I hadn't considered until hearing from users and realizing why it didn't succeed as I had expected.

• Asking the right questions early on is crucial to out why and how users behave differently than they say in order to get to the root of the problem.