Tanbii App
Gamifying Sustainability to Reduce Carbon Footprints



OVERVIEW

Tanbii is a gamified sustainability app that encourages users to reduce their carbon footprint through engaging gameplay and tokenized rewards. The project focused on addressing usability challenges, including a crowded interface, disjointed features, and lengthy workflows. By redesigning the navigation and Energy Center, our team simplified user flows, integrated game play with carbon tracking, and improved engagement. Through user research, wireframing, and iterative testing, the project successfully enhanced usability and reduced user frustration.

       






Role

UI/UX Designer



Tools

Figma, Adobe XD,
Timeline
4 Weeks



Impact
23% increasw in usable mobile screen space
50% decrease in navigatoin complexity




THE PROCESSSTEP 1 - Porblem Prioritization





Previous Interface: 



A.
Our team mapped out the major UX issues and voted based on their impact and feasibility.





B.We also visualized the prioritization of the UX problems on a priority x feasibility graph.
User flow and navigation emerged as high-priority and high-feasibility areas, directly influencing related challenges such as carbon tracking, dashboard redesign, and leaderboard updates.







STEP 2- User Research



Our team sent out surveys to users to gather their input in order to improve the navigation design for the app.
We have them ranked the following aspects of the game in order of importance to them:

    A. Account Information
    B. Coins/Tokens
    C. Tasks
    D. Other Rewards (e.g., Iron, Water, Tree Branch)
    E. Messages from the Developers
    F. Level-Up Information (Progress Bar to Level Up)
    G. Settings

Survey results:  

Based on the survey results,
we sorted out the ranking of the importance of different aspect of the app for users. 
Therefore, items will be placed at different levels of interface hierarchy based on their rankings. 







STEP 3- Problem Analysis



A.Lengthy User Flow





 
B.
a. Overcrowded Interface

b. Carbon Tracking-the main feature is disassociated with the game.

c. The Menu page (on the right) often disoriented users and mismatches with the game interface. Redirecting buttons appeared to provide poor affordance for clicking.

             








STEP 4-Navigation Redesign



Three approachs  (Low Fidelity)

A.
Carbon tracking as a separate page.


B.
Carbon tracking as overlay.


C.
Carbon tracking integrated with other important tasks into ‘Menu’.






Our team then conducted usability testing on the three prototypes, and users find the third approach is most intuitive and efficient. 
Therefore we decided to pivot based on the third approach. 




STEP 5-Final Design



   



        -Video Prototypes




Chenmiao Shi
sylsylshi33@gmail.com