Carbon Count



Awards & Mentions
  • CIO Awards Finalist
  • 95B FM Podcast
  • UX UI Design
  • Creative Direction
  • Sketch
  • Overflow
  • Adobe After Effects

How might we deliver education and choice regarding fuel emissions to customers using Z App?

Carbon Count is a feature in the Z App that allows customers to see the carbon emissions of each fill and choose to offset through local permanent forest.

A cross-functional team was put together to deliver Carbon Count in five sprints (just over two months). The desired outcome was to give Kiwis a unique way to act against climate change while also educating them about the impacts of their fuel consumption.

Design Process

Engaged with internal stakeholders to understand business needs, researched about carbon emissions and offset calculations
Gained insights about market trends, what other companies were offering and how to improve existing solutions
Sketched concepts, created wireframes and prototypes
Explored and refined different concepts and user flows
Provided dev team with high fidelity designs and assets

Our team developed Carbon Count over the holiday season, while most of us were working remotely and with limited access to external resources.

While I usually follow human-centred design methodologies and start framing the problem by interviewing customers, for Carbon Count I had to adopt a slightly different path and base my research on online documentation and internal feedback.

1. Research & Learn

Framing the Problem

My first step was to learn more about carbon emissions, offset calculations, and how this industry of planting trees to “suck” carbon from the air works.

During the research phase, I learned how Pinus Radiata, despite not being the preferable option to cover the land, is far more effective in removing CO2 from the atmosphere.

2. Gather Insights

Exploring the Domain

Although the practice of offsetting carbon emissions from fuel consumption is still in its infancy, I wanted to find out what other companies are doing to minimise their impact, and how.

I used these insights to guide me during the ideation phase so that our solution was far easier and more interactive to use.

3. Design a Solution

Generating ideas

I like to start ideating with some rough sketches using pen and paper to quickly get the ideas out of my head.

I also researched how different data components could demonstrate the impact of carbon emissions, and if graphs and charts would help the user to understand their data.

Then I created different dashboards views, experimenting with data points and graphs, aiming for a simple experience while also dealing with the technical constraints. During this stage I kept developers and stakeholders in the loop, collecting feedback along the way.

4. User Testing

Visualising data & interactions


Users found that looking at charts and having access to historical data added complexity to something they weren’t familiar with. The simple version with emission and offset levels gave users clarity and enough information to make a decision.

Trees growing animation

Users found interacting with the slider fun and easy to understand how the impact of offsetting their emission could help with the environment. The position of the thumb on the screen covered the dollar amount which made hard to see how much they would pay.

Pre-select and manual entry

Although this option gave users a quick way to select an amount, it also made the screen cluttered with too many numbers and added an extra effort to manual enter a specific value. We decided to park this idea.

5. Hi-Fi Design

Delivery & implementation

The simplicity and interaction that users validated during user testing were implemented in the final design.

I used elements from the existing design library and worked with an external illustrator to create the final animation.

We opted to have a foggy landscape with some of New Zealand’s native trees and birds. As the user interacts with the slider, the fog dissipates, as a result of offsetting carbon emissions.

Outcomes & Mentions

When we developed this feature, we knew it wouldn’t be widely and positively accepted by our customers due to the general perception that fuel prices are already high, so naturally, customers would hate to see that cost increase.

However, we created Carbon Count because it’s the right thing to do, to give people knowledge and choice about their carbon footprint.

As expected, the uptake of Carbon Count was slow and hit our conversion target of 3.5% after launch, which was “OK” compared to one of our partners’ carbon offsetting programme.

Those customers who used Carbon Count, we heard positive comments around the initiative and how slick the UX was.

Try Carbon Count now - Download Z App