Earth Hero App

Redesigning the app's information architecture to improve user retention, which was previously at 46%
Three iPhone screens with images of the Earth Hero app screens
Role
UX Strategist
Teams
UX Designer, UX Researcher, UX Content Writer
Skills
User Stories
Site Map
Duration
4 Months

PROJECT OVERVIEW

Earth Hero is an eco-conscious mobile app that provides tools and ideas to help users reduce emissions, improve lives, and care for the planet. As the UX Strategist for this project, I colloborated with the designers, researchers, and content writers to improve the user retention.

THE PROBLEM

What was the issue with the app?

Earth Hero’s main navigation information architecture needed reorganization and restructuring to improve user engagement and retention, which averaged 46% over six weeks after first use.

THE SOLUTION

What changes were made to the pain points that caused the 46% retention rate?

Based on the research,  I restructured the app to eliminate 2 pain points around the "My Actions" tab; location of the tab and usage of its features. To eliminate these pain points, the following changes were made:

1) Location of the "My Actions" tab - moved from "My Emissions" page to beside "Browse Actions"
The before and after image of the placement changes made to the  "My Actions" tab
2) Usage of the features on "My Actions" tab - using best UX design practices, changes were made to the elements and navigation flow of the features found on this tab to increase understanding and completion of actions by users
The before and after image of the UI changes made to the  "My Actions" tab
How did I help redesign the IA for Earth Hero's mobile app as the UX Strategist?

PROBLEM BREAKDOWN

Analysis of Pain Points

Through previous user testing and feedback done by the researcher, it was understood that users were experiencing confusion when beginning a task due to certain navigational flows and elements that did not correlate with their assumptions and expectations. By collaborating with the researcher and designer who conducted a UI audit, I began to analyze the pain points on each of the main navigation pages on Earth Hero.

Existing Design
Screens of Earth Hero's home screen, my actions screen, and my progress screen with annotations
Analysis of current Site Map

We also analyzed the current site map to visually depict the problem areas in the Information Architecture.

A screenshot of the current site map for Earth Hero
1. Data suggested that users preferred not having to scroll for too long
2. Users often failed to identify other graphs below the view point
3. Users expected to find the "My Actions" tab under the Actions page on the navigation bar

WHAT HAS THE ANALYSIS OF THE PROBLEM BREAKDOWN TELLING ME?

Project Scope
Based on the current pain points on the app, the project scope was established as the following: ' To restructure the main navigation tabs and pages within the Earth Hero Mobile application to ensure an intuitive user flow and corresponds with UI standard mental models '

WHAT FEATURES DOES THE APP NEED TO OVERCOME THE PAIN POINTS?

User Stories

I then created User Stories using the pain points to establish what features are needed from the user's perspective. Once the user stories were validated by the researcher, I created user flows for each user story to be sent over to the designer. The designer used the user flows to redesign each screen with its needed feature.

User Story:
I want a concise landing page so I can explore all parts of the app and be easily directed to selected areas.
User Story:
I want to see how my actions are helping my emission target, so that I can continue to be motivated.
Sub - User Story:
I want to know where I can update app-related settings and account settings quickly so that it doesn't take me long to make changes.
Sub - User Story:
As a user browsing actions to add, I want to store/save actions that are not in progress to keep track of future actions that interest me.
Sub - User Story:
I want to see if I have been increasing or decreasing my pollution, so that I can better understand the results of my actions.
Sub - User Story:
Viewing my action list, I want to view my actions in progress so that I can remain motivated to continue taking action against climate change.

HOW WILL THE NEW FEATURES AND FIXED PAIN POINTS BE ACCESSED BY USERS ON THE APP?

New Site Map

Based on the user pain points identified and the User Stories created, I created a new Site Map to showcase the different screens and user actions that will be prioritized and redesigned for this project. The client wanted the team and I to focus solemnly on the main navigation pages: Homepage, Action, and My Emission, which made the profile section 'out of scope'. Since the current Site Map had the users confused with the "My Actions" tab under the My Emissions page, it caused users to leave the app. To fix this issue, we moved the "My Actions" tab beside "Browse Actions" under the Actions page. The new site map was shared with the design team to guide their designs.

Image of new site map

THE SOLUTION

Final Designs
After the content writer reviewed the content on each designed screen, the following final designs were implemented using the new site map and user flows for Earth Hero's redesign of their navigation bar's Information Architecture.
Images of the redesigned screens on the Earth Hero mobile app
Images of the redesigned screens on the Earth Hero mobile app
Images of the redesigned screens on the Earth Hero mobile app

WRAPPING UP

Future Roadmap for Earth Hero

The designs and documents were handed off to Earth Hero's internal team to conduct and publish the redesign of the mobile app's Information Architecture. Success of this redesign will be determined with the following: if there is an increase in the average number of actions achieved per user and if the user retention rate is above 6 weeks after the user's first usage.

Learnings

You may also like
A laptop with MyDok's dashboard on the screen
 An Ipad and mobile with images of the homepage of the Help and Feed campaign website.
Three screens showcasing the ADHD Math app, with a close up on the center screen showing the 3 learning methods
An arrow pointing to the top of the page