UPSPIRE

the environmental app for the reduction of CO2 in daily life

For our last project at Bootcamp, I had the pleasure of collaborating with Jaione Cerrato and developing an App for a Startup Upspire. This was a collaboration between two strong Berlin schools, IronHack and the Berlin Startup School.

Task for this Project was to develop a comprehensive digital tool that will allow users to take measurable sustainable actions in their daily life. In order to bring the Project into life and create App for Startup Upspire we did following steps:

• Brand positioning and Competitive Analysis
• User Research
• Concept Development and Information Architecture
• Prototyping
• User Testing
• UI Design

Upspire

As a starting point, we gathered the main points that the startup is trying to bring across their product.

Why should we create this app?
To reflect on the immediate urgency of climate change.

What is the main goal?
Promote action to reduce individual Carbon Footprint, without exhausting the user. To “upspire” the User.

What is the secondary goal?
Tracking Carbon Footprint (track the amount of CO2 reduced by the users).

Brand positioning

Brand positioning and Competitive Analysis were first crucial steps for understanding the marked we are facing and it was utterly important to do it at the very beginning of the process. We quickly realised that the amount of digital products offering similar content was very vast. Due to time restrictions, we identified 10 competitors most relevant to Upspire. After a detailed analysis that focused on all aspects of the products, from different features, community backing up the product, UI design to bugs and tracking, we focused on creating a visual diagram represented in axis — function vs. difficulty and action tracking vs. participation.

Based on the information we gathered, we found an empty spot for the Upspire. As a result, we concluded that the app should be highly oriented toward making the User take action in a way they can measure their progress while allowing them to do this individually or in groups. Conceptual core of the App is reflected in 3 main steps:

1. Perception
   The app should help people create an understandable perception of their own individual CO₂ emissions. Numbers don’t suffice so we would need something that can be easily understandable.
2. Action
   According to the perception raised, users should be motivated to take an action. Actions could be taken a daily, weekly or monthly tact.
3. Reward
   After taking action users should be able to see their progress and be adequately rewarded.

User Research (Guerrilla, Survey, Interviews)

After initial Guerrilla Interviews and in addition to the conceptual core we took further steps in order to empathise with the user:

• Identify the user:
  Digital natives (16–35 years old) living in the global north, already interested in taking action to decrease their environmental impact.
• What do we need to learn from our users?
  How to present relevant information clearly and motivate them to take action.

As a result of the first step we build a 2 general assumption, which the survey confirmed to be right:

• (56%) Information about Climate Change can be found confusing.
• (81.5%) The majority of the users are willing to take action.

After the Survey that gave us insight into statistical data, we continued empathising with our User and understanding their needs by conducting several more interviews. Here we came across different needs, wishes and types of users, which had different knowledge about the subject matter. However, the general spirit of the responses we gathered indicated that users find the topic overwhelming and want to be encouraged in order to improve their habits.

“Climate change is overwhelming. I would like to be inspired with a positive tone and effective actions, instead of constantly feeling shame for being a human.” Alex, 28

“It is difficult to understand what am I producing and what are goals — we have Paris but we don’t know how to implement it” Philip, 31

“I would like to see my data as graph or diagram, but something more relational to everyday objects would be better.” Sarah, 30

User Persona

After gathering information through detailed interviewing process, we created a User Persona — Max that guided us through the entire creation of the app. Defining his motivations, needs and frustrations, helped us focus on what matters the most to our users and based on that we were able to continue on the fruitful path of ideation by stepping in users shoes.

Defining the right problems

In order to sharpen and define the problem, which can lead us through Ideation process we formulated following questions and statements:

HMW
How might we offer the right challenges, show progress and reward positive engagement of environmentally conscious digital natives, who are ready to take an action and change their habits to reduce Greenhouse Gas Emissions?

Problem Statement
Conscious digital natives need a practical and empowering way to take concrete and meaningful actions that would help them reduce their Greenhouse Gas Emissions in their everyday lives because they are confused and have an unclear vision of how the danger of climate change can be decelerated.

Hypothesis Statement
We believe that offering simple and valuable alternatives to conscious digital natives, will create a better overview of the individual reduction of Greenhouse Gas Emissions. We will know we are right if 70% of the users complete the basic challenges.

Together with the previous research we concluded the “define” stage and started writing the ground for the “ideation” stage by stating the following:

Primary goal: Users need to complete actions.
Secondary Goal: Users need obtain clear visualisation and understand their impact on general Gas Emissions. .
Concept: A gamification of the app will help Users and guide them into taking actions.
App structure: Action, progress visualisation and reward.

Ideating solutions

On the beginning of Ideation we decided to have some fun and start with crazy 8 drawings by having all that App postulates in our mind.

Further, into the ideation process, we defined the app more concretely:

• Levels

The actions must be categorised into knowledge/ difficulty levels
In this case, we choose to have 3 levels, within them the user can take individual or group actions, finish tasks alone or engage with others.

• Rewards

Our Users want to make an impact in the real world
With each action completed users collect coins which they can invest in real environmental actions.

• Data Visualisation

Must be translated into relatable objects
More concretely we decided to use endangered animal shapes for the user to understand the their impact immediately.

• Sharing responsibility:

Challenging your friends
As part of Level 2 and 3 users can complete the challenges with close friends, so they can share tips and challenge each other to stay motivated.

Information Architecture

With all these in mind, we started our concretisation and and spoke about features that could translate ideas into the app. As a first tool we used was Moscow Method.

Moscow Method

The Moscow Method allowed us to grasp our feature priorities.

01. Must have:
- Levels of actions to take
- Concrete and measurable set of actions per level
- Personal impact overview (stats & graphs)
- Inspirational content

02. Should have:
- Reward system
- Planetary progress and relevant information to the user.
- Flexible notifications

03. Could have:
- Action Tips
- Story of the day

04. Won’t have:
- Calendar
- Vague information
- Cross platform tracking system
- Push notification for stories

Site Map

After defining the features we ran a Card Sorting workshop, which resulted in the Site Map shown here below.

“I want to have things in the nav bar with which I can interact on daily level”
Jen, 29

User Journey

Doing Max’s Journey Map allowed us to better understand how could the app guide the user on the path of taking action.

User Flow

As a final part or Information Architecture we created User Flow

Prototyping

The prototyping process was the key one, allowing us to refine and rearrange the contents we defined through previous process. Simultaneously to prototyping we tested the the mid-fi, observed and noted reactions of our users to it. Because of the feedback we decided to prioritise the gamifying spirit.

Mid-fi Prototype

Parting from the ideation process, we drafted some sketches and created our first Mid-fi, which was then tested and refined. Here the result of our final Mid-fi.

UI Design

As the last step in the process of creating an App for the Startup Upspire we did Interface Design. We wanted to to convey the energy of the stakeholder and needs of Users into the visual style.

We started by defining the brand attributes that should shape the app.

Visual Attributes:
Dynamic
Trustworthy
Empathic
Action driven
Motivating

Mood board

This tool allowed us to test the response of Users to different visual styles. From three different Moodboards, Nr.3 won the hearts of Users.

It is a combination of bold typeface, bright colors, and high use of photographic imagery was preferred from the 3 different versions we presented during our UI survey.

Style Tile

This late on translated into Style Tile and simultaneously evolved into the application of the elements and overall appearance of the final Hi-fi prototype.

Hi-fi Prototype

After all basic functionalities have been achieved, as our final product for the Upspire we delivered High Fidelity MVP version of the future App.

Key Learnings

Final Project for IronHack was a real pleasure. A successful and harmonising collaboration that lead us to winning the Award for best UX/UI Project!

Main takeaways:

• Comprehensive and detailed User Research
• Thorough Competitive Analysis that gave us crucial insight
• A positive work environment reflects the project outcome

Main blockers:

• Vast competition
• Time restrains

We really put a big effort into developing the concept and applying gamification aspects to the app so it would be a fresh, engaging, and overall motivating tool that users can find real benefit in using.

What next?

Accordingly, the app should be reviewed and pushed forward. The most crucial task should be running a feature focus user-research workshop to evaluate the existing functions. We hope that Startup will raise money for implementation of the Project and are happy to help along the way!

Good luck for Upspire and thank you for reading!