Beeco - Volunteer Tree Watering Feature

Table of contents

Overview

Budapest Municipality, FŐKERT, and the 10 Million Trees Foundation needed a way to mobilize residents to water young trees. The first 3–5 years after planting are critical, and a severe drought was forecast for 2025. They partnered with Beeco to integrate the feature into their existing eco-app.

Beeco accepted the challenge and decided to integrate tree watering directly within their green map. We – as volunteer designers – got a short 1-1,5 month timeline to research, design and integrate the feature within a 6 member UX/UI group.

I contributed to the process of designing user flows, wireframes, map views, and icon system, builing and testing an interactive Figma prototype and performing field testing to identify real-world usability issues.

Main contribution

• User flow design for a new feature integrated into a complex existing app
• Competitive analysis of 5 international tree-watering platforms
• Map view design + tree status icon system (color-coded by water need)
• Educational content: in-app tree care and watering guides
• Interactive Figma prototyping + real-world field testing

01. The challenges of the design

The need for the app was rooted in a real and urgent problem. The aim of Budapest 2023’s Climate Strategy is to create 1m² of green area per person until 2030. To meet this goal, the city partnered with NGOs like the 10 Million Trees Foundation and planted thousands of new trees across Budapest. However, increasingly severe droughts made it impossible to maintain them all. Therefore the city needed a way to involve its residents.

Integration issues

With 50+ existing categories, adding a new feature risked cluttering the map and confusing users already familiar with the interface. We needed a dedicated layer that didn’t disrupt the existing experience.

Real world usability issues

We needed to design a GPS-validated watering function — one that records each session, tracks the changing hydration state of each tree, and responds to both user activity and weather conditions.

Motivating the residents to participate

The app needed functions to motivate residents’ participation. We needed to design gamification features such as badges, points, leaderboards, and weekly challenges to sustain engagement.

Short time frame with a volunteer group

We had 1–1.5 months to research, design, and deliver an integrated MVP as a volunteer team of six with a hard campaign launch deadline.

02. Key design decisions

Organising the map: layers, filters, and a FAB menu

The tree watering feature needed its own space on the map, adding it directly to Beeco’s existing 50+ category system would have buried it. Since Beeco was also developing a new calendar function at the time, we took this as an opportunity to create a broader approach: separating the app’s growing set of features into distinct layers, sitting above the existing filter system.

Hege, Beeco’s founder, proposed a dedicated layer button to replace the existing filter button. I proposed consolidating the three existing floating buttons – location, add a POI, and info – into a single expandable FAB (floating action button) menu.

The filters were preserved within the FAB menu, since the map contains a large number of POI categories. The layers separate the app’s major features, while filters allow users to narrow down what they see within each layer.

User-friendly icon design

I designed the tree icons. To inform the process, I conducted a focused competitor analysis looking specifically at how other apps represent trees on a map. Here are some of the conclusions:

BP Fatár uses infinitely scalable icons with different tree pictograms and latin labels.; NyC Tree Map uses crowded icons for the trees, which makes it hard to select them individually on desktop.; Leipzig Giesst & Giess den Kiez both use hover on desktop for differentation, the latter highlights the focused tree with a blue outline.

BP Fatár uses icons with different tree pictograms and latin labels. The three international apps relied solely on colour-differentiated dots, but with low contrast ratios that made them difficult to read.

None of these felt like a fully accessible solution. I designed a set of tree icons that decrease in form – from a full canopy to a bare trunk – enclosed in a circle, paired with three higher-contrast colours. The progressive visual change addresses colourblindness by adding shape as a second differentiator alongside colour. For overlapping trees, we chose infinite scalability and an enlarged icon for the focused state.

Mapping the user flow

Working from the team meetings and the app screens we designed, I mapped out the detailed user flow for the new feature. Shown here is an overview of the main functions, with two key paths detailed further below.

More is comming soon...