Building Neutral's MVP

Startup, 2020

Group 510.png
Light.png
learn more.gif
Group 272.png

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.

ROLE

Product Designer

TEAM

Marissa L.  |  Founder

Cem T.   |  PM

Harry Z. & Jacky L.  |  Engineers

Sophia Y.  |  Designer

DURATION 

Feb 2020 - Present

I. THE PROBLEM

Climate  Change  

Crisis

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?

Group 340.png

15 mil tonnes

CO2 emissions from one year of Amazon's shipping and packaging operations.

86%

of people are increasingly looking for green products and services.

* many are willing to pay a premium for these products/services

20%

of customers will verify the environmental impact of their purchases.

II. UNDERSTANDING

User Interviews

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:

image 34.png

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.

Provide insights

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.

Redirect impact

Guide and encourage users to seek out and purchase eco-friendly alternatives, and ultimately, neutralize their emissions through actions or donations.

Reward action

Celebrate and recognize the user's efforts to make a meaningful decision, and take proactive initiatives to minimize and/or neutralize their emissions.

Group 354.png
IV. DEFINE

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.

Frame 167.png

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.

Frame 152 1.png
V. IDEATION + DESIGNING

Design Jam

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. 

Badging
Group 374.png
Visualizing
Carbon Data
Group 375.png
Group 376.png
User Flow
Extension Modal
Explorations
Group 377.png

Design Explorations

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 1
Variant 2
Variant 3
Variant 4 - SELECT
Group 378.png

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.1
Variant 4.2
Variant 4.3
Variant 4.4 - SELECT
Group 379.png

Zooming in on Iteration I:
Pop-up window

We settled on this version of the window because we hypothesized that it was a good first attempt at designing the following features:

Group 380.png

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

Offset Options

  • Shoppers can select how they want to offset their impact—with or without money.

VI. TESTING & FEEDBACK

User Testing

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.

Frame 162.png

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.

ezgif-4-5f3b4d36589e.gif

Design Exploration II:
In-Line Components

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.

Status Quo
Group 379.png
Variant 1
Group 381.png
Variant 2
Group 381.png

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.

Variant 3
Variant 4
Group 382.png
Variant 5
Variant 6

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.

Variant 7
Variant 8
Variant 3
Variant 9
Variant 10
Group 383.png

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:
In-Line Components

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.

learn more.gif

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.

ezgif-3-52120a1c86a1.gif

Component States

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. 

Registered User
Unregistered User
Unsupported Product
Group 384.png

Final Design

Light.png
VII. CONCLUSION

Traction and Accomplishments

Group 193.png

What's Next?

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.

Conclusion

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.