Turning environmental impact into a visible, engaging experience.
CASE STUDY
ROLE
UX UI Designer
TIMELINE
8 Weeks (2025)
TEAM
1 Designer (me)
1 Senior Designer
SKILLS
Interaction Design
Prototyping
The Amazon rainforest absorbs huge amounts of CO₂, supports immense biodiversity, and sustains millions of people and Indigenous cultures. Protecting it means safeguarding the Earth’s livability.
As a platform committed to Amazon conservation, Earthwin needed to show supporters how their actions directly help preserve this ecosystem.
Overview
The PROBLEM
While Earthwin connects people to vital conservation efforts, its digital experience didn’t show how individual actions translate into real-world outcomes. After making a donation or joining a campaign, users were left without a sense of progress and without a clear reason to return.
The challenge
How might we help users understand the tangible impact of their actions, so they feel motivated to stay involved and become ongoing partners in conservation?
Research
STAKEHOLDER INTERVIEWS
Understand Earthwin’s vision, mission, and expectations for the dashboard to ensure alignment between conservation goals and the user experience.
Stakeholder interview criteria
Earthwin’s mission and vision
Definition of “impact” and how it’s represented
Key metrics and success indicators
User motivation and reasons to return
Emotional goals vs data-driven transparency
Content clarity
Stakeholder interview insights
Communicating value upfront is essential for building trust with users, donors, and long-term partners.
We want users to feel emotionally invested not just donate once and forget about it.
Making impact visible and measurable helps users understand their contribution.
It’s hard to show exactly how donation helps. People can’t see what they’ve done.
Approach
Drawing from stakeholder insights and user needs, I built the dashboard around two key strategies: education and motivation. Together, they help move the experience beyond one-time donations toward ongoing participation.
Education as Activation
Educational moments are gently woven into the experience. Visual cues and light storytelling connect user actions to real-world conservation, turning passive support into informed engagement.
Gamification as Motivation
Subtle game-like elements such as progress visuals and milestones make growth visible and rewarding, encouraging return visits while staying true to the mission.
USER JOURNEY
Evan, 36 / A conscious consumer and community advocate, Evan learns about Earthwin through a friend. Trust and transparency guide his journey, ensuring every step clearly shows how contributions create real-world impact.
Step-by-step user journey
03 EXPLORE
Evan sees: Real project photos and simple facts (hectares protected, CO₂ offset).
Evan does: Creates an account to personalize his impact.
Why it helps: Transparency builds confidence and motivates sign-up.
04 ONBOARDING
Evan sees: A guided dashboard intro: personal vs. community impact, why forests matter, and a goal-setting prompt.
Evan does: Sets an impact goal and explores initial stats.
Why it helps: Creates a clear mental model of progress and motivates repeat visits.
Mascot introduces to the forest
Ask user to set a goal
Show how much user has helped
Show how donation benefit forest
05 REWARDS
Evan sees: Milestones, records of contribution, tokens/badges.
Evan does: Celebrates progress and shares achievements.
Why it helps: Recognition and evidence reinforce trust and encourage advocacy.
06 IMPACT MAP
Evan sees: An interactive global map showing personal, community, and project impact.
Evan does: Clicks a region to view photos, partners, and outcomes.
Why it helps: Connects personal action to real-world places and results.
06 LESSONS
Evan sees: Articles, quick facts, flip cards, quizzes, and a carbon meter.
Evan does: Reads, explores, and tests his knowledge.
Why it helps: Provides continuous education, deepening connection to the mission.
IDEATION
Keeping stakeholder and user needs in mind, I started sketching ideas to address the pain points.
Lightweight Design System
Brand
Light Green #A8D08D
Forest Green #3A7D44
Secondary
Warm Beige #F6E9D2
Soft Brown #B98D48
Accents
Sky Blue #66C2FF
Sun Yellow #FFD966
Coral Orange #F28C38
Neutrals
Dark Grey #333333
Mid Grey #777777
Light Grey #F2F2F2
White #FFFFFF
PRIMARY BUTTONS
Primary Button Filled
Default
Primary Button Filled
Hover State
Primary Button Filled
Pressed
Primary Button Outline
Outline
Primary Button Filled
Disabled
SECONDARY BUTTONS
Secondary Button Filled
Default
Secondary Button Filled
Hover
Secondary Button Filled
Pressed
Secondary Button Outline
Outline
Secondary Button Filled
Disabled
TERTIARY BUTTONS
Tertiary Button
Default
Tertiary Button
Hover
Tertiary Button
Pressed
ROUND BUTTONS
Default
Hover State
Pressed
Outline (Dark)
Outline (Light)
Disabled
SWITCH
Active Side
Inactive Side
Inactive Side
Active Side
FILLED AND OUTLINE ICONS
MODAL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae sapien ac nulla facilisis ultrices et in nunc.
Text
Text
PROGRESS BAR
COLLAPSABLE CARD
Heading Text
These small guardians are
EFTs, young forest spirits who grow stronger as you do. Each one marks a step in your journey. The more you share, protect and support, the more arrive to help Vira restore the balance.
Heading Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae sapien ac nulla facilisis ultrices et in nunc.
CARD
Full Name
Status
xx Information Text
xx Information Text
Legend related information
MESSAGE CARD
Heading Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae sapien ac nulla facilisis ultrices et in nunc.
FLIPPING CARD
Design
MASCOT
To make conservation more human and engaging, Vira was introduced as a relatable guide. Her presence builds emotional connection — supporting KPIs like repeat visits, time spent, and long-term retention.
ONBOARDING
To build motivation early in the journey, the onboarding introduces Earthwin’s mission, helps users set a personal goal, and shows how their actions can create real impact.
Onboarding goal
Welcome
Meet Your Guide
Understand Your Impact
Set Your Goal
Your Forest, Today
Track Your Progress
Set goal
Welcome
Edit Goals
How might we make complex metrics like CO₂ offset easier to understand?
Linking CO₂ offset to familiar, everyday comparisons helps users see the real-world meaning of their goals.
200 tons CO₂ offset
=
20 football fields of trees
=
200 flights NYC–London avoided
Impact detail
Welcome
Learn about Jaguars
How might we make donations more transparent and build trust in how they’re used?
These sections show personal and community impact, connect contributions to real projects, and explain why they matter — making the flow of donations visible and trustworthy.
View of first time user
View of recurring user
Progress & Rewards
Badges and rewards were introduced to celebrate milestones and encourage consistency. They give users a sense of achievement, make progress visible beyond numbers, and add an element of fun that keeps people engaged over time
Earning Impact
Earn points through actions
Points unlock badges
Multiple badges convert into EFTs
IMPACT MAP
A map helps users see both community-wide and personal impact — connecting their actions to Earthwin’s global conservation efforts.
LEARN
Learn & Earn / Users explore short, engaging articles on topics like conservation and biodiversity, then take quick quizzes to earn points — reinforcing knowledge through light, reward-based interaction.
CO₂ Meter / Shows how everyday actions — like using less energy or skipping a flight — translate into CO₂ savings, helping users understand how small changes support the planet.
Flip Cards / Interactive cards revealing “secrets” from the forest, sharing surprising facts that highlight its importance and deepen user connection.
Quiz
Donation
Donation cards highlight specific causes and show how contributions are used, making giving clear and meaningful.
INVITE
When someone invites a friend, a hand appears on the wall. This visual makes the act of inviting visible and symbolic — showing that every new member strengthens the community and adds to the collective effort.
TESTING
Icon and layout choice
V1
1
The “?” icon was read as support and replaced with “i” to signal information.
V2
2
Floating boxes created distraction and made impact data harder to read.
V3 (Final)
Metrics grouped at the bottom felt clearer and kept the scene clean.
Mascot placement
V1
Earlier iterations placed the mascot within the main scene, where messages competed with key impact visuals.
Prototype
Click on the prototype to explore!
Press R to restart
The full process is documented in my Figma File if you’d like to dive deeper.
IMPACT
Increase clarity of impact by ~60% through visualizing hectares and CO₂.
Encourage recurring engagement, targeting a ~30–35% uplift with goal-setting and progress tracking
Strengthen community participation, aiming for ~25% more invites.
Boost emotional connection and session time by ~20% through storytelling with wildlife, tribal culture, and forest visuals
Improve trust and likelihood of continued contributions by ~15–20% through transparent, measurable outcomes
