Back to Projects

Clovis Startup: IOS App Development Case Study

Klovis, a startup aiming at reducing the carbon footprint, reached out to our team to create a design for their application.
10 May 2021
Codeway Venture
3.5 month
iOS application
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.

Kumsal Pınargözü
Product manager at Codeway

Upon launching, the client is confident to say that their product has the best UI/UX design among its competitors. The client gives credit to Tino Digital Agency’s satisfactory skills in design and development and their openness to applying changes depending on the feedback that they are provided with.

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.


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.


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.


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.


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.


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.


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.


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.


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

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.

Pure Green
Royal Blue
Magic Mint
Medium Purple


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

Let's talk about your project