UX Case Study · 2024

EcoTrack

A personal carbon footprint tracker that transforms everyday habits into measurable environmental impact, through data-driven insights and habit-forming UX.

8 Weeks
Figma · Principle
UX / Visual Design
Good morning,
Alex 🌿
🌱
Today's Footprint
3.2 kg CO₂e
↓ 18% vs your average
🏠 All
🚗 Transport
🥗 Food
⚡ Energy
🚲
Cycled to work
Saved 1.4 kg CO₂
−1.4kg
🥩
Red meat lunch
High emission meal
+2.1kg
💡
Solar energy used
Home grid offset
−0.3kg
Project Overview

Making climate action personal

Most people want to reduce their carbon footprint but lack tools to understand their daily impact. EcoTrack bridges that gap with intuitive tracking, contextualised data, and habit science.

8
Weeks of research, design & prototyping
24
User interviews in discovery phase
3
Rounds of usability testing
47
Screens across 4 core flows
8-Week Timeline
W1
Discovery
Stakeholder interviews & competitive audit
W2
Research
User interviews, surveys, behavioural analysis
W3
Synthesis
Affinity mapping, personas, journey maps
W4
Ideation
Design sprints & concept validation
W5
Design
Wireframes, design system, hi-fi UI
W6
Prototype
Figma prototype + Principle animations
W7
Testing
Usability testing, A/B tests, heatmaps
W8
Handoff
Dev specs, accessibility audit, delivery
Problem Space

The climate-behaviour gap

72% of people care about climate change but fewer than 8% actively track their emissions. Existing tools are too complex, too guilt-inducing, or fail to connect abstract data to real change.

😓

Data Paralysis

Existing carbon calculators overwhelm users with complex spreadsheets and technical jargon. People abandon the process before reaching any insight.

📉

No Feedback Loop

One-time calculators don't track change over time. Without continuous feedback, users can't see the impact of their behaviour changes.

🎯

The Action Gap

Knowing your footprint doesn't automatically change it. Apps lack the motivational scaffolding and habit design to drive real behaviour change.

How might we help eco-conscious individuals understand their daily carbon impact and build lasting low-carbon habits, without overwhelming or guilting them?

User Research

Listening before designing

24 interviews with eco-conscious adults aged 22–45 uncovered patterns about motivation, friction, and the psychology of environmental behaviour change.

83%

Progress beats perfection

Users want to see incremental improvement, not be compared to an ideal benchmark they can't reach.

71%

Context makes data meaningful

"1.4 kg CO₂" means nothing alone. Users need relatable comparisons like trees planted or km driven.

66%

Social proof motivates

Knowing friends or community members are taking similar actions increases personal commitment.

58%

Automatic tracking preferred

Manual logging is a major drop-off point. Users want smart defaults and minimal input required.

👨‍💻

Mridul M

28 · UX Designer · Bengaluru

Goals

Reduce footprint by 30% Eat less meat Use public transit more

Frustrations

Apps feel preachy Too much manual entry No visible progress

Motivations

Streaks & gamification Peer comparison Visual data stories Positive framing
Design System

Rooted in nature, built for clarity

A visual language that feels organic and calming, not clinical or guilt-inducing. Deep forest greens ground the interface; warm cream tones add warmth; bright mint accents celebrate positive actions.

Forest
#0D3D2B
Fern
#2E8B57
Leaf
#4DBD74
Mint
#A8F0C0
Cream
#F5F0E8
Sky
#60B8D4
Gold
#D4A843
Ember
#FF6B35
Typeface · Quicksand
3.2 kg CO₂
Your Weekly Progress
Rounded, friendly, and highly legible. Used at every weight from light captions to bold display numerals, one family, full cohesion.
Type Scale
Display / 700
Heading / 600
Body / 500, readable at small sizes
LABEL / 500 CAPS
01

Positive Framing

Celebrate what users saved, not what they emitted. Progress is always shown as improvement over their own baseline, never against an impossible ideal.

Loss aversion + self-reference effect
02

Progressive Disclosure

Summary numbers first, detail on demand. Users see their overall score immediately; drill-down reveals category breakdowns and specific recommendations.

Reduces cognitive load at entry points
03

Variable Reward

Streak counts, unexpected achievement badges, and weekly surprise reports keep users returning. Unpredictable positive reinforcement builds strong habit loops.

Skinner's operant conditioning
Key Screens

Four flows, one cohesive journey

Every screen minimises friction and maximises insight. Dark backgrounds reduce cognitive load; glowing accents draw attention to positive actions.

EcoTrack Dashboard
EcoTrack Insights
EcoTrack Habits
EcoTrack Profile
Data Visualisation

Numbers that tell stories

Every chart is immediately legible while rewarding exploration. Colour encodes category; size encodes magnitude; motion reveals change over time.

Weekly Emissions Breakdown
kg CO₂e by day, current week
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Category Targets
% of monthly reduction goal
60%
Transport
75%
Food
50%
Energy
12-Week Carbon Journey
Weekly average kg CO₂e · Dashed line = personal baseline
W1
W2
W3
W4
W5
W6
W7
W8
W9
W10
W11
W12
Habit-Forming UX

The psychology of lasting change

EcoTrack applies six proven behavioural science patterns to make sustainable habits feel natural, rewarding, and sticky, not obligatory.

🔥

Streak Mechanics

Visual streak counters create loss aversion, users don't want to break a 12-day chain. Combined with daily push notifications at the user's chosen time.

Hooked Model, Trigger
🎯

Implementation Intentions

"If I eat out, I'll choose a plant-based option." Specific if-then plans dramatically increase follow-through vs vague goals.

Gollwitzer, 1999
📊

Progress Visualisation

Incomplete tasks demand attention (Zeigarnik effect). Progress rings and completion bars create a compelling pull toward finishing daily goals.

Endowed Progress Effect
🌍

Social Proof & Norms

"People in your city average 28 kg/week. You're at 22." Descriptive norms shift behaviour more effectively than prescriptive messaging.

Cialdini, Social Proof
🏆

Variable Rewards

Unexpected badges, level-ups, and weekly surprise stats create dopamine-driven engagement. Users never know exactly when the next reward arrives.

Variable Ratio Reinforcement
🌱

Tiny Habits Framework

BJ Fogg's method: anchor new habits to existing ones. "After I order food, I'll tap the meal type in EcoTrack." Reduces friction to near-zero.

Fogg Behavior Model
Results & Impact

Validated by real users

Three rounds of usability testing with 18 participants across two user groups produced measurable improvements and strong qualitative validation.

94%

Task Completion Rate

Users successfully completed all 5 core tasks on first attempt, log a habit, view weekly breakdown, set a goal, find recommendations, share progress.

4.7/5

System Usability Score

SUS score of 87.5, in the "Excellent" range. Users cited visual design and progress tracking as primary strengths.

−62%

Time-on-Task Reduction

From v1 wireframe to final prototype, average time to log a daily activity dropped from 47s to 18s through progressive disclosure redesign.

82%

Stated Intent to Use Daily

82% of participants said they would use EcoTrack daily. Primary motivator: the streak mechanic and visual progress tracking.

Reflections

What I'd do differently

An honest retrospective on the process, decisions, and things that would improve with more time or resources.

01

Test earlier, test uglier

Too long was spent polishing the visual design before the first usability test. Rough wireframes would have surfaced navigation issues just as effectively at a fraction of the time cost.

02

Guilt vs motivation is a tightrope

Early iterations inadvertently felt judgemental on a bad day. Reframing all negative states as "opportunities" required 3 rounds of copy and colour iteration, a content design challenge that was underestimated.

03

Accessibility from day one

The dark-green palette created contrast issues discovered late in the process. Building accessible colour ratios into the design system from the start would have saved significant rework.

04

Data input is the hardest problem

Making carbon tracking automatic requires deep integrations (bank APIs, GPS, health data) outside a design-only scope. The next version needs an engineering partner to explore passive tracking properly.

EcoTrack , Figma Prototype
iPhone 15 Pro · 390×844
Onboarding Flow
01
Splash Screen
App Launch
EcoTrack
Personal Carbon Tracker
→
02
Onboarding 1
Track Your Impact
01 / 03
Track Your Impact
🌍
Get Started
→
03
Onboarding 2
Build Habits
02 / 03
Build Habits
🔥
Continue
→
04
Onboarding 3
See Insights
03 / 03
See Your Data
📊
Start Tracking
→
05
Login
Sign In
Core App Flow
06
Dashboard
Home Screen
Good morning,
Alex 🌿
🌱
Today's Footprint
3.2 kg CO₂e
↓ 18% vs average
All
🚗
🥗
⚡
🚲
Cycled to work
Transport
−1.4kg
🥩
Red meat lunch
Food
+2.1kg
→
07
Log Activity
Track Emission
←
Log Activity
🚗
Transport
🥗
Food
⚡
Energy
🛒
Shopping
Choose Meal Type
🥗
Plant-based
🐔
Chicken
Est. footprint
0.8 kg
→
08
Success
Logged!
✓
Activity Logged!
Plant-based meal saved CO₂
−0.8 kg
CO₂ saved today
Back to Home
Analytics & Profile
09
Insights
Analytics
Your Insights
Weekly overview
Week
Month
Year
M
T
W
T
F
S
S
60%
Transport
75%
Food
50%
Energy
→
10
Habits
Habit Tracker
My Habits
12-day streak 🔥
🚲
Cycle to Work
75%
🥗
Plant-Based Day
60%
🚲
Cycled to Work
12 day streak
✓
🥗
Plant-Based Meal
8 day streak
✓
♻️
Recycled Waste
5 day streak
+ Add New Habit
→
11
Profile
User Settings
🌱
Alex Chen
eco-warrior
−32%
Reduction
12🔥
Streak
8
Badges
🌱
🚲
⭐
🔥
🔔
Notifications
›
🎯
Goals
›
📊
Data Export
›
Sign Out
→
12
Sign Out
Confirmation
👋
Sign Out?
Your progress is saved and synced to the cloud.
Yes, Sign Out
Stay In App
Click any screen to jump to it in the prototype ↑ · EcoTrack · 12 Screens · iPhone 15 Pro (390×844)
Screens
Onboarding
Core App
Analytics
9:41
EcoTrack
Personal Carbon Tracker
01 / 03
Track Your
Impact
See exactly how your daily choices, from meals to commutes, affect your personal carbon footprint in real time.
🌍
02 / 03
Build
Habits
Streak mechanics, daily reminders, and micro-goals make low-carbon living feel natural, not like a chore.
🔥
03 / 03
See Your
Data
Beautiful charts and insights show your progress, compare you to city averages, and celebrate every win.
📊
Good morning,
Alex 🌿
🌱
Today's Footprint
3.2kg CO₂e
↓ 18% vs your average
12🔥
Day Streak
🏠 All
🚗 Transport
🥗 Food
⚡ Energy
🛒 Shopping
Today's Activity
+ Add
🚲
Cycled to work
Transport · 8:30 AM
−1.4kg
🥩
Red meat lunch
Food · 12:15 PM
+2.1kg
💡
Solar energy used
Energy · Auto-logged
−0.3kg
+ Log Activity
🏠
Home
📊
Insights
➕
Log
🌿
Habits
👤
Profile
Log Activity
Choose Category
🚗
Transport
Car, bus, flights, cycling
🥗
Food
Meals, groceries, diet
⚡
Energy
Home, heating, cooling
🛒
Shopping
Clothes, electronics
Meal Type
🥗
Plant-based
~0.5–1.2 kg CO₂e
✓
🐔
Chicken / Poultry
~1.5–2.5 kg CO₂e
🥩
Red Meat
~3.5–6.0 kg CO₂e
🐟
Fish / Seafood
~1.0–2.0 kg CO₂e
Estimated Footprint
for this activity
0.8 kg CO₂e
Add a note (optional)
✓
Activity Logged!
Great choice! Your plant-based meal is helping reduce your weekly footprint. Keep it up!
−0.8 kg
CO₂e saved compared to red meat
🔥
12-day streak!
You're on a roll. Log again tomorrow to keep it going.
Your Insights
June 2026 · Week 23
Weekly Emissions
kg CO₂e by day, current week
Mon
Tue
Wed
Thu
Fri
Sat
Sun
60%
Transport
75%
Food
50%
Energy
💡

You're 32% below city average

People in Mysuru average 28 kg/week. You're at 19 kg this week, keep it up!

⚠️

Thursday spike detected

Your Thursday emission was 4.5 kg, likely the red meat meal. Swapping once/week saves ~85 kg/year.

🚲

Cycling streak: 12 days

You've saved 16.8 kg CO₂ by cycling instead of driving this streak.

🏠
Home
📊
Insights
➕
Log
🌿
Habits
👤
Profile
My Habits
12-day streak 🔥 · June 2026
Monthly Goals
Edit
🚲
Cycle 20×
15/20
🥗
Plant Days 12×
7/12
♻️
Recycle Daily
50%
⚡
Low Energy
17/20
Today's Habits
🚲
Cycled to Work
🔥 12 day streak
✓
🥗
Plant-Based Meal
🔥 8 day streak
✓
♻️
Recycled Waste
5 day streak
💡
Energy Saver Mode
3 day streak
+ Add New Habit
🏠
Home
📊
Insights
➕
Log
🌿
Habits
👤
Profile
🌱

Alex Chen

Member since Jan 2024 · Eco Warrior

−32%
Reduction
12🔥
Streak
8
Badges
Badges Earned
See All
🌱
First Log
🚲
Cyclist
⭐
7-Day Streak
🔥
Streak Master
🌍
30% Reducer
Settings
🔔
Notifications
›
🎯
My Goals
›
📊
Export Data
›
🌍
Units & Region
›
🔒
Privacy
›
❓
Help & Support
›
🏠
Home
📊
Insights
➕
Log
🌿
Habits
👤
Profile
👋
Sign Out?
Your progress is saved and synced. You can pick up right where you left off when you return.
Current Screen
Splash
App Launch
Device
iPhone 15 Pro
390 × 844 pt
Dynamic Island
Flows
Splash → Onboarding
→ Login → Dashboard
→ Log Activity → ✓
→ Insights
→ Habits
→ Profile → Sign Out
Tip
Tap buttons on screen to navigate. Use the panel on the left to jump to any screen.