2024/Fullstack/competition

PeduliCarbon

Designed as a behavior-change product, PeduliCarbon translated climate intent into a guided decision flow so users could calculate footprint trade-offs and act on practical reduction paths.

Domain
Fullstack
Role
Lead Frontend Developer
Output
Web App
Category
Climate Impact Product
Project Framing

A source-backed case study built for recruiter review

This reading path makes the problem choice, evidence quality, user framing, execution decisions, and proof trail visible without overstating what the sources support.

Project Type
competition

Carbon-footprint product that helps users quantify daily impact and take practical reduction steps.

Orientation
Hybrid

Won capstone recognition and validated product positioning around clarity and usability.

Core Stack
Next.js · TypeScript · Tailwind CSS · React Three Fiber

Next.js application with interactive UI state management and visualization-driven experience layer.

Why This Problem Mattered

Problem framing before execution

The case-study layer starts with why this problem was selected and how the context justified investment.

Problem Framing Map

Issue

Users often want to reduce environmental impact but lack a simple and motivating entry point for daily behavior-change decisions.

Context

PeduliCarbon is a competition-backed climate product that combines guided interaction, footprint calculation, and visual communication to make the product journey easier to follow.

Why Selected

It is a strong supplementary candidate because it adds product-thinking depth around behavior change, user flow, and persuasive UX without needing to overclaim market validation.

Problem statement

Users often want to reduce environmental impact but lack a clear and accessible starting point.

Solution thesis

Built an interactive product with a guided calculation flow and visual communication for carbon-impact awareness.

Research and Evidence

What supports the narrative

Evidence is surfaced with its source type and credibility note so the recruiter can quickly see what is directly backed versus intentionally constrained.

Behavior-change framing
local

The project explicitly treats carbon awareness as a practical decision-flow problem rather than only an information-display problem.

Credibility: Backed by the problem statement, detail intro, and visual snapshot already recorded in the project entry.
Competition-backed proof
local

The project won GDSC UNDIP capstone recognition.

Credibility: Supported by the proof, metrics, and source-backed project brief.

Credibility Notes

  • The case is presented as a competition-backed product and UX artefact, not as a validated climate-behavior platform with measured retention or impact outcomes.
  • No completion-rate, carbon-reduction, or adoption metric is introduced unless it is explicitly documented in source.
Who The User Was

User framing stays explicit

When formal research artefacts are not available, the page still explains who the work served and why that user framing is justified by the existing sources.

Primary user
People who want a clearer way to quantify and reflect on their daily carbon-impact choices.

The strongest source-backed product value lies in how the guided flow lowers friction for climate-awareness decisions.

Reviewer stakeholder
Reviewers evaluating whether the UX flow turns abstract climate intent into an actionable product journey.

The existing visual and product narrative emphasize guided flow, storytelling, and practical decision support.

Decision Flow

How design thinking translated into decisions

The goal is to show the trace from research and insight to concrete product or system decisions, then to the outcomes those decisions supported.

Design Thinking Flow

Each step keeps the movement from evidence to action explicit before the rationale expands it.

  1. Step 1
    Behavior-change framing

    Started from low-friction climate action entry rather than overwhelming users with broad educational content.

    Signal: The product narrative stays focused on guided decision support.
  2. Step 2
    Multi-step journey design

    Used a structured calculator flow so users could move through footprint estimation step by step.

    Signal: The experience is organized as progression, not scattered content.
  3. Step 3
    Immersive communication

    Added a richer visual layer to reinforce attention and storytelling during the journey.

    Signal: React Three Fiber became part of the engagement strategy.

Decision Rationale

Each decision keeps the path from insight to execution visible before ending on the outcome signal.

Guided calculator flow
Insight

Behavior-change products lose users when the first interaction feels vague or cognitively heavy.

Decision

Built a multi-step calculator experience that progressively quantifies footprint choices.

Outcome

The product feels more actionable and easier to enter.

Visual storytelling layer
Insight

Climate-awareness tools need emotional clarity as much as raw information.

Decision

Used React Three Fiber to strengthen attention and product differentiation.

Outcome

The experience reads as more memorable without changing the core guided flow.

Solution and System Execution

Execution choices and delivery details

This section preserves the technical and operational substance: architecture, responsibilities, trade-offs, and implementation quality signals.

System Design

Next.js application with interactive UI state management and visualization-driven experience layer.

Source-backed Impact

Won capstone recognition and validated product positioning around clarity and usability.

Responsibilities

  • Owned front-end architecture and interactive UX flow
  • Implemented stateful calculator experience
  • Contributed to problem framing and value proposition

Stack Decisions

  • Used Next.js and TypeScript for maintainable product delivery
  • Used React Three Fiber to improve engagement and differentiation

Trade-offs

  • Accepted extra UI complexity to improve educational impact

Challenges

  • Balancing rich visuals with clarity and performance
Execution Visuals

Architecture and outcome snapshot

This visual layer keeps execution readable: how the system or delivery flow was structured and which source-backed outcomes mattered most.

Execution Flow

  1. Step 1
    Problem Framing

    Positioned carbon-awareness as a behavior-change issue and designed a simple onboarding entry point.

    Signal: Product narrative anchored to accessibility and practical action
  2. Step 2
    Interactive Journey

    Built a guided multi-step calculator flow to help users quantify daily footprint decisions.

    Signal: State-driven experience enables stepwise completion without heavy friction
  3. Step 3
    Visual Communication

    Added immersive visual layer to strengthen attention and learning outcomes in the user journey.

    Signal: React Three Fiber used for differentiated climate-awareness experience

Outcome Snapshot

  • Competition Result
    Capstone Winner

    GDSC UNDIP capstone recognition achieved

  • User Flow
    Multi-step carbon calculator

    Quantification path designed for practical decision support

  • Tech Signature
    Next.js + TypeScript + R3F

    Modern frontend stack with visual storytelling layer

Outcomes and Proof

What was delivered and what can be verified

Outcome claims remain conservative and source-backed, while proof records and recruiter-safe links surface the strongest verification trail available.

Validation Signals

  • Winner of GDSC UNDIP Capstone is recorded as project proof.
  • Interactive multi-step user flow is documented as part of the implementation story.

Source-backed Outcomes

  • Winner of GDSC UNDIP Capstone
  • Interactive multi-step user flow deployed
Retrospective and Limits

What the project proves, and what it does not

Strong case studies show both what was learned and where the current evidence stops.

Retrospective

Future evolution should include baseline analytics for completion rate and behavior-change outcomes.

Evidence Limits

  • Current sources do not provide long-term completion, retention, or behavior-change outcome evidence.
  • The project should remain framed as competition-backed product and UX execution.

Lessons

  • Simple inputs with strong storytelling improve behavior-change products