App

Engagement through gamification

Designing a sustainability app MVP that engages users and attracts investors

Product Designer | Mobile UX/UI | January 2025

The challenge

  • Launch an MVP to motivate users to build sustainable habits

  • Attract early investors and validate product-market fit

  • Prioritize core features and create an engaging, scalable user experience

My role

  • Lead Product Designer, solo designer on the project

  • Collaborated closely with one developer and a key stakeholder

  • Ensured smooth design-to-development handoffs and iterative releases

  • Aligned design decisions with evolving business priorities alongside stakeholder

Discovery & research

  • Conducted user interviews and surveys to identify motivators and pain points

  • Found motivation and clear feedback loops are critical for habit formation

  • Performed competitive analysis to find differentiation through AI-powered scanning and gamification

  • Conducted user interviews and surveys to identify motivators and pain points

  • Found motivation and clear feedback loops are critical for habit formation

  • Performed competitive analysis to find differentiation through AI-powered scanning and gamification

  • Conducted user interviews and surveys to identify motivators and pain points

  • Found motivation and clear feedback loops are critical for habit formation

  • Performed competitive analysis to find differentiation through AI-powered scanning and gamification

85% users

wants simple tracking & visible impact to stay motivated.

Design goal: Make progress feel tangible, rewarding, and personal

Design goal: Make progress feel tangible, rewarding, and personal

85% users

wants simple tracking & visible impact to stay motivated.

Design goal: Make progress feel tangible, rewarding, and personal

60% users

78% users

felt habit tracking was “too much effort”

Design goal: Prioritized AI-powered scanning for tracking

Design goal: Prioritized AI-powered scanning for tracking

60% users

felt habit tracking was “too much effort”

Design goal: Prioritized AI-powered scanning for tracking

“I stop using apps when it feel like work—if I can just scan something and get a ‘well done,’ that’s a win.”


—user

“I stop using apps when it feel like work—if I can just scan something and get a ‘well done,’ that’s a win.”


—user

0/5 apps

78% users

offer automated or AI-powered habit tracking

Design goal: Prioritized AI-powered scanning for tracking

Design goal: Prioritized AI-powered scanning for tracking

0/5 apps

offer automated or AI-powered habit tracking

Design goal: Prioritized AI-powered scanning for tracking

3/5 apps

78% users

use some form of gamification

→ Often too complex (RPG-style) or too passive (background visuals)

Design goal: joy to see the progress

Design goal: joy to see the progress

3/5 apps

use some form of gamification

→ Often too complex (RPG-style) or too passive (background visuals)

Design goal: joy to see the progress

4/5 apps

78% users

Does not provide motivation for the user

Design goal: make it personal, show effort

Design goal: make it personal, show effort

4/5 apps

Does not provide motivation for the user

Design goal: make it personal, show effort

Designing motivation

User research revealed:

  • Users struggled with staying motivated over time

  • Abstract goals like "being sustainable" felt distant or invisible

  • Feedback loops were missing — people didn’t feel their actions mattered


I asked:
How might we make invisible progress feel tangible, rewarding, and emotionally engaging?

I explored options:


Idea

Pros

Cons

Points or badges

Familiar, easy to implement

Felt generic and not emotionally rich

Habit streaks

Reinforces consistency

Easy to break, discouraging when broken

Virtual garden/tree growth

Visually shows progress tied to effort

Slightly more work to animate or illustrate, but memorable

Carbon score leaderboard

Competitive, factual

Too technical and not rewarding for all users

User research revealed:

  • Users struggled with staying motivated over time

  • Abstract goals like "being sustainable" felt distant or invisible

  • Feedback loops were missing — people didn’t feel their actions mattered


I asked:
How might we make invisible progress feel tangible, rewarding, and emotionally engaging?

I explored options:


Idea

Pros

Cons

Points or badges

Familiar, easy to implement

Felt generic and not emotionally rich

Habit streaks

Reinforces consistency

Easy to break, discouraging when broken

Virtual garden/tree growth

Visually shows progress tied to effort

Slightly more work to animate or illustrate, but memorable

Carbon score leaderboard

Competitive, factual

Too technical and not rewarding for all users

User research revealed:

  • Users struggled with staying motivated over time

  • Abstract goals like "being sustainable" felt distant or invisible

  • Feedback loops were missing — people didn’t feel their actions mattered


I asked:
How might we make invisible progress feel tangible, rewarding, and emotionally engaging?

I explored options:


Idea

Pros

Cons

Points or badges

Familiar, easy to implement

Felt generic and not emotionally rich

Habit streaks

Reinforces consistency

Easy to break, discouraging when broken

Virtual garden/tree growth

Visually shows progress tied to effort

Slightly more work to animate or illustrate, but memorable

Carbon score leaderboard

Competitive, factual

Too technical and not rewarding for all users

From Insight to Design: Bringing the motivation to life

To spark motivation from the first screen, I explored wireframes with big numbers, graphs, and badges showing CO₂ savings. While informative, they felt impersonal.
User tests showed more attention toward a small animated element — this led me to shift toward a more personal approach: a digital entity users could “feed” with their CO₂ savings. This emotional connection proved more engaging than stats, and shaped the core experience around care and progress.

Design system & consistency

  • Created a reusable Figma component library (buttons, inputs, cards, modals)

  • Established spacing system and typography scale

  • Ensured consistency and reduced development rework during MVP sprints

UI Components

To ensure consistency, scalability, and efficiency across the entire product, I created a comprehensive design system directly in Figma. I built out a flexible library of components with clearly defined variants and auto layout rules. I used component properties and design tokens to make everything easily adjustable and maintainable—ensuring the system could grow with the product.

Library

Everything was organized into a shared Figma library, enabling seamless collaboration and fast prototyping for the whole team.

This system now acts as the visual language backbone of the Carbon Tracker app, helping new features remain on-brand, accessible, and user-friendly.

Colour palette

The color palette predominantly features soft greens and neutrals, evoking a sense of nature, freshness, and environmental consciousness.

Typography

Hedvig Letters Serif, a sophisticated serif font, gave my design a timeless and elegant feel.

Helvetica Neue is a versatile sans-serif font that exudes a sense of cleanliness, neutrality, and modernity.

Validation

  • Ran 5 rounds of usability testing on low-fidelity wireframes to test the core user journey: Logging an action → Tracking progress → Earning rewards

⛔️

83% of users wants rewards to be more visually prominent, reinforcing motivation.

⛔️

83% of users wants rewards to be more visually prominent, reinforcing motivation.

⛔️

67% of users want to see more progression

⛔️

67% of users want to see more progression

⛔️

86% of users want to know how to get more carbon, and better motivation for everyday life

⛔️

86% of users want to know how to get more carbon, and better motivation for everyday life

Key trade-offs

  • Core layer = Tracking + Gamification

  • Optional layer = Social, AI nudges

  • Future = Personalization, analytics dashboards

Solution highlights

Gamification with visual growth

The animated tree on the homepage grows as users earn carbon credits, creating a sense of accomplishment and reinforcing progress.

Minimalist data input

Instead of tedious forms, users can snap a photo of a tree, a receipt, or a solar panel. AI then automatically estimates the CO₂ impact, reducing friction.

Seamless sign-up & onboarding

Quick login via Google/Facebook, plus a guided tutorial with interactive elements, ensures a frictionless start.

Impact & metrics

  • +15% WAU actively engaged with gamified features in the first month

  • ~30% user activation rate from install to first sustainable action

  • 5 rounds of usability testing reduced onboarding drop-off by ~25%

  • Early investor interest helped validate both the product concept and UX direction

  • Gamified rewards (tree growth) retained 40% of new users into week 2

  • Design-led MVP became a key asset in investor conversations and strategic planning

Learnings & next steps

What I learned:

  • Early usability testing is crucial for reducing onboarding friction

  • Visual feedback is a key motivator when building habit loops

    What’s next:

  • Add social and community features to drive retention

  • Expand AI use to personalize suggestions

  • Integrate analytics to optimize habit triggers and timing

Contact me

Do you have a question? Write me