Neutral | Kylie To

Building Neutral's MVP

Startup, 2020

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

Visit Neutral

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?

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:

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.

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.

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

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

Visualizing
Carbon Data

User Flow

Extension Modal
Explorations

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

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

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:

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.

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:
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