Social impact

WeTree

Save A Tree

An iOS concept that turns an everyday green choice into something you can actually see. Photograph what you reused, tag it, and watch it become a leaf, a badge and eventually a tree.

Role UX & Visual Designer
Team Team of three
Platform iOS mobile app
User research Survey design Competitive analysis Journey mapping Wireframing Visual design Logo & icon design iOS UI kit Pixate prototyping Usability testing
A misty green forest path with a white iPhone in the foreground showing the WeTree splash screen: a white tree mark on solid green with Sign Up and Login buttons
130,000 square kilometres of forest cut down or burned, every year, worldwide.

Three times the area of Denmark. A football field every 1.4 seconds. The equivalent of a hundred large harvesters running without stopping.

Deforestation is not an abstraction and it is not slowing down. But the fix handed to a person is always the same shapeless instruction: do better.

So we started from the three things that actually work, and asked which one a phone could carry.

  1. 01

    Save a tree where you live

    Learn what affects trees, protect the ones nearby, turn up on planting days.

  2. 02

    Change consumption habits

    Reduce, reuse, recycle. The one that happens dozens of times a week, in a shop, in a kitchen, at a drive thru.

    Where WeTree lives
  3. 03

    Defend the forests left

    Share the love for trees, donate, join the groups already fighting for them.

Research

People were already doing it

A literature review, a survey of 30 people, interviews and a competitive analysis. Then one pair of numbers reframed the entire brief.

90%+ were already taking action to reduce their use of paper
67% said they cared about environmental issues, most of them adding that they did not feel they did enough
0 had ever seen an environmental app, out of the 29 who answered the question

More people were doing the work than said they cared about it. The behaviour was running ahead of the identity: unassisted, unprompted and completely uncounted. That gap, not apathy, was the thing worth designing for.

The third number decided the project. Not one of them had ever seen an environmental app, and when asked if one would help, half said they might try it while only one in six said yes outright: mild curiosity, not demand.

Do you use apps to log activities?
  • Yes66.67%
  • No33.33%
Would an app help you save trees?
  • I might try it50.00%
  • No33.33%
  • Yes16.67%

Two thirds already logged their lives in apps. Only one in six said yes outright to this one.

What people actually did

We asked which specific actions people took, and the ranking was unambiguous.

Which actions do you take?

  • Use email rather than printing 86.67%
  • Reuse paper 70.00%
  • Bring my own cup for coffee 63.33%
  • Bring my own bag for groceries 56.67%
  • Read eBooks instead of paper 53.33%
  • Use cloth napkins 33.33%
  • Plant a tree 13.33%
  • Donate to non profits 3.33%

Survey of 30.

Note what sits at the bottom of that chart: planting a tree, 13%, donating, 3%. The grand gestures were the rarest and the small repeated ones were nearly universal, which is why the app opens on a camera, not a donation button.

What the interviews added

01

“Together, we can speak up.”

Collective voice felt more powerful than solo effort. Acting alone felt pointless.

02

“I want to see what it did.”

People wanted a reaction to an action, physical, visual or emotional. Instant feedback was the key, not a statistic at the end of the year.

03

“I already do this.”

The habits existed. No technology supported them, counted them or noticed them.

This was never a behaviour change problem: the behaviour was already there, invisible, unrewarded and completely private.

The competitors agreed with us, by failing

We split the field into direct competitors, who reward you for cutting paper use, and indirect ones working the same trick on plastic or aluminium. Two direct competitors mattered, and both failed the same way.

PaperKarma

Photograph the junk mail you do not want and it contacts the sender to get you off the list.

“Users are not happy when they don’t feel the effect.”

Ecosia

A search engine giving at least 80% of its ad profits to a tree planting programme in Burkina Faso.

“Doesn’t provide a link to the planted trees. Users like to see the trees.”

One photographs paper, the other plants real trees, and both lose people at the same moment: the point where you should have been able to see what you did.

Three independent sources, the survey, the interviews and the competition, pointing at one hole. So the hole became the product.

How might we make an everyday green choice visible enough to be worth repeating?

Objectives

  1. Raise awareness and actively encourage reduce, reuse and recycle.
  2. Empower people to act and track it, so effort accumulates instead of evaporating.
  3. Let an action travel through social media, further than the person who took it.
Journey map

Where the choice already happens

Before designing a screen, we followed a single errand run end to end, from the fridge to the front door and back, hunting for the moments where a green choice was already sitting on the table.

  1. 01

    Leaving home

    Check the fridge, write the list, grab the weekend purse and the keys.

    Nudge from GPS or a calendar appointment

  2. 02

    Getting coffee

    Drive thru on the way, order, pay at the window with the Starbucks app.

    Log opportunity triggered by another app

  3. 03

    The supermarket

    Produce aisle, meat counter, the rest of the list, then the cashier.

    Log opportunity at the point of choice

  4. 04

    Getting lunch

    One more drive thru, food to go, back in the car.

    Log prompt riding on a social check in

  5. 05

    Back home

    Unpack, deal with the bags, eat, take the trash out.

    The moment the day is finally countable

The hand styled WeTree user journey map: a trail of footprints connecting five stages, leaving home, going to get coffee, going to the supermarket, getting lunch and getting back home, each with a bracket of steps, yellow reduce reuse recycle sticky notes and blue touchpoint markers
Five stages, a footprint trail between them, and a yellow sticky wherever a reduce, reuse or recycle moment was already happening.

The touchpoints all landed in the same place: next to something the person was already doing, a calendar appointment, a payment in the Starbucks app, a check in at lunch. WeTree never asks for a new habit, it waits at the edge of an old one.

Craft

It started on paper

Every screen in this project began as a pencil sketch, argued over and redrawn until the three of us agreed before anything got coloured in.

Two hand drawn pencil wireframe sketches: a Newsfeed screen with a post, comment and share row above a Home, Contacts and Challenges tab bar, and a second sketch working out the badge and Donate elements with handwritten annotations
The first pass. Tab bar, post, badge, donate: the architecture was settled in pencil.

Sketching first is not nostalgia, it is throughput. Bad ideas die in seconds on paper and take a week to die in a prototype.

Look closely at the second sketch, under the avatar: trees saved, badges won, amount donated. Running totals, drawn on day one, before a single pixel existed. They did not survive into the prototype, and months later, testing asked for them back.

The core loop

Shoot it, sort it, share it

The whole product is one small ritual, repeated. Point the camera at the thing you just did right, and the app does the rest.

The WeTree camera capture screen: a hand holding a reused paper receipt, with a circular dial around the orange shutter button offering reduce, reuse and recycle icons
The shutter dial: classify while you frame.

The ring around the shutter puts reduce, reuse and recycle on the capture screen itself, so you classify the act while you are still framing it. That single decision means every post arrives as data instead of a caption someone has to interpret later: a photo of a receipt becomes a reuse, countable, badge eligible, and taggable to a challenge.

  1. Capture
  2. Classify
  3. Caption
  4. Share
  5. Earn
Two WeTree Post screens: the photographed receipt with a reuse tag, an empty caption field with Tag People and Add Share Location rows and a grid of Instagram, Pinterest, Twitter, Facebook, Tumblr and E-mail targets, then the same screen filled in with a caption, four tagged friends and a location
Caption, tag the people who were there, drop a location, then pick where it goes. The green act leaves the app on purpose.

Sharing outward was the point, not a growth tactic: the research said collective voice was what made people feel effective.

Social layer

A feed of small, provable good

Three WeTree screens: the Newsfeed with posts from Ari Watson and Austin Roy including photos, likes, comments and shares, the Explore History tab listing past posts, and the Explore Search tab with the query Star returning Starbucks, Starwars badge, Start a tree challenge and Start volunteering
Newsfeed, history and search. Three views of the same idea: proof, kept.

Recent

Everything posted in the last 24 hours, tagged with the platform it went out on.

History

Your own back catalogue, the cheapest honest version of a visible outcome.

Search

One field across people, posts and challenges.

My favourite accident: typing “Star” returns “Starbucks” and “Start a tree challenge” in the same list, so a search for a coffee brand can end in a commitment.

Motivation

A badge is a dare, not a trophy

Badges are emblems for finishing a challenge. The rule I set was that every badge has to be tied to a task that pulls somebody else in, so the reward always points outward.

Three WeTree screens: the My Tree Challenge intro with a Start Now button, the Challenges list showing an active My Tree Challenge with 21 people joined plus Save Arizona, Plant a tree and Go Green, and the Badges grid of earned and locked tree emblems
Join one, or write one. Active challenges sit above a library anyone can start from.
My Tree Challenge Save Arizona Plant a tree! Go Green! Reduce, Reuse, Recycle

Challenges are deliberately uneven in scope: “Reduce, Reuse, Recycle” is a Tuesday, “Save Arizona” is a campaign, and a person can start wherever they are.

5 journey stages mapped
5 challenge types designed
6 achievement badges illustrated
24 interface icons drawn
The pitch

Two minutes to sell a habit

An app that asks you to photograph your rubbish has some explaining to do before it can ask for anything else. So we made the advertisement too.

The WeTree advertisement.

The spot argues the product in the same order it argues itself: the problem is enormous, your part is tiny, and tiny is fine as long as it is visible. Motion also shows the shutter dial actually being used, which testing would later ask for inside the app too.

Onboarding

Get in and get on with it

The WeTree sign up flow across three screens: an empty form with Full Name, E-mail, Password and Confirm Password above Sign Up With Facebook and Sign Up With Google buttons, the same form with the keyboard open, and the completed form
Four fields, or one tap through an account you already have.

Social sign up sits above the form because the accounts WeTree wants to post to are the same ones it wants you to sign in with.

Usability testing

Three verdicts, in their words

We ran the prototype as a moderated, task by task walkthrough and sorted every response onto a three point impact scale: what follows is theirs, not ours.

Very positive
  • UIVery easy and intuitive. Icons are very clear and intuitive. Easy to understand.
  • The shutter dialWhen I click the camera, 3 icons popped up. I liked the effects to be able to select one of the 3 icons I have seen before in the newsfeed. I like how I am coming across something familiar again.
  • Final impactWill consider using it because it keeps it simple and it feels as a game.
  • Social mediaThe integration is very encouraging: it makes you excited and ready to share with others. The challenges with friends is a great idea to keep each other encouraged.
  • BadgesI feel happy and motivated after seeing this badge. I feel like posting more images suddenly and maybe I will win more badges.
Good as a prototype
  • DesignI wish the colors of the icons on top of the images were a little more prominent since they are barely visible on certain images.
  • The shutter dialI would have liked if there was a way for me to change the R after selecting it if I made a mistake.
  • Badge gridI am not sure whether the grey icons are inactive icons or whether they are active badges with information yet to be added. I feel it looks like an empty space.
  • ChallengesI am not sure what awards I will win. I am not sure whether I get to play alone or with other people. I am hoping not everyone wins the award.
  • ProgressIt would be helpful to show a percentage for the progress or add a timeline close to it.
Needs more work
  • OnboardingCurrent prototype is missing a tutorial so the camera actions are not clear for the user.
  • EngagementI wish there was a video or something interactive on this screen to make it more interesting.

The shutter dial shows up in both of the first two columns: praised for feeling familiar, then faulted because a mis tap could not be undone. That is the single most concrete bug testing produced.

Everything else is one complaint in different words: the app was excellent at a single moment and silent about the arc, no progress percentage, no visible payout, no tutorial. Which sends you straight back to that pencil sketch: its running totals were the answer, dropped somewhere between paper and prototype, and testing simply asked for them back.

Identity

A tree that spells its own name

The mark did not start on a moodboard. We had asked the survey to describe the icon it wanted, and thirty people answered in their own words.

  • A large oak tree with many branches and deep roots.”

  • Small seed turning into a tree.”

  • Hand holding tree.”

  • Tree made of cups, straws, paper sheets.”

  • A tree in a trash can.”

  • A tree smiling.”

  • Image of a green leaf.”

  • A heart on a tree.”

Read them together and they split cleanly in two: half describe a tree that is growing, half describe a tree being rescued. We took the first half. Rescue imagery makes the user a bystander watching a disaster, and the research said these people were already participants.

The WeTree logo: the wordmark WeTree in heavy black type, where the letter r is replaced by a green tree with a three pronged canopy on a brown trunk, with a dark green leaf tucked into its right side

The final lockup does the one thing a wordmark and a symbol usually refuse to do: it fuses them. The tree is the r in Tree. Take the mark away and the name stops working.

The canopy splits into three prongs, one for each R, with a darker leaf tucked in to carry the we.

“Logo looks like tree. The symbol We can be seen from far, which makes it easy to find.”First reaction in testing, before the app was even opened

Three grey logo construction diagrams: the tree mark with alignment crosshairs, the mark set against the WE Tree wordmark on a baseline grid, and a trident form annotated PD equals 2
Construction: alignment, density and thirds, checked before any colour went near it.

Alignment

Every element sits on a shared line, so the wordmark and the mark read as one object.

Propositional density

The design carries more deep propositions than surface ones. The ratio is 2: each visible shape is doing two jobs.

Rule of thirds

The canopy, the sapling and the trunk divide the lockup into thirds, which is what keeps it stable when it shrinks.

The WeTree app icon: a bright green trident shaped canopy on a brown trunk, with a dark green leaf mark tucked into the lower right
The mark redrawn for a 60px tile, where two circles stop reading and a bolder glyph has to take over.
Design system

The iOS kit

One palette, one icon family, one badge language, drawn so the app could grow without me redrawing it.

The WeTree colour palette: a top row running from marigold through orange and red into five greens, and a bottom row of teal, slate and greys down to black and white
Greens carry the product. The warm half is reserved for reward moments, buttons and badges.
Survey answers to which colours people associate with a tree saving app, sized by how often each was named: Green largest, then Brown, then Yellow, with Blue smallest
Colours people named, sized by frequency.

The palette was not a taste decision: the survey asked what colours people associated with an app for saving trees, and the answers stacked up in one order, green by a mile, then brown, then yellow, with blue a distant last.

So the kit runs green, brown and a warm orange, in the proportion people described. Green holds the chrome, nav bars, splash, the mark, while orange is reserved for anything that wants a tap: the shutter, Share, Start Now.

The WeTree icon library: two rows of black outline icons including home, history, explore, camera, badge, profile, recycle, tree, share and settings, shown again in orange inside a dark rounded toolbar
The same set drawn once, then tested reversed inside the dark toolbar.
Six circular WeTree achievement badges illustrating a tree, a radar, a sapling, a palm, an olive branch and a leaf in a jar
Six badges, one circle, escalating from a single leaf to a full canopy.

The badges climb on purpose. A leaf, then a sapling, then a canopy: the visual language does the counting so a number never has to.

Last pass

The drawer that closes the loop

A forest photograph with a phone showing the WeTree profile slide out menu: the WE Tree logo, an avatar, the name Lochana Chooramun, and rows for Donate, Settings, Rate Us, Share and Sign Out
The profile drawer, added last, with Donate sitting first in the list.

The last thing I added was a slide out profile, and the order of that list is the only opinionated thing in it. Donate sits first. Everything else in WeTree converts attention into a post, this is the one place it can convert into a tree.

Outcome

Make the invisible countable

The WeTree badge screen: a freshly unlocked 3Rs badge with a red notification counter

WeTree took a private, unnoticed habit and gave it a shutter button, a tag, a feed and a badge. Every screen exists to turn one small act into evidence.

The bar for success was deliberately low: if the app was useful, fun, and got somebody to take one more action than they already were, it worked.

What I owned

This was a team project. What follows is what I owned end to end.

  • Wrote and ran the user survey, and synthesised it into three insights and three objectives
  • Built the user journey map and located the touchpoints the product hangs off
  • Designed the full iOS flow: capture, post, newsfeed, explore, challenges, badges, signup and profile
  • Designed the WeTree logo, the app icon and the construction rationale behind both
  • Drew the iOS kit: colour palette, icon family and the six achievement badges
  • Ran usability testing and turned the findings into a prioritised improvement list

Key takeaways

  • Design for the habit that exists. The strongest research finding was that nobody needed convincing, they needed noticing.
  • Classify at capture. Putting reduce, reuse and recycle on the shutter turned a photo into data with zero extra effort.
  • Reward outward. Tying every badge to a challenge someone else can join stopped the gamification from being about the individual.

Deliverables: user survey · competitive analysis · journey map · pencil wireframes · high fidelity iOS screens · Pixate prototype · logo & app icon · colour and icon kit · usability test findings · advertisement

Next project

Mastercard
BrandEnterprise

Mastercard

A ten screen lobby wall where the brand mark opens into the content, then closes back into itself.