Today’s world is becoming increasingly complicated – and increasingly grey. Pollution, conflict, and overconsumption are draining the color from our planet. The idea of TreeFund is simple: find an easy, meaningful way to help make our world greener again – one small step at a time.

Idea

The goal of TreeFund is to provide an easy and transparent way for people to contribute to environmental restoration projects in St. Pölten. Its main focus is supporting tree planting initiatives and teaching new generations how to help our planet. The idea is to connect with individuals who want to make a difference and focus on their specific needs. People will first encounter TreeFund through posters and flyers placed around the city. A QR code on each will lead directly to the TreeFund website, where users can learn more, get involved, and track the impact of their contributions.

Implementation

As the first step in the implementation process, I created a user persona: Lisa Gruber, a student at the University of Applied Sciences St. Pölten.

Lisa is deeply environmentally conscious and eager to contribute to positive change. However, she often feels frustrated by the impersonal nature of many existing donation platforms. She wants to see the real impact of her actions and connect with initiatives that align with her values on a local level.

To personalize this process, the user (Lisa) first contacts TreeFund via a form describing their personal needs and where they want to see a part of the world a little greener. Only after the user is happy and the tree planting effort is accepted by the city, the payment process begins. 

To attract younger customers the design follows a minimalist aesthetic with clean whites and greens to emphasize the simplicity and positivity of the project’s goal. The design was first created in Figma with inspirations like Ecosia and TreeApp. My goal was to stick to a strict number of TailwindCSS colors. The website switches between Stone-50 and -100 for the background and Lime-400, -500, -600 and -800 for the green accents.

After the design process, the actual website was implemented using React, Next.js, Tailwind CSS, and Lucide for icons.

Link to the Web Application: https://fhstp-print2mobil.vercel.app/

Disclaimer: This is a personal project created for educational and illustrative purposes. It is not affiliated with any existing environmental organizations. The aim is to demonstrate how web technology can be used to promote sustainability and environmental awareness.