EARTH HERO
UX Design l Research l Mobile
Carbon Emission Action Progress Information Architecture Redesign
Earth Hero is a non-profit organization that is dedicated to saving our planet. With a great vision and a mobile app, they help individuals track their personal carbon emissions and environmental impact. By understanding their daily actions and lifestyle through the app, users can reduce their personal carbon footprint.
At first, many people downloaded the app and tried to become more aware of their actions by setting goals or reducing their carbon emissions. However, after many years, a lot of users don't engage with the app or its action items anymore.
Timeline l 2 months
Skills l competitive analysis, site-mapping, sketching, wireframing, hi-fi screens, prototyping, cross-functional collaboration, critique work
Role l UX designer working with 5 designers and 2 lead designers across the globe (California, Florida, Germany, Barcelona, Poland).
MY ROLE
I was selected to join the UX design team to work on redesigning information architecture
Our team met 2-3 times per week and cross-collaborated with the UX Writing, UX Research, and UX Strategy teams to build this project. We also met with the Earth Hero founder once a week to discuss our progress and our design choices.
OBJECTIVE & GOAL
Increase user engagement is the primary goal
Earth Hero is still in the process of growth and engagement, but it is losing users’ activity on the app. The primary goal is to keep retention and increase the engagement rate.
PROBLEM
Current Earth Hero mobile app is unorganized & lacks consistency
Earth Hero is consistently operated by different volunteers in different phases. From the research left off by the former team members, we can see that “users sometimes found the app difficult to navigate”, and the “mobile application lacks consistency in its design and functionality”. All of this indicates that the Information Architecture might be unorganized.
Problem Discovery
COMPETITIVE ANALYSIS
Our team looked at 3 direct competitors (Joro, EcoCRED, MyFootprint) and one indirect competitor (Meetup) and used the SWOT analysis method to determine their strengths and weaknesses in terms of information architecture and common UX strategy.
Despite using similar approaches, Earth Hero's app is still experiencing a decline in engagement. This has prompted the team to investigate the information architecture and determine the underlying causes.
Competitive analysis results prompted the team to dig into Info Architecture
SITEMAP ADUIT
Current navigation on sitemap led to dead ends without exits
Our team and I dig into the current sitemap by following each navigation bar tab: 1) Homepage 2) Action 3) My Progress. The purpose of this was to check if each layout has any blind spots or dead ends that might cause errors, usability issues, or confusion.
We found 2 problems:
1) There is no visible setting function shown that allows the users to have easy access to edit their personal footprint.
2) Some navigation led to dead ends without the option to continue or exit.
CARD SORTING
Utilizing card sorting to have the users recategorize various components in the app
We partnered with the UX Research team to conduct a week-long card sort activity to learn how users would recategorize the various header and components in the app.
Card Sorting results showed that users often categorized “profile”, “account settings”, and “login settings” under the “setting” category. However, there were no “setting” icons anywhere shown in the current design.
PREFERENCE TEST
Validated Redesign IA sitemap by running preference test
Based on the card sorting results, the UX Research team came up with two ways to redesign IA & which landing home screen fits the user’s wants. The team ran the preference test. The results showed that the users preferred Design A.
DEFINE & DECIDE
IDENTIFY PAIN POINTS
Account setting location, navigation bar tabs, progress tracking user flow were major pain points
Now we need to think of some ways to solve the problems through UI Design. Based on the discovery phase, we understood that there were 4 major pain points:
1) visible setting function
2) data visualization recreation
3) clear progress tracking status
4) encourage users to engage with the actions quickly.
NEW SITEMAP
New Earth Hero sitemap created based on all sorts of research findings
Our team utilized the findings and data insights to reorganize the sitemap. We built out the entire sitemap on top of Design A’s basic logistics from the preference test.
Ideate & Design
SKETCHING
We explored ideas by sketching. Focus on “setting “, “bottom nav bar”, and “progress tracking”
DESIGN HIGH-FIDELITY MOCKUPS
Design multiple versions of redesigned features
Our team came up with multiple versions of designs so that we could enable rooms for exploration and allow the Earth Hero founder more options to see which designs better fit Earth Hero’s mission and goals, and which designs can be iterative.
Each team member voiced his opinions and advocated for the design they believed best matched what the users needed. We voted on the final components and designs. The founder had the final say.
For example, the "setting" feature placement was developed based on the card sort results. We chose version 2 based on the majority of votes.
PROTOTYPING
Prototype to evaluate the success of the new IA design
We designed and prototyped 7 specific user flows. We worked closely with the UX Research team to conduct another week-long usability testing. The goal of usability testing was to ensure users could navigate through each flow without usability issues. Here are 7 specific user flows:
Browse and Find Actions
Save an Action
Check Settings
Add an Action to My Goals
Check Ongoing Goals
Update Emissions
Set a New Target
Validate & Iterate
USABILITY TESTING
Some users still get lost. Our team prioritized IA-related usability issues
Usability testing was conducted to understand if users could perform a smooth user flow and have a better user experience.
Unfortunately, issues still came up! The results showed over 20+ usability issues. However, we prioritized information architecture-related issues.
1) Lack of back buttons or exit buttons for action card pages.
2) Misunderstanding of the data in the graphs.
3) Preference for “My Actions” to be the default action screen.
4) Two “setting” icons made users confused.
Some other issues such as design changes were not in the scope so our team made notes for the next phase of the project.
DESIGN ITERATION & HAND-OFF
Annotated each component’s functionalities and purposes. Ready to hand over designs to developers
Our team spent the last few days iterating designs within the scope. Due to Earth Hero having its own grid and pixel measurements that could not be disclosed, our team annotated the functionality of each component. Described each of its purposes in detail and organized them for design hand-off.
Final Design
OUTCOME + IMPACT
After a month, the latest updates were released. Several components and designs were successfully shipped and implemented in the Earth Hero mobile app. For example, the setting profile section, progress tracker redesign, and nav bar were redesigned.
As compared to the previous six-week length, 10% more users are either completing their goals or planning their goals within six weeks, which shows that users are more engaged with the updated mobile app.
🎊 Note: The new-look design will be implemented later this year.
10% more users complete the goals or plan the goals after 6 weeks of release.
TAKEAWAYS
Time zone differences were the biggest challenge
It was difficult for everyone to come together to meet at the same time since our team members lived in different cities across the globe. It slowed our progress at some points. If I could go back in time, I would propose the following possible solutions to work around the time and not affect progress as a result.
All team members needed to be dedicated to adjusting their time to find a good time to meet together and design.
The design components and their rationales needed to be annotated and written down next to the design, so every designer could pick up quickly as they hop on and work on the design on their own.
If more time was given, I’d proposed to do A/B testing
So far, we have redesigned the Earth Hero mobile app information architecture. However, time did not allow us to have a thorough understanding of how successful our redesign was. If more time was given, I’d suggest collaborating with the UX Research team to conduct A/B testing.
Try comparing the old version to the redesigned version and observing how participants react to each version. Set a timer to compare the two versions to determine which requires fewer clicks or takes less time to complete. There you go! You'd know the impact right away.
Iterate and test more
Based on usability testing, our information architecture solution still got some usability errors. I’d iterate the design and run a few usability tests. In addition, a community feature is coming soon. The plan is intended to allow users to interact with each other and with the community, so how might we allow this to happen? This will be the next step.
Any questions? Interested in connecting? Let’s hop on a call 📞
-
ECHELON
Web-3 Job Searching/Recruiting App Creation
-
SUBSMANAGER
Monthly subscription-based service management tool
-
WORKSPOTTER
Streamlining the Search for Remote Workspaces