Recarbon — “Adapt to challenges, and make it a habbit” — UI/UX Final project With Greatedu

This project is part of the @GreatEdu final project of UI/UX Bootcamp

✋Introduction🤚

Hello guys, Let me introduce myself, my name is Randy Agung Anantha, I am a 5th semester student majoring in Public Administration at Universitas Negeri Surabaya. Here I will share the results of the final project with Greatedu in the UI/UX Bootcamp.

📃Project Overview📃

In this final project, my team develop an application design with an environmental theme, the application is called “Recarbon”. In short, Recarbon is an application that offers features for calculating carbon emissions starting from transportation use, electricity use, and the amount of waste produced. In this final project, I have a role as a UI designer who is tasked with creating a user interface starting from the sketch stage to making a prototype

👊Our Team👊

In this final project, I was not alone, there were my friends who helped me complete this project, let me introduce them

1. Esti Mara Qanita as project leader

2. Kartika Caka Ayuning Dyaloka as UX Researcher

3. Randy Agung Anantha (me) as UI Designer

4. Fauziah Ihsan UI Designer

5. Armando Suramana Sitepu as UX Writer

❗Problem statement❗

The problem we raise is regarding carbon emissions. Carbon emissions are caused by excessive use of fossil fuels such as coal and petroleum to meet the daily needs of human life. This can make air quality worse, for example Jakarta is the city with the 3rd worst air quality in the world based on humas.polri.go.id, the air quality index in Jakarta reaches 165 which according to the Air Quality Index (AQI) This figure shows that it is in the unhealthy category

Apart from that, various countries in the world, including Indonesia, are trying to reduce carbon emissions and keep the earth’s temperature from increasing from 1.5 degrees Celsius. If there is an increase above this limit, it will cause natural damage more quickly

🎯Project Goals

Make a habit to protecting the environment by taking action to reduce carbon emissions with fun way

📝Research📝

At the research stage, we first collected data related to the problem of carbon emissions, after that we decided to explore data related to public awareness regarding carbon emissions by filling in a questionnaire. and based on the quantitative research we conducted, it was found that 30 out of 34 respondents were interested in helping reduce carbon emissions. Apart from that, we also conducted user interviews with 5 respondents as a further data collection step

Affinity diagram and User Persona

In the affinity diagram process, we found 2 main problems experienced by users. The problem is that users do not know how much carbon emissions they produce and high mobility makes it difficult for them to take action to reduce carbon emissions, and from 5 respondents we obtained from user interviews, we summarized them into 2 user personas based on the same habits, challenges and goals. both users have similarities in awareness of the importance of acting for the environment, and visible differences.

User Journey map

Next, we make user journey map based on the user persona. we determine the actions taken by the user, pain points (constraints) that may be encountered, considerations (the user understands what is needed to overcome the obstacles), opportunities (how to optimize the user experience)

How Might We

In the end we arrived at the stage of how we might do it by brainstorming with the team to find ideas that have low risk and high impact.

Solution page and Minimum Viable Products

Next, on the solution page, we provide several more specific solutions for developing applications. From the solution page that we have produced, 3 MVPs (minimum viable products) were born that we will create. This mvp is based on the framewrok the hook canvas which is on
The calculator feature becomes an internal trigger for users to need our application. The challenge feature is an action from the user and in the reward feature the user gets points as a variable reward and exchanges points for vouchers as a variable investment which can make users return to our application. The community feature is an external trigger that can make users enter our application by sharing posts on other social media.

🧩Design🧩

Sketching

This sketching was carried out by 2 people, so there are 2 sketch sources, this sketch contains a rough overview and ideas of the pages which will later be developed further, starting from the login page, homescreen, challenges, level system, etc. At this stage we collect various ideas which will later be filtered and selected several ideas that are possible to implement.

Low fidelity Wireframe

This is an implementation of the sketch we have created. starting from the login page, homescreen, challenges, carbon calculator, rewards, community page, and also the account page. We decided to choose the challenge page as one of the features that will later be in our application.

Design System

we also started to create a design system by determining several things such as the type of font and also our branding color, for the font we chose the poppins font, the reason is because the poppins font is easy to read, simple, and there are also variants of the font such as bold, regular, light which is in accordance with our needs.

Next we determine our branding color, where we choose blue as the main color in our project, blue tends to give a feeling of calm, comfort and freshness so it is suitable for our future applications which are still related to the environment. for icon resources we use iconpark solid as the main resource. Next, we created a design system that includes several components such as a collection of icons, buttons, status bars, cards, and loading animations. For buttons, we made several variants such as default, disable, and danger. Next, for cards, we made several cards according to our needs, for example we made fuel type cards with several variants, then we also made status bars with several variants also depending on the user’s conditions. And also motion design such as loading animation.

UX Writter

The voice and tone we use isFriendly, Casual, Emphatic, Straight Point. We chose this language style as voice and tone because we wanted to achieve a friendly, relaxed feel to make the design feel more intimate and invite positive interaction from users.

High Fidelity Wireframe & Prototype

Next, we creating a high-fidelity wireframe and prototype, where we start by creating splash art, on boarding, login page, home screen, etc.

Prototype