© 2024 Tino Digital Agency

Klovis IOS App Development.

10 May 2021
Klovis, a startup aiming at reducing the carbon footprint, reached out to our team to create a design for their application.
Klovis
Klovis
Client

Tech Stack

Services

#Research
#Product Strategy
#UI/UX Design
#Branding Extension
#Product Development
#Ongoing Production Support
About project

Client and idea

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.

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.

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.

320
h
UX/UI design
640
h
Development
40
h
QA
project Overview

Main app features

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

Research

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

Design process

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

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.
Design process

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

Typography

We used Aktiv Grotesk font because it helps to support the environmental message of the app without being overpowering.
Aktiv Grotesk Corp
RegularMediumSemiboldBold
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
010203040506070809
Branding

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
Rose Red
#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.