Tanbii

UX/UI Intern | May 2024 - September 2024

Tanbii is a mobile game that helps promote environmental sustainability by making it fun and rewarding. As an intern at Tanbii, I worked in a small team of 3. My team and I conducted product research on games similar to Tanbii and created design concepts for the game.

Visual Weather Designs

For one of my projects, I was tasked to conceptualize different weather scenes and how they would look on the game's overworld map.

Weather changes will randomly occur in-game and users will know what type of weather will appear from a little cutscene that will play in the beginning. All scenes will start off showing the sky and then zooming out to see the player (panda) reacting to it. Once that short cutscene plays out, the map will change.

Sunny

It's a sunny day and the panda gives a thumbs up to express that he likes a sunny day.

These are pretty much the default screens that the user sees. There's no visual changes, but it's clear that it's a sunny day.

Cloudy

The clouds start to show up in the sky and the panda looks up.

Cloud shadows show up on the overworld and slowly move across the map.

Rainy

Rain starts to pour and the panda doesn't have anything to cover him, so he uses his arms.

The map gets a little darker and rain drops down from the top of the screen. Puddles may appear on certain surface like the cement-covered area.

Snowy

Snow starts to appear and the panda creates a little snowman. The panda also has a scarf on, but the scarf is for the cutscene only.

Areas of the map are covered in snow and snow gently drops from the top of the screen. Little snow-related things like snowmen will appear.

Blizzard

The clouds get darker and the winds become more violent. It's getting really cold and the panda is shivering.

The map designs are similar to the snowy ones, but the screen is a bit darker and the snow will move across the screen at a fast pace to show strong winds.

Heatwave

The sky has an orange tint to show that it's extremely hot and the panda has a popsicle to help him cool down.

The map designs are similar to the sunny ones, but the screen has an orange overlay to it and there are wavy, orange lines to show the heat. These lines will face in and out.

Bug Encounters Visual Designs

The trees in Tanbii have very little interactivity with users. In the game, users could only just water trees and collect resources from them. My team and I were tasked to make tree gameplay more engaging, and we thought that the addition of bugs could do that.

Finding Bugs

At certain intervals in-game, a mystery bug icon will appear on a tree. A tree with this icon will indicate whether a tree has a good bug or a bad bug.

By interacting with the tree, players enter a little microgame in which users will use their finger to control a magnifying glass to inspect the tree for bugs.

Good Bugs

If players encounter a good bug, the good bug will benefit the tree and stay there for 1 day. Once players press "Confirm", they exit the screen and the good bug that was encountered will appear on the tree. There will be a time limit on the tree showing how long the bug will stay.

There will be a time limit on the tree showing how long the bug will stay and multiple good bugs of the same kind will crawl around the tree.

Bad Bugs

If players encounter a bad bug, it will reduce the tree’s health bar by 10% every 1 hour the player is in-game. Failing to exterminate bad bugs within a certain time limit will cause the tree to eventually die out. The time limit depends on the tree’s health. However, they have a chance to get rid of them with bug extermination methods.

Like good bugs, bad bugs will crawl around the tree. The difference is that the tree they're affecting takes damage and the tree's HP is reduced. The tree also has a more nasty-looking green.

Companion Visual Designs

Another gameplay idea that we thought would make trees more interactive is the introduction of companions. Companions are little creatures that reside in different types in trees. By feeding them, companions can accompany players and potentially assist them with certain tasks.

Taking a Companion

1. The player encounters a tree with a companion and interacts with it.

2. The player has the option to take the companion with them if they have the necessary materials

3. The player has acquired the companion.

Removing a Companion

1. The player has a companion with them that they want to remove.

2. The player has the option to remove their current companion without using any materials.

3. The companion has returned to its tree and won't accompany the player unless it is given the necessary materials again.

Swapping a Companion

1. The player wants to replace their current companion (squirrel) with a new one (woodpecker).

2. With the necessary materials, the player can swap companions.

3. A brief second image will show the player feeding the new companion.

4. The new companion (woodpecker) accompanies the player and the old companion (squirrel) goes back to its tree.

Ad Placement Visual Designs

Within Tanbii, there are multiple areas where players can watch an ad. My task was to conceptualize new ideas on where to place and design ads. The goal was to create seamless integration of ads that could enhance the user experience without being frustrating to deal with.

Design Requirements:

Seamless Integration: Ads should not interfere with the core gameplay.
Clear Communication: Inform players when they are about to see an ad, especially interstitial and rewarded video ads.
Reward Transparency: Clearly state the rewards for watching a rewarded video ad.
Skip Options: Allow users to skip interstitial ads after 5 seconds. Rewarded video ads should not be skippable but should be clearly marked as optional.

Banner Ads

Banner ads will be placed on screens that have little activity such as menu screens and areas where players can buy or sell items. Tapping on a banner ad will take players to the Google Play Store or Apple Store.

Community Tab

While a community tab doesn't exist in the game, my team and I thought that placing a banner ad here would be a welcome addition.

The community tab will have 4 sections:

All: shows all articles in the community tab in order of latest to oldest
Events: announces special in-game events
News: news related to Tanbii updates and their blog posts
Eco Tips: sharing ways to help the environment

There will also be a section at the bottom of the community tab that shows all of Tanbii's social media.

3D Printer Station Ad Designs

At the 3D Printer Station, players can use sticks as currency to get weapons. However, by placing an ad on this screen, players can roll weapons for free by watching an ad. Players can watch a total of 3 ads before the ad button disappears for the day.

Type of Ad: Video Ad

Occurrence: 3 times a day

Before Ad

After Ad

2 More Chances

Type of Ad: Interstitial Ad or Video Ad

Occurrence: Permanent

Before Ad

After Ad