The Climate App

A fun mobile to drive a social movement in reducing carbon footprint.

Overview

Intro

The Climate App is a mobile app that utilizes gamification features to make carbon-cutting actions fun, inspiring and scalable for individuals, inviting more people to join the movement.

Project Type

Client Project

My Role

UI & Visual Designer

Timeline

July 2020 - Present (In progress)

Tools

Figma, Illustrator, Photoshop

My Contribution

Throughout this project, I have been working with another UX/UI designer and the app founder remotely. My role is to create the visual part of the app and the brand: Beta app UI Design, new branding assets, and marketing materials for the crowdfunding campaign. Currently, I am in the progress of finalizing a new sets of icons and illustrations throughout the app, as well coming up with a new branding identity for the Beta App soft launch in March 2021.

Research

What's the context?

Started in 2019, the team now consists of 25 passionate environmentalists that have come together to help solve the largest crisis of our time. The team has developed the alpha app, beta app designs, partnerships, and social media presence. The crowdfunding campaign was launched in September 2020 to raise £30k to develop the Beta app.

The Challenge

The challenge was to redesign the Beta app UI elements and the overall brand image to achieve the following:
  • fun, engaging, and inviting Visual & UI design to make cutting carbon easy, fun, and social
  • unique and recognizable brand image to create a movement of action flighting climate crisis

Why is it A problem?

It's evident that there're only 8.5 years left to avoid climate catastrophe. The world needs a radical change of individuals behaviours which can help lead to systemic change in order to reduce CO2 emissions to net-zero by 2025.

01/

Changing behviours are hard

02/

Time is limited

03/

People tend to follow what others do

User Personas

The user discovery research was conducted in the UK and other European communities. Initial user discovery interviews were conducted by the Alpha product team in May 2020. Research data was handed down to our Beta product team for further analysis.

Key Finding

01/

Unclear information

A lack of clear, trustworthy, concise and compelling information is making it harder to pick and implement an impactful change.

02/

Impactful actions

Some conflict exists between taking what people determine to be necessary action and maintaining their important needs/wants in life.

03/

Peer pressure

It’s demotivating to see other people ‘undo’ your hard work (especially if it’s an important person/group to you), and it’s uncomfortable to try and get them to change their behaviour.

User Insights

User Needs

  • To get reliable information about how to reduce carbon footprint
  • To connect to a environmentally-conscious community
  • To encourage others to take action in reducing carbon footprint in a friendly way
  • To track the progress on fighting climate change

User Goals

  • To learn about different ways of reducing carbon footprint
  • To build a community with like-minded people
  • To share experience with others and invite more people to join
  • To see metrics on activity progress

Opportunity

How might we make it easy to cut and track individual's carbon footprint, turning these daily challenges into an actionable social movement?

Solution

The Latest UI Design

Friendly onboarding

Fun Challenges

  • Browse and try out different challenges to cut your carbon footprint
  • Understand why these challenges are important to the world

Rewarding accomplishments

  • See how your efforts progress along the way
  • Earn rewarding trophies for each accomplishment

Personalized Goals

  • Set your goals at your own pace
  • Manage your challenges and accompishments

Build your community

  • Invite your peers to join the movement and build a green community
  • Share your progress and achievements with your peers

Information Architecture

One of the key features of the app is its gamification of environmental challenges. See how this feature is planned throughout the app:

Design Process

The current design is based on the Alpha version and has gone through a few different approaches.

The Alpha app design for MVP demo was completed in March 2020, they key concepts are shown below:

Wireframes & Hi-fidelity UI Design

Illustration & Design Specs

My initial approach for the Beta app focused on a few rationale: decrease the range of colours, increase colour saturations, and increase the use of white space.

Visual Elements

The new colour palette was created too keep the key fun and playful theme, while addressing all the issues identified in the Alpha design. Colour gradients were applied to the elements to add dimensions and depth to the mascot "Earthy", which helped creating a more lively character of "Earthy".

App Icon

Icons

Colours & Illustrations

Mascot & Applications

Hi-fidelity UI Design

For the UI design, the use of white space was emphasized while maintaining a playful colour palette.

During the crowdfunding campaign, the team realized that it's important to keep the untraditional colour palette used in the Alpha design for a consistent branding. Therefore,  another design approach was adapted to create something closely resemble the elements from Alpha design, yet solving all the problems identified.

Inspirations

How can we use a wide range of colours from an untraditional colour palette while being not overwhelming for users? We took inspirations from some successful apps that also had a very strong palette, such as Duolingo or Headspace.

Constraints

  • It was required to keep the range of colours used in the Alpha design, and perhaps adding even more.
  • The original app mascot must have the same colours.

Visual Elements

Icons

Illustrations

Crowdfunding Campaign

This initial Beta design was applied in various marketing materials for the crowdfunding campaign in fall 2020.The campaign was initiated on a platform called "Indiegogo" and promoted across different social media, which was even featured on the Euronews. It had successfully raised more than £30k for Beta app development.

Evaluation

Usability Testing

Initial usability testings for the Beta app started in October 2020. Overall, the feedbacks for overall app interface design were quite positive. Here are some of the comments we have received so far:
  • Interface design is very intuitive
  • Colour scheme is fun and inviting
  • Overall visual and graphics are very friendly
Currently, more usability testing took place with the latest prototype. The iterations of the UI design are still in progress and more details will be updated soon.

Iterations

Coming soon
01. Overview02. Research03.Solution04. Evaluation