Track your carbon footprint in real time
Toohla is a climate impact app helping individuals access and track their carbon footprint. In order to expand their presence in the environmental startup space they reached out to Catalog for guidance on structuring their app and differentiating their brand from the competition.
Client:
Toohla
Deliverable:
Mobile app
Role:
Product designer
Tools:
Figma
Industry:
Climate impact
T H E C H A L L E N G E
Tracking your CO2 emissions from your phone
Toohla faced the complex challenge of introducing environmentally-conscious users of figuring our accurate data of their footprint. In addition, being all to connect with friends and family helps encourage long-term engagement.
T H E C H A L L E N G E
How can we scale our engagement through our app?
Toohla stakeholders asked how we could structure the complex information that creates their personalized carbon scores into something anyone could consume and understand. In addition to structuring the metrics that form their comprehensive environmental impact assessment, they needed an attractive and welcoming brand to package their data and education platform.
B U S I N E S S G O A L S
Using data to create change
M A R K E T R E S E A R C H
Competitor analysis
T H E C H A L L E N G E
Mid-fidelity wireframes
I started with mid-fidelity screens to help Toohla figure out the best hierarchy for organizing their features. In addition, Toohla's app would be data-driven, meaning they would need to find a way to display complex information in an interesting, easy-to-digest way. As you will see in subsequent sections, these wireframes would change to better fit their goals.
T H E C H A L L E N G E
Initital user interviews
As a small start-up, Toohla emphasized their knowledge base for this first pass at building their 1.0 app. Key needs and priorities identified include:
📣
Impact Awareness
Toohla brings valuable and informative climate metrics to their users. Structuring these metrics and how they are calculated is the foundation of how the app works.
💎
Alluring Design
Environmental causes benefit from nature inspired design. Toohla is seeking a suitable redesign of their app to leverage this association.
🌎
Community
Toohla’s biggest contribution is access to a climate-conscious community which needs to be advertised and emphasized through their app.
🌳
Positive Mindset
Environmental causes want to emphasize optimism to drive positive change. This was an important consideration for Toohla’s design philosophy.
T H E C H A L L E N G E
Role and impact
Toohla’s app is intended to help structure the important process of accounting for an individuals’ climate impact. Toohla sought to achieve all this while driving engagement with users from all walks of life. To do this, I started this project by focusing on the most important user flows in the app.
1.
Collecting user consumption and habits.
2.
Calculating their impact and presenting it.
3.
Providing tools and a community to address it.
T H E C H A L L E N G E
Homepage page
Following a successful onboarding of the user, they can now explore the platform. This requires easy navigation and alluring clusters of information to keep the user engaged and excited to learn about their role in climate change mitigation. Here I considered how best to help users keep up their momentum. I utilized achievement badges, a visual metaphor for growth in the form of a blossoming tree, a points system, and progress lines. Paired with statistics, Toohla would gameify the CO2 tracking process.
T H E C H A L L E N G E
Impact page
Beyond the surface level summaries of carbon footprint, Toohla wanted options to structure data long-term for users. Here I demonstrated a variety of data visualization options within the brand identity I created for Toohla. Bright colors and easy to understand linear graphs show progress towards climate goals. Comparative impact assessments on a world map that connect back to articles and the community pages on the app inspire further learning opportunities for users.
T H E C H A L L E N G E
Community
Toohla wanted to foster a community for users to discuss their impact and encourage others with their own actions on the app. They felt this would align them better with competitors and more effectively help orient users on their services. Here I utilize a leaderboard to add a competitive edge that pushes for more vigorous change. In addition, seeing your community’s activities and cheering them help increase user engagement on the app.
T H E C H A L L E N G E
Blog pages
Keeping users informed is an integral part of Toohla's mission. In building out the blog pages, it was important to make engaging yet informational layout inspired by news app design.
T H E C H A L L E N G E
Illustrations and icons
To make the process of co2 tracking fun and interactive, I created custom tree illustrations. Like apps like Finch, these illustrations slowly show the progression of growing your tree, keeping users excited and continuously engaged. In addition, we have a custom icon library that is used in badges and titles to add visual interest, clarity, and variety.
T H E C H A L L E N G E
Accessibility
To ensure accessibility guidelines were met, color choices were checked with an online color contrast checker. Below you can see how the home screen's color contrast passes AAA (enhanced contrast) standards.
T H E C H A L L E N G E
User research & clickmap
After creating the MVP mobile app, I tested it with a selection of users from a user testing website. Focusing mostly on click maps and interviews, we were able to identify issues around lack of clarity for users around clickable components. Based on this feedback we implemented minor but effective changes such as removing drop shadows and changing card colors to make unclickable sections look less like buttons.
T H E C H A L L E N G E
Finishing touches
In addition to providing usable prototypes, wireframes were labeled and notes attached for clarity around focused/normal/error states. Assets such as icons and illustrations were provided in a separate .zip file.
I N S I G H T S
Project limitations
At the start of this product creation and development, Toohla was very interested in creating a Carbon Marketplace, where users could invest in eco-minded and carbon-capturing initiatives to offset their impact. However, with further research and discourse on the issue, Toohla decided that it might not be the right time to implement as there are some concerns about carbon-offsetting and how it allows users to "buy their way out of their emissions."
C O N C L U S I O N
Cultivating an eco-platform
Toohla’s founder designed his company using his data science and climate tech background to take the complex math and data of carbon footprints and fit it to the individual. Having successfully done that, Toohla was looking for the know-how to convert pure data into something approachable. With our design concepts in hand, Toohla was empowered to begin creating the beta version of their app to begin attracting the needed seed-funding to make their full platform a reality.
