Building Neutral's MVP
Neutral is a web extension that helps users understand their carbon footprint and makes transparent, sustainable shopping a reality for users around the world.
Featured in FastCompany, ProductHunt, and TechCrunch.
I worked on building the first MVP of the extension, optimizing the offset funnel, and growth design.
Marissa L. | Founder
Cem T. | PM
Harry Z. & Jacky L. | Engineers
Sophia Y. | Designer
Feb 2020 - Present
I. THE PROBLEM
We care about our planet, people and animals, and we want to live in a world that’s sustainable and fair. The reality is, there are thousands of products on the market, and a dozen of their own ethical issues.
How might we allow consumers to quickly and easily inform themselves of the environmental impact of their purchase?
15 mil tonnes
CO2 emissions from one year of Amazon's shipping and packaging operations.
of people are increasingly looking for green products and services.
* many are willing to pay a premium for these products/services
of customers will verify the environmental impact of their purchases.
We reached out to our network to understand how people feel and actually go about reducing their carbon footprint in their current lifestyle.
Conversations focused on people’s overall attitudes towards sustainability and climate change. We also inquired about their experiences and processes identifying opportunities to adopt more sustainable lifestyles and habits.
These casual conversations helped me uncover the following key user insights:
Sustainability Doesn't Supersede Convenience
People are not willing to sacrifice in other areas to buy sustainably.
Shoppers turn to cheap, convenient and disposable products rather than repairable and durable quality.
A major disconnect exists between the convenience people want and the expectations of sustainability.
“I want to reduce my family's carbon footprint, but I can't compromise convenience with my busy schedule. We’re using more reusable cutlery, containers, and cups.”
Selene, Single Mom, 41
Lost in Translation
We may live in a world of big data, but we are numb to big numbers.
People's eyes glaze over climate change stats as they find themselves lost in the enormity.
“I'm not doing anything to reduce my footprint. I'm aware of my emissions from plastics, travel, and shipping—my concerns only shift when someone else talks about it.”
Peter, New Grad, 23
Disconnected from the Problem
If people feel that they can't do anything about it, they will default to disconnect and disengage.
People who are trying to action find themselves town between individual versus systemic action.
“I plan my commutes and try to walk or take public transit whenever possible. I try to buy local produce and have transitioned to reusable household items. But I still get climate anxiety and wonder if all I do amounts to anything.
Jamie, Undergrad, 19
III. DESIGN PRINCIPLES
How might we allow users to see the direct environmental impact of their purchase in real-time?
Be present and accessible
Amongst our many devices and apps, find a place for Neutral to best exist to help make sustainable consumption easy for consumers.
Effectively communicate emission metrics that will resonate with users and deliver the visibility they need to shop in a way that truly reflects their values.
Guide and encourage users to seek out and purchase eco-friendly alternatives, and ultimately, neutralize their emissions through actions or donations.
Celebrate and recognize the user's efforts to make a meaningful decision, and take proactive initiatives to minimize and/or neutralize their emissions.
Why a browser extension?
It uniquely places Neutral directly in the shopping experience.
A browser extension touchpoint enables us to raise awareness and inform shoppers before they make their purchase.
The Current User Flow
We created a comprehensive Amazon shopping flow to see it in its entirety and highlighted opportunities for Neutral to present itself as a useful eco-tool.
V. IDEATION + DESIGNING
After considering Neutral's opportunities to present itself in the current user flow, we spent an afternoon exploring different ways we could represent carbon data in a tool.
Upon creating alignment around the concept sketches, we moved into Figma to explore layout treatments for organizing the information in this pop-up modal.
We decided to progress the explorations using Variant 4. This variant’s layout offered a good balance of visual hierarchy and easy scannability to further refine and iterate on.
Variant 4 - SELECT
In this next iteration, we focused on visual design to improve the visual hierarchy of the carbon data. Through experimenting with padding and colour contrast, we settled on Variant 4.4 as the MVP.
There was a strong preference for this variant as we hypothesized it would provide easy scannability for users to quickly assess a purchase’s carbon impact.
Variant 4.4 - SELECT
Zooming in on Iteration I:
We settled on this version of the window because we hypothesized that it was a good first attempt at designing the following features:
Carbon Impact Report
See the emissions created at a glance
Contextualize impact and with the use of equivalents—driving and melting ice.
Annual Emissions Cap
The carbon the purchase occupies under our individual annual carbon cap/allowance
Shoppers can select how they want to offset their impact—with or without money.
VI. TESTING & FEEDBACK
After the MVP launched, I organized rolling research sessions with early users to understand the feelings, opinions, or behaviours they experienced using extension.
Through directed 1:1 interviews, I had the participants open Amazon on their browsers to do a product walk-through. Here, I asked how they felt and interpreted carbon emissions data, and whether the offset options help inform their shopping experience in any way.
Ranked by highest frequency, some common takeaways included:
Carbon data created a sense of shopping guilt
Forced pop-up was intrusive and closed the window
Nowhere to focus attention—UI lacks hierarchy
Carbon metrics didn't resonate or were misinterpreted as an additional negative outcome
Offset initiatives weren't engaging
Annual Emission Cap was not helpful
People are unlikely to commit to non-monetary offsets
Offsets lacked a sense of reward or celebration
Equipped with tangible feedback, it was clear that we needed to adapt our approach. Users want a contextual touchpoint that communicates carbon data in a way that empowers them with information, instead of inducing shopping guilt. Getting the heuristics right can also effectively drive that engagement to a clear call-to-action to offset emissions.
Design Exploration II:
Returning to the drawing table, our Engineers suggested we “inject” a component onto a product page—Neutral's carbon data would be conveniently available for the shopper.
However, the biggest constraint was to ensure the component remained as lightweight as possible to avoid pushing native content down the page. Considering the user feedback, we wanted to avoid framing Neutral as intrusive or interrupting a shopping experience.
Designing Within the Limited Real-Estate of Amazon’s Product Pages
We challenged ourselves with Variant 1 and 2 to test how much we could possibly reduce the component to fit in-line with Amazon's page content.
Maintaining Context and Engagement While Scaling Down
The previous exercise led us to a breakthrough design pattern: hover to expand.
Interacting with the component reveals additional information about offset initiatives. However, we still faced a similar constraint; instead of pushing down page content, the revealed container now covers the content below.
Incorporating Call-to-Actions and Visual Design Polish
Variant 7 showed us that context is diluted when we reduce the offset container. Then, we realized we could adapt this pattern—reveal the container from the side. This interaction works with the constraint, and visually, the component appeared much more lightweight.
By Variant 10, we were quite satisfied with where we landed. From here, we focused on UI design to refine the component. As well, we included an interactive checkbox to help offsets feel much more actionable for users.
Zooming in on Iteration II:
For Iteration II we built and shipped Variant 9. The team had a strong preference for this variant, as it satisfied increasing visibility and awareness for Neutral, and improved the overall scannability of the Carbon Impact Report. Likewise, the new call-to-action makes the tool feel much more actionable while tying seamlessly into Amazon checkout workflow.
Emissions at a glance
Quickly see the impact of your purchase and understand the and how you could offset this purchase to reduce your carbon footprint, with or without money.
Offset your carbon emissions
With one click, you can donate to a tree-planting charity and neutralize your carbon emissions. Offset amounts tie seamlessly into Amazon checkout.
Considering how Neutral is a relatively new extension, we also considered different Component states based on whether a user has a registered Neutral account or purchased Carbon Credits.
We also designed a state for Unsupported Products to remain transparent and communicate such edge cases. There are millions of products on Amazon, leaving a few that have yet to be accounted for by our Carbon Calculator.
Traction and Accomplishments
Neutral is making it incredibly easy for everyday individuals to help combat climate change, and we're working hard to better serve our users. Here's what's next in store for our team:
Continue exploring ways to narrow the "intention-action" gap associated with the perceived barriers to entry in combatting climate change.
Streamline our payment model to make donations safe, faster, and more convenient.
Develop a user dashboard for people to engage with their own offset and emissions data.
Working on Neutral has taught me about championing issues and values I strongly care about. We can no longer push for mere sustainability but must create new systems that undo and heal what’s been done.
It reiterates that we don’t need to sit and wait for a client to ask us to make something eco-friendly. We have the ability and the responsibility to take a stand with how we use our skills and talents.