top of page
Creating Climate-Conscious Commuting
climatecruiser-Header.jpg
UX Case Study

App for Sustainable Mobility

Within my university studies, I was tasked with creating a mobile app aimed at enabling individuals to make a small contribution to combating the climate crisis. In Germany, for instance, individual carbon dioxide (CO2) emissions from transportation, account for the largest share of greenhouse gas emissions, comprising 20 % of the total. Consequently, developing an app aimed at reducing CO2 emissions becomes increasingly beneficial, as it empowers individuals to make incremental contributions towards mitigating climate change.

Role

UX Designer

Date

Jan 2023 – March 2023

Software

Figma

Adobe CC

DESIGN PROSESS

EMPHASIZE

DEFINE

IDEATE

PROTOTYPE

Emphasize & Define

In an analysis, general CO2 trackers were initially documented, which measure or track the footprint, and classified into four clusters: CO2 footprint, Challenges, Habit/Everyday Trackers, and Mobility (CO2 consumption). While there are many apps that calculate the CO2 footprint across all aspects of life, there are only a few focusing on the mobility sector. Subsequently, a competitor analysis was conducted within the Mobility cluster. Individual features and characteristics of apps in the Mobility category were identified and evaluated.

Competitor Analyses

My research revealed that there were a few competitors in the section of mobility, but a lot of them were poorly designed or had very basic functionallity. Here are some overall strengths and weaknesses findings:

Emphasize

Strengths

  • Many apps typically display an individual's total CO2 emissions rather than just within a specific category

  • In general, they encourage users to try new things and adapt habits to be more climate-friendly

  • Frequently app usage

  • Challenges make the app more approachable and enjoyable

Weaknesses

  • Data query often too limited and therefore too inaccurate for a real CO2 footprint

  • CO2 emission values are often not contextualized

  • CO2 values are not tangible enough for many users

  • Challenges may not fit the individual or they seem unrealistic (e.g., knitting or switching to an electric car).

  • Usage (daily input) could potentially become too time-consuming

  • Design is often not appealing

  • Function and purpose of the app are partially unclear

Problem statement

Data query is either very painful or insufficient, resulting in considerable inaccuracy. Users almost always need to create an account first to see if they even like the app. Often, users don't know what to do with the provided values after getting the results.

Solution

The climatecruiser user needs an app that clearly communicates the goal and looks appealing and professional in design. Data query should be as uncomplicated as possible and run in the background. The saved CO2 emissions should be contextualized to make the impact more conscious.

Define

Ideate

During the ideate phase of the process, creative ideas for the CO2 Mobility Tracker were gathered. These ideas were then visualized in a mind map. Various approaches and concepts for reducing CO2 emissions in mobility were explored, such as promoting alternative transportation methods, suggesting routes with lower CO2 emissions, or incentivizing eco-friendly driving practices. This process generated a range of innovative concepts, which were subsequently refined and evaluated to identify the most promising solutions for the CO2 Mobility Tracker.

Mindmap-CO2-MobilityTracker.png
Ideate

Unique selling points & core functions

1

Tracking and Integration with Apps and Partners

The ClimateCruiser app utilizes smartphone sensors, integrates with other apps like health or fitness trackers, collaborates with mapping services such as Google Maps, and public transportation apps to accurately track mobility-related data, enabling the calculation and visualization of real CO2 consumption in the mobility sector.

2

Making CO2 Consumption in Mobility Experiencable and Understandable

User data isn't just presented as CO2 values; it's contextualized with comparisons and familiar examples, helping users understanding the concept of anthropogenic climate change more easily. Additionally, a guide and community provide tips and tricks to encourage the user for more climate-conscious behavior.

3

Gamification for Sustainability in Everyday Life

One of the app's central gamification elements is Challenges, which, upon completion, reward users with Cruiser points, motivating them to reduce their CO2 footprint in a playful manner. With concrete goals in mind and comparisons within teams, among friends, colleagues, or nationwide, users are further incentivized to save climate-harming emissions.

Persona.jpg

User Flows &
Sitemap

Using the FigJam tool, user flows were created within a flowchart to gain a comprehensive understanding of the potential user paths and screens of the app. As an example, a user flow is illustrated below to visually demonstrate the process. The user flows evolved iteratively during the process, continuously adjusting in accordance with user feedback, insights gained, and changing project needs.

user_flow.png

Scribbles

Scribbles are used to quickly explore and iterate some ideas for the interface design and the structure without the constraints of digital tools. They allow for rapid ideation and communication of concepts, enabling to gather feedback.

Scribbles-Climatecruiser-1.jpg

Wireframes

Scribbles are used to quickly explore and iterate some ideas for the interface design and the structure without the constraints of digital tools. They allow for rapid ideation and communication of concepts, enabling to gather feedback.

Wireframes-Climatecruiser.png

Wireflow

Prototype

After testing of the wireframes, the design process started with creating mood boards to establish the desired look and feel, as well as crafting a style guide. Subsequently, an interactive prototype was developed to facilitate further user testing, refining the user experience and making final adjustments.

Climatecruiser-Design.jpg
Prototype
bottom of page