Evergreen

EverGreen helps Capital One customers visualize the environmental impact of their spending.

Comment

Inspiration

Many people want to make environmentally responsible choices, but tracking the real impact of everyday purchases can feel complicated or time-consuming. We noticed that financial apps often show where people spend their money, but not how their spending affects the planet. EverGreen was inspired by the idea of turning ordinary transactions into a visualization of personal growth through environmental impact. By visualizing progress through a growing tree, we aim to make sustainability simple, motivating, and rewarding.

What it Does

EverGreen analyzes customers' transactions and categorizes them based on the environmental sustainability of the merchant. When a user makes a positive-impact purchase, such as shopping at a local farmer's market, their Sustainability Score increases. This score reflects how environmentally friendly their spending habits are. As their score grows, users see an interactive, evolving image of a tree, symbolizing the growth of their own personal impact. The dashboard also includes a visual breakdown of spending categories and suggested sustainable alternatives for less eco-friendly purchases, helping users make more conscious choices in a positive, engaging way.

How we Built it

We started with a template that had HTML, CSS, and React and JavaScript files, reusing some formatting and component structures from previous projects. This allowed us to focus our efforts on designing the user interface and creating a clean, intuitive experience for users. We built a minimalistic and visually appealing dashboard, highlighting important information such as the Sustainability Score, the growing tree visualization, and the impact of the user's spending.

Challenges we Ran Into

A few challenges we ran into while building EverGreen was curating an accurate list of sustainable merchants. Additionally, designing a tree visualization that felt engaging without being overly complex was tricky, and adapting a pre-existing template to achieve a clean, minimalistic UI was time-consuming. Even with static data, we needed to consider how future integration with live transaction data would remain secure.

Accomplishments that we're Proud Of

We successfully built a custom CSV parser to handle transaction data and designed a complex, interactive SVG line graph from scratch. We're especially proud of the "Your Growth" feature, which gamifies sustainable spending by turning a user's score into a tree that grows from a "Sprout" to a "Flourishing Tree". The app also provides actionable recommendations for unsustainable purchases, empowering users to make greener choices.

What we Learned

We successfully built a custom CSV parser to handle transaction data and designed a complex, interactive SVG line graph from scratch. We're especially proud of the "Your Growth" feature, which gamifies sustainable spending by turning a user's score into a tree that grows from a "Sprout" to a "Flourishing Tree". The app also provides actionable recommendations for unsustainable purchases, empowering users to make greener choices.

What's next for EverGreen

The next step for EverGreen is to connect to a real banking API for live transaction data instead of relying on a static file. We also plan to implement smarter, machine-learning-based categorization and allow users to set personal sustainability goals. These features would transform the app into a more proactive and personalized tool.

Built With

Share this project:

Updates