Carbon Tracker, for Fortune 100 Company
Tracking your carbon footprint with the swipe of a card.
Overview
The Carbon Footprint tracker is a feature that will release on Earth Day 2024. It will be available to via a major online banking service. It enables users to track their carbon footprint via their credit card.
The algorithm tracks where the user is spending money. Each retailer is put into a category based on carbon emissions, and corresponding weights are selected. The weights are then applied to their spending, and CO2 generated is calculated per transaction.
Role
Lead Product Designer
Contributions
Product Design, User Flows, Wireframes, User Research and Testing, Iconography, Prototyping, Dev Handoff
Type
Main feature for mobile (iOS & Android), tablet, web app (focus for this case study: mobile)
Tools
Figma, Usertesting.com
Team
1 Product Manager, 2 software engineers
Timeline
6 months; Launch date April 22, 2023 (Earth Day)
// BY THE NUMBERS
2
USER TESTS
2
HIGH-FIDELITY
ITERATIONS
4
LOW-FIDELITY
ITERATIONS
10,000,000
ACTIVE ONLINE BANKING USERS
The Problem
We wanted users to have a way to track their carbon output based on where they were spending. There were a lot of things to consider in our approach: education around climate change, ease of use as an integrated feature, and building retention.
The Solution
I designed an accessible, usable flow that was built around user goals. I made decisions on data we had received from user testing.
The feature launched on Earth Day April 22, 2023.
Process Overview
// STAKEHOLDER SYNC
I met with our internal stakeholders: 1 product manager, 4 developers, and the head of design. We reviewed expectations around timelines, goals, and a unified vision for moving forward. Our goals were to create a feature that was easy to use, followed our accessibility guidelines, and encouraged continued engagement.
Gathering
I took a look at any existing research we had conducted, old designs, and user feedback we had in this space. I also reached out to our API partners: Doconomy and Mastercard's Carbon Calculator.
// USER TESTING
Testing Round 1
Since this was a new feature, there was no existing feedback from users around carbon tracking. Given the limitations of the API, we wanted to see if it would still be useful to users.
I wrote a script that would help us learn about:
1) Who would be interested in this feature?
2) How helpful it would be?
3) What would motivate long-term engagement?
4) What familiarity users have with carbon tracking and climate change?
Verbatim Examples
Would knowing that you could take action by donating to plant trees help you feel better about your carbon footprint?
"Planting trees isn't as effective as preserving existing ones."
" Climate change isn't real, so this isn't an issue."
"If I can take action after seeing my carbon footprint, I'd feel better about returning and might use it more often."
" I'm not sure how accurate this is, and because of that, I don't think I'd use it."
Insights
While a testing environment is not always the most accurate measurement, it's great for getting a sense of direction when it comes to the basics. In our research, we found that two distinct personas emerged. Walter - a climate change skeptic that didn't feel he wanted to engage because it wasn't a "real" problem, and Sheila, who represented users that were more engaged with climate change and were able to more clearly recognize the limitations of tracking technology. We also had quite a few users understand it enough to get an idea of what was being tracked and how, but weren't convinced it was accurate enough for long-term engagement.
Next Steps
I amalgamated our research findings and used them to guide persona creation.
User Personas
Using the research above, I created two personas: Sheila and Walter.
//SKETCH
The basis for my sketches came from our user feedback and the newly created personas. We wanted to account for our established user goals (1) tracking their carbon footprint, (2) onboarding easily, (3) education, and (4) acting to "offset" their carbon footprint.
The main differences were the breadth of information they were given and at what points.
// LOW FIDELITY
Wireframes
I started with low-fidelity wireframes on Figma to get a sense of the onboarding flow, dashboard, and education pages. I was still exploring two different onboarding designs, so I created designs for both flows. Here are some samples below.
Sync Round 2
It was important to share these to gain clarity on how to move forward while also accounting for development, product road maps, adherence to existing design flows, and more.
// HIGH-FIDELITY
I designed high-fidelity wireframes on Figma that were in line with the company's style guide and accessibility guidielines. I designed for web, tablet, and mobile (iOS/Android). As a team, we decided to go with the simpler onboarding flow because of a limited scope and tight deadlines.
Onboarding Flow (FTUX):
Dashboard:
Enrolled
FTUX
Sample Education Page
Return User Experience Acct. Page
Sample Error Handling Page
// PROTOTYPING
The sole purpose of the prototype was testing, since all the interactions were thoroughly documented and designed according to the company's accessibility and style guidelines. Here is a video of the prototype.
Since it's a feature that has not launched, all names / brands have been removed, and the final version has not been shown.
Testing
Without being able to share more details, I can share that users (overall) enjoyed a simpler flow with a balanced approach to education without overwhelming them with information, a good estimate on their carbon footprint, and links to more information.
// LAUNCH
The project launched April 23, 2023 (Earth Day).
Impact
To be seen!
Reflections
The biggest challenges of this project were balancing:
-
existing components with new ones within scope
-
timeline with complexity of design
-
proprietary nature of project with controlled testing
-
a new feature and similarity to existing flows / functionality in the banking app
-
aesthetic design with accessibility standards
-
education without overwhelming the user with information