Back to Projects

Klovis

Klovis, a startup aiming at reducing the carbon footprint, reached out to our team to create a design for their application.
Data
10 May 2021
Client
Codeway Venture
Duration
3.5 month
Deliverables
iOS application
Duration
3.5 month
Technology Stack
#Swift #Java #ReactJS #Firebase #Plaid API #NodeJS #Stripe

About Project

About the Product

The app calculates your carbon footprint and converts it into a daily level of CO2 emissions. Users are given suggestions on how to reduce their carbon footprint by adjusting their transportation, recycling, eating, and shopping habits. Also, users can offset their carbon footprint by supporting various projects run by eco-friendly non-profit organizations.

Jonathan Stevenson
CEO, Klovis

Great team. They are conscientious, and it seems that they have no days off - it’s nice to work with people like that. They created a beautiful carbon-tracking application designed to foster responsibility. During the discussion, Tino Agency team determined the advantages of the product, listened to our wishes about the structure and design, and made their own amendments that positively affect the usability of the app. They create genuinely effective apps in a short amount of time.

01 Challenge & Goals

An important objective of the app was to connect people and non-profit organizations that support the environment. Most people don't have time to research projects that are currently implemented by non-profit organizations and don't know how to support them. Klovis does it for you! The app was designed not only to raise awareness among its users about the impact of their lifestyle choices on the envirоnment but also to serve as a bridge between the public and eco-friendly non-profit organizations.

02 Solutions & Result

We created an interactive and user-friendly design for an environmentally-conscious user who would like to determine their carbon footprint and take tangible action steps to offset it. The latter is achieved in two ways: by making adjustments in the user's day-to-day behavior and/or by contributing to various environmental projects by non-profit organizations. The social engagement component of the app allows users to stay engaged with their friends and with non-profit organizations.

Overview

Our team created an interactive design that walks the user through an intuitive questionnaire and tracks their current carbon footprint on a dashboard. My Projects section of the app includes actionable items where a user can offset their carbon footprint by financially supporting projects by non-profit organizations that grow trees and support the environment.

Overview

Klovis provides users with simple data visualization tools to track their carbon footprint over time and relative to their friends. Once they know where they stand, they can either reduce or offset their carbon footprint by changing their habits or by supporting environmental causes.

Grow

In the Grow section of the app, users can donate money to an environmental cause of their choice and earn points to offset their carbon footprint. Klovis transfers the funds to support various projects run by non-profit organizations that grow trees and support the environment. Under "My Projects" tab, users can track how many projects they supported and find out more information about their causes.

Dashboard

The Dashboard tracks your CO2 footprint and the number of points you accumulated by supporting projects. Users get encouragement when their carbon footprint is lower than the average in their area.

Report

In the Report section, users can see a visual snapshot of all important factors that are contributing to their current carbon footprint. They can see which of their habits are contributing to it the most today, how the contribution of each factor today compares to its yesterday's levels, and compare their performance to their friends' average. Each of these numbers is highlighted using a different color for convenience.

Social

The Social component of the app displays stories posted by the participating non-profit organization, newly added projects that users can participate in, as well as friends' activity updates if they are set public.

Design Process

01 Research

Our team started the project by carefully researching three different dimensions - intuitive questionnaire design, effective data visualization, and eco-friendly branding elements.

02 Sitemap

We created a sitemap that mapped out every possible user journey, which streamlined the process of wireframe design.

03 UX Wireframes

The next step involved producing black-and-white wireframes that showed the relative location of every element on each screen. This allowed our team to conduct effective usability testing and create the final clickable prototype, which the client's development team could immediately start implementing.

Creating a comprehensive prototype helped our team to go through every step on a typical user journey from signing up for an account to filling out the questionnaire to tracking their carbon footprint statistics.

04 UI Design

Our team crafted a simple and visually appealing design to track the user's carbon footprint. To enhance user engagement, we implemented several effective data visualization tools and elements of gamification, such as four types of achievement awards and encouragements for the users with a relatively low carbon footprint. We used a blue and green color scheme to mimic the colors of the globe.

Design Concept

After the design concept was approved, it was applied to all wireframes. At this stage, we experimented with several options for color brightness and different shades of blue and green design elements.

Illustrations

Custom illustrations were crafted by our team to reflect the environmental theme and make the branding easily recognizable and visually appealing.

All wireframes were assembled into a comprehensive clickable prototype that was user-tested. During this process, we replicated the entire user's journey to ensure a seamless transition from the design stage to the development stage.

Branding

02 Typography

We used Aktiv Grotesk font because it helps to support the environmental message of the app without being overpowering.

Aktiv Grotesk Corp Aktiv Grotesk Corp
Aktiv Grotesk Corp Aktiv Grotesk Corp
Aktiv Grotesk Corp Aktiv Grotesk Corp
Aktiv Grotesk Corp Aktiv Grotesk Corp
Aktiv Grotesk Corp Regular
Aktiv Grotesk Corp Medium
Aktiv Grotesk Corp Bold
Aktiv Grotesk Corp Regular
Aktiv Grotesk Corp Medium
Aktiv Grotesk Corp Bold
Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
01
02
03
04
05
06
07
08
09

03 Colors

We used Pure Green, Royal Blue, and Magic Mint as primary colors in the design to replicate the colors that naturally occur in the environment.

#17AB52
Pure Green
#3D75FF
Royal Blue
#A5F7D7
Magic Mint
#FF855C
Coral
#E82958
Crimson
#9275DB
Medium Purple

Conclusion

Klovis app provides users with a unique opportunity to support the environment in a simple, yet tangible way.

Looking for help with your app?

Do you have an idea for a great app? We’ll help you to turn your concept into a full-fledged mobile app in record time

Schedule a Consultation
Next Project
Rubyscout

Let's talk about your project

[email protected]
Filter