Earth Hero
How to engage users to collectively take actions against climate change and share their journey to motivate others to do the same?
Collective heroism to save the planet
Earth Hero is a non-profit organization that aims at responding to climate change by discovering steps users can take to care for our planet. In 2022, they partnered with Tech Fleet to create a community feature for their mobile app, a place for users to connect with each other and share their collective progress on reducing carbon emissions.
My role
I was a UX designer of a hard-work team of six designers that, alongside of research, strategy and development teams, designed the MVP for this new feature using Agile methodologies in eight weeks.
ABOUT THE PROJECT
THE CHALLENGE
Inspire heroes to assemble
Prior research showed that climate-conscious users feel that it is difficult to see the impact of their daily individual effort, and sometimes they feel they are alone in this.
Our goal for this project was basically to allow a group of users to take action in a more collective way and share their journey. This would result in more app engagement that encourages more real-world action.
However, how can we motivate existing and new users to keep engaged on trying new and more actions, thus reducing their carbon emission?
Here's a sneak peek of our community feature:
(Or keep scrolling down to see more details of the design process and how our proposed solutions)
Create a group & invite members
-
Allow users to create private groups and invite members from their community
-
Maintain an overall subject in mind
-
Private, safe, and judgement-free community
Challenge 1: what are the flow differences between existing Earth Hero users and new users?
Challenge 2: Users need to add their names to their profile. Where should we include this task?
Set a group goal
-
Allow users to be accountable of each other towards a common goal
-
Motivates users to achieve a goal together
Challenge 1: What are Earth Points?!
Challenge 2: Why keeping an inactive "Done” button throughout the flow?
I made this flow!
Engagement & Interaction
I developed the concept for these user cards!
-
Engaging group members to get inspired by each other
-
Rewarding feeling of helping the planet and being recognized for doing so through constant interaction
-
Getting users to leverage the community feature as personal resources for support and motivation
Challenge 1: No chat function in MVP phase, so how can they interact?
Challenge 2: What are these levels?!
Challenge 3: How to keep ideas and discussions within MVP scope?
Explore the current prototype:
(Or keep scrolling down to see more details of the design process.)
FLOW 1
1. Create a group & invite members
“As a EH User, I want to create a group so I can establish a sense of community with like-minded indivuals to rise against climate change.”
Major insights from Research:
Based on competitive analysis and interviews, research brought the following recommendations:
-
Users need a safe space to be guided how to achieve a goal
-
Onboarding experience: welcome message and walkthrough
-
Invite people from their community
-
Adding name to the profile when joining a group
MVP requirements from Strategy:
-
A way to create group
-
A way to invite members
-
A way to add a user name to existing profile
My main concern about this was if the team was taking into account two types of user flows: new users, who need to undergo the onboarding steps the currently has, and existing users, who have already completed the onboarding flow, thus requiring a simpler flow for group creation. The rest of the team was focused on creating one flow for creating a group, and another for inviting a member, so my input was very much appreciated.
I designed both flows and presented to the group in a working session.
Creating a group:
The first thing we did for this feature was to ideate user flows based on the competitive analysis provided by research. We knew that we had to keep it simple and use as much as we could from the iOS system:
_e.jpg)
The ideation of screens were based on competitors analysis from research and also with conversations and brainstorming sessions with the design team, so we decided to use them as a starting point for mid-fi.
Usability test with mid-fi wireframes
Flow tested:
What worked well
90%
of participants stated that flow was intuitive and rated it highly
What can be improved
-
Some participants would like to understand which fields are required in the group creation form.
-
Some participants wanted more information about how to calculate an achievable goal before setting one
Changes after usability test
Before
After
Required vs. Optional fields
Participants mentioned that they were unsure which fields were required to be completed, since after group creation, they were required to set a group goal.
As per client's recommendation, we decided to maintain the group goal as optional for now to give the users the opportunity to explore the group even before there is a goal set.
Before
After
Goals Explanation
In order to empower the group creator to make a decision about how many Earth Points they should suggest for the group to create, we added more information about Earth Points in the "Set a group goal page".
.png)
Hi-fi wireframes
Create a group placement
The client asked us to place the groups within the Community tab, and it will look like exactly as pre-existing climate groups that are suggested by the app, not created by users.
To keep consistency, we maintained the CTA button style.
Existing Earth Hero modal
Welcome modal message
The idea here was to be consistent with the existing UI of the app
Joining the group and adding a name
The client asked us to place the groups within the Community tab, and it will look like exactly as pre-existing climate groups that are suggested by the app, not created by users.
To keep consistency, we maintained the CTA button style.
Prototype - Group creation and inviting new members
The final result!
We chose to maintain the interactions for this flow as simple as possible for the first handoff. An iOS modal to access the photo library will be added in future phases as well.
FLOW 2
2. Set a group goal
“As an admin of this private group, I want to cheer group members on when the group makes progress in achieving our shared goal.”
“As a member of this private group, I want to complete many actions to achieve the group's shared goal of increasing number of Earth points.”
Ideation: trying to coherently add this step in the existing flow
In my exploration, I proposed that the admin would set actions and emissions reduction during the group creation and this is the flow I sketched to present to the team:
I made this!
Please note that I wanted to provide as many visual resources available in the original material as I could. I wanted to incorporate the original designs from the existing product in order to understand the existing experience and make this new flow as aligned with the brand as possible.
When I work async, in order to communicate with my team, I add sticky notes with my thoughts and reasoning behind decisions to guide our discussion.
Usability test with mid-fi wireframes
Selecting specific actions for a group was not part of the MVP, and talking to the client, we found out that emissions calculations were too complex to engage users, and that we should move on with Earth Points because users already see Earth Points as a measurement of environmental impact. Therefore, the solution was to focus on setting a deadline to achieve Earth Points instead of choosing specific actions. This way, the users are free to choose the actions they want to complete.
Admin sets Earth Points and deadline
Wheel picker menu to select earth points, and calendar menu to select deadline
The first info displayed in the dashboard for all users.
I made this flow!
We knew that users would connect with each other from focusing on a common goal. The solution the design team came up with was to highlight the group card in the progress tab and display it as soon as the user enters the group dashboard.
Usability test results
What worked well
The flow was intuitive and the way the amount of points and date to be chosen seemed easy to understand for 80% of users
What can be improved
Value of Earth Points seemed arbitrary and definition of Earth Points was not well understood.
Before
After
Providing more context
Usability test showed that users need more context in order to set a goal (set a number of earth points + a deadline) because they don't quite understand the concept of Earth Points
Solution: We added a short explanation on Earth Points and actions that can be visualized at all times during the goal setting flow.
%202.png)
The friendly Earth was added to maintain the brand and it works as a mascot explaining the points
The text was revised by EH's UX writer to make sure that we stick to the brand's voice.
Roadblock discussion!
Why are we keeping the "Done" button inactive in the flow? What is its the value? Should we remove it?
As we were approaching the handoff phase, one of my colleagues raised the question about maintaining the "done" button in the goal setting flow.
.png)
Answer: this inactive button makes the system status visible (heuristic principle), providing the user the information of when the flow is ready as soon as it becomes active.
.png)
I made this!
Nielsen's Usability Heuristics #1: Visibility of system status
Hi-fi wireframes
Displaying group goal in dashboard
The client asked us to place the groups within the Community tab, and it will look like exactly as pre-existing climate groups that are suggested by the app, not created by users.
To keep consistency, we maintained the CTA button style.
Native iOS pickers for goal setting
Native iOS pickers for numerical information was used to make implementation easier in the operational system.
Prototype - setting a group goal
I made this!
The final result!
I was the sole responsible for this interaction flow. I wanted to make sure that the iOS native interaction with the picker wheel was understandable by the developers, as well as the calendar.
TAKEAWAYS
My goals & learnings
My goals with this project
Collaboration &
Communication Skills
Fill the gap that my bootcamp left, where I was in charge of the end-to-end design process, and collaborate
with cross-functional teams (research, strategy, development) and other designers
Learn!
Learn new ways of approaching a non-linear design process, where challenges and decisions were made in a collective manner.
Get real-world experience
in a fast-paced environment
This is my first project that is part of a real organization, with real stakeholder, and for users who are already familiar and passionate about the app. It was essential prepare me for real-world design challenges in an Agile environment.
Overall learnings and takeaways
Keep a journal!
Documenting my thoughts and processes on a daily basis was essential for me to assimilate the information I was getting from different teams in order to make conscious design decisions in future sprints.
Every designer has a different approach for a problem
It was really enriching to collaborate with multiple designers, wish such different backgrounds and experiences. I learned new ways of tacklling problems and collaborating with others
Feedback should be kind and communication should be constant between teams
One thing that we agreed right at the first workinf session, was to keep feedback kind, positive and with reasoning behind our opinions so that we could create a healthy environment for all apprentices. There was no bad questions and i think our leads were essential to maintain the good communication and environment for us.
Agile methjodology and Lean UX
The whole concept of sprints was very exciting and knowing that I had a specific goal (with specific tickets) every week, and as each week fininshes, the closer I was to ur final deliverablrs. Reflect on our work and planning ahead was a weekly exercise that I learned and will implement as much as possible in my career and personal life!
Testimonials
UX/UI Design - Reading App
Stories2Connect is an app that brings communities together in book-sharing events, and allow school-age children to have access to books recommended according to their reading level.
