"Hey Wade, our Carbon Tracking section needs a complete experiential and visual overhaul!"
"Hey Wade, our Carbon Tracking section needs a complete experiential and visual overhaul!"
ABOUT THE PROJECT
Tanbii
Tanbii
Tanbii is a sustainability focused mobile game in which the user collects resources, expands their land, battles enemies and helps the world. One of the largest focuses for the company was getting the user to do real-world sustainable actions and translating them into in-game rewards.
During my internship, I was responsible for an overhaul of their "Carbon Tracking" section, especially the Dashboard area. This is where users could turn their actions into real rewards and check their progress. Tanbii was having trouble drawing users to the section overall, and on top of that they wanted to update parts of their design system.
Tanbii is a sustainability focused mobile game in which the user collects resources, expands their land, battles enemies and helps the world. One of the largest focuses for the company was getting the user to do real-world sustainable actions and translating them into in-game rewards.
During my internship, I was responsible for an overhaul of their "Carbon Tracking" section, especially the Dashboard area. This is where users could turn their actions into real rewards and check their progress. Tanbii was having trouble drawing users to the section overall, and on top of that they wanted to update parts of their design system.
ROLE
UI/UX Design Intern
COMPANY
Tanbii
DATE
2024
01
The Problem
The Problem
Problem
Problem
The Carbon Tracking section, and especially the Dashboard needs help. Specifically, the section did not stand out enough and the user experience was clunky and unfinished.
The Carbon Tracking section, and especially the Dashboard needs help. Specifically, the section did not stand out enough and the user experience was clunky and unfinished.
Solution
Solution
Increase the visibility of the Carbon Tracking and Dashboard sections, add depth to the information and activities within the section, and visually update the look and feel of the section.
Increase the visibility of the Carbon Tracking and Dashboard sections, add depth to the information and activities within the section, and visually update the look and feel of the section.
02
Research
Research
Competitor Research Snippet
Products Researched:
Key Takeaways
Environmental impact should be clearly visible
Daily rewards are very encouraging to users
Too Much Information overwhelms the user
Key Takeaways
Carbon surveys show users their negative impact and motivate them
Connecting users with the app community and mission increases engagement
Not every carbon reduction action needs to be tangible
Empathizing With the User
As a new part of the company, creating a user persona and going through user journeys helped me to understand the target audience. Some of the key factors for designing the app would be:
Balance between a focus on sustainability and fun mobile game features
Show the user their impact and the app's impact on helping the environment
Motivate the user to interact with and understand their carbon footprint
Connect the Carbon Tracking aspect with the mobile game aspect
As a new part of the company, creating a user persona and going through user journeys helped me to understand the target audience. Some of the key factors for designing the app would be:
Balance between a focus on sustainability and fun mobile game features
Show the user their impact and the app's impact on helping the environment
Motivate the user to interact with and understand their carbon footprint
Connect the Carbon Tracking aspect with the mobile game aspect
As a new part of the company, creating a user persona and going through user journeys helped me to understand the target audience. Some of the key factors for designing the app would be:
Balance between a focus on sustainability and fun mobile game features
Show the user their impact and the app's impact on helping the environment
Motivate the user to interact with and understand their carbon footprint
Connect the Carbon Tracking aspect with the mobile game aspect
As a new part of the company, creating a user persona and going through user journeys helped me to understand the target audience. Some of the key factors for designing the app would be:
Balance between a focus on sustainability and fun mobile game features
Show the user their impact and the app's impact on helping the environment
Motivate the user to interact with and understand their carbon footprint
Connect the Carbon Tracking aspect with the mobile game aspect
03
Ideation
Ideation
Navigation & User Flows
3 Key Ideas
Increase the depth of the Carbon Tracking Section
Ensure intuitive navigation
Build off of existing Tanbii navigation and flows to ensure user familiarity with the product
3 Key Ideas
Increase the depth of the Carbon Tracking Section
Ensure intuitive navigation
Build off of existing Tanbii navigation and flows to ensure user familiarity with the product
3 Key Ideas
Increase the depth of the Carbon Tracking Section
Ensure intuitive navigation
Build off of existing Tanbii navigation and flows to ensure user familiarity with the product
3 Key Ideas
Increase the depth of the Carbon Tracking Section
Ensure intuitive navigation
Build off of existing Tanbii navigation and flows to ensure user familiarity with the product
System Updates
As my research revealed, a preliminary Carbon Survey along with greater emphasis on the user's carbon contribution would be essential additions to the new section. This is how the user's real world impact can be measured and used to increase their engagement with the game.
As my research revealed, a preliminary Carbon Survey along with greater emphasis on the user's carbon contribution would be essential additions to the new section. This is how the user's real world impact can be measured and used to increase their engagement with the game.
As my research revealed, a preliminary Carbon Survey along with greater emphasis on the user's carbon contribution would be essential additions to the new section. This is how the user's real world impact can be measured and used to increase their engagement with the game.
As my research revealed, a preliminary Carbon Survey along with greater emphasis on the user's carbon contribution would be essential additions to the new section. This is how the user's real world impact can be measured and used to increase their engagement with the game.
Wireframe Iterations
The wireframing portion of this project took quite a few iterations, both in lo-fi and mid-fi wireframes. The biggest discoveries from feedback and research in this section were:
Make the dashboard section prominent as the hub of Carbon Tracking
Use familiar elements from other sections to create unity.
Make the navigation clear and simple so the user knows where they are at all times.
Carbon information (user's current emissions & goal) should be visible to motivate the user to play.
The wireframing portion of this project took quite a few iterations, both in lo-fi and mid-fi wireframes. The biggest discoveries from feedback and research in this section were:
Make the dashboard section prominent as the hub of Carbon Tracking
Use familiar elements from other sections to create unity.
Make the navigation clear and simple so the user knows where they are at all times.
Carbon information (user's current emissions & goal) should be visible to motivate the user to play.
The wireframing portion of this project took quite a few iterations, both in lo-fi and mid-fi wireframes. The biggest discoveries from feedback and research in this section were:
Make the dashboard section prominent as the hub of Carbon Tracking
Use familiar elements from other sections to create unity.
Make the navigation clear and simple so the user knows where they are at all times.
Carbon information (user's current emissions & goal) should be visible to motivate the user to play.
The wireframing portion of this project took quite a few iterations, both in lo-fi and mid-fi wireframes. The biggest discoveries from feedback and research in this section were:
Make the dashboard section prominent as the hub of Carbon Tracking
Use familiar elements from other sections to create unity.
Make the navigation clear and simple so the user knows where they are at all times.
Carbon information (user's current emissions & goal) should be visible to motivate the user to play.
04
Final Outcomes
Final Outcomes
App Prototype Snippet
App User Interface
The final screens consist of:
Proposed screens & sections to add depth to the carbon tracking section
Improved Dashboard visibility
Updated navigation & clarity
New assets & components
With what I had learned from the previous stages, the final app interface was built. The Dashboard section on the menu was enlarged and now has high-contrast to make it stand out. The suggested Carbon Survey was designed to brand standards, utilizing the game's mascot. The remaining screens utilized the dashboard's signature blue and clear sectioning in order to keep the fun game style while still remaining usable.
The user's carbon saving contribution and current carbon output are also now more important to their overall profile. This encourages the user to interact with the dashboard section more, being able to view their progress toward their carbon saving goal and see activities that can help them reach it. A new sustainable movements section was added to automatically track the user's sustainable versus unsustainable movements and reward them based on their sustainable habits.
The final screens consist of:
Proposed screens & sections to add depth to the carbon tracking section
Improved Dashboard visibility
Updated navigation & clarity
New assets & components
With what I had learned from the previous stages, the final app interface was built. The Dashboard section on the menu was enlarged and now has high-contrast to make it stand out. The suggested Carbon Survey was designed to brand standards, utilizing the game's mascot. The remaining screens utilized the dashboard's signature blue and clear sectioning in order to keep the fun game style while still remaining usable.
The user's carbon saving contribution and current carbon output are also now more important to their overall profile. This encourages the user to interact with the dashboard section more, being able to view their progress toward their carbon saving goal and see activities that can help them reach it. A new sustainable movements section was added to automatically track the user's sustainable versus unsustainable movements and reward them based on their sustainable habits.
User Interface Assets
Snippet of assets made while at Tanbii:
Snippet of assets made while at Tanbii:
Snippet of assets made while at Tanbii:
Snippet of assets made while at Tanbii:
Figma Components
Snippet of fully editable figma components made for Tanbii Interfaces including buttons, text fields, and checkboxes.
Snippet of fully editable figma components made for Tanbii Interfaces including buttons, text fields, and checkboxes.
Snippet of fully editable figma components made for Tanbii Interfaces including buttons, text fields, and checkboxes.
Snippet of fully editable figma components made for Tanbii Interfaces including buttons, text fields, and checkboxes.