The Story Behind the Application

CarbonF is a Carbon Footprint Calculator designed for those who still believe in the social good. The technology around is evolving with leaps and bounds. We are creating an environment full of Carbon Dioxide. It starts from our everyday wear to our smartphones, computers, office journey, and even creating and using AI software. It all has something to add to the Carbon footprint.

As a part of my UX designer journey course by Google, I created Carbon F as a Social Good application. The goal was simple; to cut off Carbon from everyday life and calculate the yearly carbon cut-off.

The idea is to calculate via various steps like your location, vehicle make, vehicle year and their number, number of electronics, number of times you go shopping, etc. We must compare units against worldwide standards. For example, a 2021 Mazda CX-5 to manufacture must emit XX Kg of Carbon, and if we drive the car for X KM’s and use specific gas, it will have its standard of miles per KG of Carbon emission from it in a year.

The Crazy Eights

Learn from your competition and visualize the features you want to bring to life. After you have a picture of the features you want for your application inside your brain, you can start drawing. The crazy-eight is the best you can do. Below is my drawing from the crazy eight ideas within a 60-second timer.

Hand-Drawn Wireframes for the application

When making CarbonF, I started to empathize, define, and ideate. I met with different people, created the user personas, created the problem and goal statement, did a competitive audit, and created user stories. Finally, I started to draw for the dedicated Mobile Application and a responsive website starting from the smallest screen (mobile) to the most giant screen (desktop).

Crazy Eight for Responsive Web And Hand Drawn Wireframes

It is essential that we cater to the people who use their computers for their day-to-day jobs. It may be more appealing as we can have continuity features on our web version. It is important to utilize the ample space in the most efficient way. A big cover picture for bringing attention to the featured news is one of the implementations.

#1 The CabonF Dedicated Mobile Mockup

In my latest work, I designed the CarbonF mockup from scratch. There were a few simple components like Onboarding and sign-up, to more complex functions like the Carbon Footprint Calculator. The basics were choosing the right components and matching the color schema throughout the design. I created my own Design system so that the components can be used over and are easy to connect.

A) The Simpler Elements

B) The More Complex Elements

#2 The CabonF Responsive Web Mockup

It sounds easy task. Thinking of the same design on a responsive web is hard. After too many Lo-Fi Wireframes, usability studies, Lo-Fi Prototypes, and a design system that I already have, I created the responsive web mockups. The approach was a progressive enhancement one. Here is the final Product.