Designing a way for BCC customers to plant real trees – directly from their banking app.
ESG Trees was a top-down, leadership-driven mandate – the first client-facing sustainability feature of its kind at BCC. It followed the bank's 2024 Development Strategy through 2030, which set formal climate and ESG goals; 2025–2026 marked the execution phase of that strategy, with leadership framing responsible business conduct as a genuine competitive differentiator for winning and retaining clients, not just a reporting obligation.
The initiative was formally scoped as a task in February 2026, owned by a business stakeholder separate from design, with the explicit goal of increasing engagement with the app's digital ecosystem and strengthening BCC's reputation. At the time the task was scoped, no success metrics had yet been defined.
This was a category-A task: a large-scale project built from scratch, with the full user journey in scope – not just the donation mechanic, but the surrounding experience end to end. Beyond the core flow, several additions were self-initiated during design, including a shareable digital certificate that let users publicly showcase their contribution – doubling as organic promotion for the feature itself.
The team included a product owner, analysts, developers, and QA, with design handled solo. Success metrics were not defined at the scoping stage and remain undefined: the feature has not yet shipped to production. It's planned for a phased rollout, starting with an internal release to bank employees before any broader launch.
The core adoption hypothesis centered on making the act of giving feel tangible and rewarding in the moment: donating would trigger a growing-tree animation, with users also able to see aggregated impact – a quarterly breakdown of total contribution by city – turning an abstract donation into something visible and collective.
Using cashback specifically, rather than requiring users to pull from their own balance, was a deliberate choice: cashback functions as "found money" rather than earned income, which was expected to lower the psychological resistance to giving compared to donating directly from a paycheck.
To address the inherent trust gap created by the planting delay (funds accumulate before trees are actually planted), the plan was to include real photos in reporting – giving users tangible proof the trees existed, rather than asking them to trust the mechanism on faith alone.
The shareable certificate feature was designed around a dual hypothesis: that public recognition would motivate continued participation, and that the act of sharing would organically market the feature to the sharer's network at no additional cost. More broadly, embedding this inside the banking app rather than a standalone tool aligned with BCC's wider strategic positioning as an environmentally responsible institution.
The donation flow – pick an amount, choose a city, and plant a tree.
The tree levels up as contributions grow – each stage unlocks a fuller canopy.
ESG Trees has two entry points – through Payments and through the Cashback page – so users can act on impulse, without stepping away from the moment they'd already be checking their balance or completing a transaction. The Homepage was explicitly ruled out as an entry point: nearly every team wants homepage placement, and adding one more competing element would have undermined the focused IA work already done there.
First-time users are shown a one-time explainer (Stories format) before reaching the core experience. From there, a Home widget displays progress toward the next completed batch of trees, stepping through visual states as funding accumulates. Tapping into it opens a separate Report view – shown with real photos once trees are confirmed planted, or a "not yet planted" state if funding hasn't converted into trees yet.
The donation flow itself is a distinct path: users select which of the two supported cities their contribution goes toward, enter an amount, and confirm – leading to a success state and, from there, the shareable certificate. Impact reporting was scoped at the quarterly level rather than real-time, since only two cities were involved at this stage – a finer-grained view wouldn't have had enough data to be meaningful yet.
Before designing individual screens, the full user path was mapped end to end – from both entry points, through onboarding, the donation flow (including a previously-overlooked account-selection step alongside city selection), success and error states, and into the certificate and reporting views. Mapping it out surfaced the need for explicit error handling at multiple points in the payment flow, including a direct path to support if a payment failed – and clarified that reporting needed to function as its own destination rather than a step chained after donation, since a user should be able to check on tree-planting progress at any time, not only right after contributing.
Full flow diagram covering both entry points (Payments, Cashback), first-time onboarding, the donation flow (city and account selection, amount entry, confirmation, and error/support states), the shareable certificate, and the independent tree-growth and reporting views.
Visual direction largely followed BCC's existing design system, with room to introduce local, custom-built components where the feature required it. The growing-tree illustration – the visual centerpiece of the donation moment – was generated using AI image tools rather than pulled from an existing illustration library, a deliberate, resourceful choice in how the visual asset was produced. It let the visual style be explored and validated quickly – without commissioning a dedicated 3D artist or illustrator, and without inflating the project’s budget.
The progress widget uses a donut chart rather than a linear progress bar, chosen specifically for stronger visual perception of progress toward the next completed tree. The report screen uses a custom photo grid layout, designed to present real planting photos in a way that feels tangible rather than like a generic gallery.
The shareable certificate was originated as an idea during this project, though its detailed visual design was handled outside this scope.
A closer look at the report screen – quarterly planting results, the photo gallery, and a shareable certificate.
ESG Trees has completed design review and been handed off to development, with implementation nearing completion. Rollout will begin internally, with bank employees as the first users, ahead of any broader release – timeline still to be determined. No usage metrics exist yet, since the feature hasn't launched.
This project was a different kind of design challenge than most – success here isn't measured by a conversion metric, but by trust and reputation, which are far harder to design for directly. That shaped how the work was approached: several additions, like the shareable certificate, were self-initiated rather than requested, because building genuine goodwill meant looking for moments to give more than what was strictly asked for.
To understand the experience from the donor's side, I personally researched and donated to a real tree-planting service – one based in India – routing the payment through two intermediaries myself, since the service only accepted Indian rupees. Going through that friction firsthand made the trust and transparency questions in this project feel less abstract, and more like something worth designing carefully for.