Empowering Compassionate Activists for a Thriving Planet

Earth Hero is a dynamic platform offering a diverse range of tools and innovative ideas aimed at empowering individuals committed to reducing emissions, enhancing lives, and safeguarding our precious planet. Their unwavering belief in the potential of a billion compassionate activists drives them to work passionately towards restoring Earth's health, creating an environment where all forms of life can flourish.

Earth Hero’s primary motivation is to inspire and mobilize people and communities worldwide to become active participants in the global climate movement. Through a comprehensive approach, they equip individuals with effective strategies to respond to climate emergencies while simultaneously enhancing their resilience and overall quality of life. Envisioning a future where collective action transforms the world into a thriving, sustainable, and harmonious habitat for all.

 
 
 
 

Key Objectives and Possible Solutions

  • Seamless User Experience: Our primary focus is to design an intuitive and user-friendly interface for the Earth Hero Web version, ensuring a smooth transition from the homepage to the app page. By offering a seamless experience, we aim to capture users' attention and maintain their interest throughout their journey on the platform.

  • Personalization and Engagement: Implementing personalized content and tailored recommendations will be at the core of our strategy. Earth Hero Web version will deliver relevant and compelling content, fostering a stronger connection with users and motivating them to take concrete actions for the environment.

  • Clear Call-to-Action: To reduce drop-offs, we will strategically place clear and prominent calls-to-action throughout the platform. By providing users with straightforward directions and incentives to engage further, we aim to boost the completion rate of meaningful actions.

  • Performance Optimization: We understand the importance of a fast and responsive website. Our team will focus on optimizing the Earth Hero Web version for performance, ensuring quick loading times and seamless navigation, which can positively impact user satisfaction and retention.

  • Data-Driven Insights: Utilizing data analytics, we will continually monitor user behavior and gather valuable insights to identify potential pain points and areas for improvement. This data-driven approach will enable us to make informed decisions and refine the platform to meet users' evolving needs.

  • Community and Social Integration: By integrating community features and social sharing options, we aim to foster a sense of belonging and encourage users to engage with like-minded individuals, creating a positive ripple effect that amplifies the impact of their actions.

  • Educational Resources: Earth Hero Web version will offer a rich repository of educational resources, empowering users with knowledge and understanding to drive meaningful change. By promoting environmental awareness, we envision a more committed and informed user base.

 

Requirements for MVP from the Client

These requirements form the core functionality of the MVP and will enable users to register, get acquainted with the platform, assess their emissions, and engage in sustainable actions. The team allocated responsibilities, and I was tasked with handling the onboarding process and the emissions profile.

  • User Registration: Implement a user registration system that allows new users to sign up for the Earth Hero platform with unique credentials. Additionally, provide an option for existing users to log in to their accounts securely.

  • Onboarding Process: Design a smooth and informative onboarding process for new users. This should introduce them to the platform's key features, benefits, and functionalities, helping them understand how to get started on their sustainability journey.

  • Emissions Profile: Create a feature that allows users to assess their carbon footprint and emissions profile. Users should be able to input relevant data, such as transportation habits, energy consumption, and lifestyle choices, to generate a personalized emissions profile.

  • Actions Tracker: Implement a comprehensive Actions section that lists various eco-friendly actions users can take to reduce their environmental impact. Allow users to mark actions as "Add to Goal" if they plan to perform them, "Already Do It" if they are already practicing the action, and "Cancel" if they choose not to pursue a specific action.

Key Goals

Create a simple initial version of the Earth Hero app in web form. The key goals are to complement the mobile version and make it easier for people to access and discover Earth Hero through the web.

The initial version will include basic functionality similar to the mobile version, but will not include extra features that will slow down its release. We want people to benefit from it sooner than later and it’s easier to iterate and spend time wisely on updates after the initial version is available.

 
 

Unveiling User Insights

To begin our research we employed data and findings gathered from the mobile app to drive the research and competitive analysis process for the web app. By leveraging the existing knowledge and user behavior patterns from the mobile platform, we gained valuable insights that helped shape our approach towards optimizing the web app's performance and user experience.

To begin with, we carefully analyzed user interactions, preferences, and engagement metrics from the mobile app. Understanding how users interacted with the app, which features they found most appealing, and where they encountered obstacles allowed us to identify key areas of improvement for the web app.

 
 

Gaining a Competitive Edge in Sustainability

During the competitive analysis phase, we explored various products in the sustainability and environmental space to gain valuable insights into their offerings and gather inspiration for design enhancements. Here are some key findings from the competitive analysis:

  1. Product Offerings: We examined a range of sustainability-focused products and platforms, including mobile apps, websites, and web applications. Each competitor presented a unique set of features and functionalities, such as carbon footprint calculators, eco-friendly action tracking, sustainable lifestyle tips, and community engagement.

  2. User Experience and Interface: The competitive analysis shed light on different user experiences and interface designs. We observed that some platforms excelled in providing a seamless and intuitive user experience, while others lacked clarity and struggled with information organization.

  3. Gamification and Rewards: Several competitors integrated gamification elements and reward systems to incentivize users to complete sustainable actions. These features encouraged users to engage consistently and compete with others, fostering a sense of achievement.

  4. Accessibility and Inclusivity: Some products demonstrated a strong commitment to accessibility by adhering to WCAG compliance, making their platforms more inclusive for all users, including those with disabilities.

  5. Personalization and Recommendations: Certain competitors offered personalized recommendations based on user behavior and preferences, tailoring the user experience to individual needs and interests.

  6. Community Engagement: We observed the significance of community engagement in motivating users to participate actively in sustainability efforts. Competitors with vibrant and supportive communities tended to have higher user engagement.

  7. Onboarding and Emissions Profile: The analysis provided valuable insights into how other platforms handled the onboarding process and emissions profiling. We observed successful approaches to educate users about their carbon footprints and guide them toward taking actionable steps.

  8. Data Privacy Considerations: Some competitors addressed data privacy concerns effectively by providing clear information on data usage, ensuring transparency, and offering opt-out options for certain data-sharing activities.

By conducting this competitive analysis, we gained a comprehensive understanding of the strengths and weaknesses of existing products in the sustainability space. These insights will serve as a foundation for shaping the Earth Hero platform, leveraging best practices and innovative ideas to create a compelling and impactful user experience.

 
 

Meet the Personas on a Mission for a Greener Future

Creating a proto-persona is an essential step in the early stages of user-centered design and product development. This preliminary representation of a typical user was based on limited data and assumptions, which helped guide the design process until more robust research was conducted. We focused on Emily the ‘newbie’ persona, while developing the experience used know as the ‘greenie’.

 
 

Unlocking Innovative Solutions: A Journey of Ideation and Creativity

Customer Journey Map

Using the mobile map's journey as a foundation, we formulated the customer journey map specifically tailored to the web app. This comprehensive map incorporates user interactions without sign-ups and utilizes cookies to store data, enabling users to access valuable emissions insights.

User Flows

Building upon the customer journey map, we outlined user pathways for all primary interactions. These pathways were instrumental in creating prototypes and designing a seamless overall user experience.

Browsing actions

 

Comprehensive Sitemap Overhaul

Following the insights obtained from the initial research, it was evident that the Information Architecture (IA) of the Earthhero website and the mobile app required updating. To achieve this, we organized three remote card sorting exercises (two open and one closed), allowing us to refine and optimize the sitemap. By considering user preferences and behaviors, we meticulously crafted the final navigation, ensuring an intuitive and user-friendly experience for visitors and app users alike.

 
 

Card sorts ! & 2

 
 

The process began with a thorough evaluation of the existing architecture, followed by the collection and analysis of user feedback. User personas were refined, and their goals were revisited to ensure alignment with the latest insights. New user flows were then meticulously mapped, simplifying the steps users take to achieve their objectives. The information hierarchy was reworked to create a more intuitive and user-friendly structure, complemented by improved navigation and labels.

View the full UX strategy here.


Streamlining UX: Enhancing User Experience through Wireframing and Prototyping

 

Crazy 8’s Session

With an understanding of the MVP flow, it was time to start wireframing solutions. To foster a multitude of ideas, we kicked off with a "Crazy 8" session. This dynamic session provided us with a plethora of inspirations and concepts to incorporate into our designs. The diverse range of ideas generated during this session sparked innovation and paved the way for unique and exciting design possibilities. After a dot vote, we began to design our assigned screens.

 

Evolution of Wireframes

Once all the research data was gathered and analyzed, we had a clear understanding of what our users needed and expected from the product. With this valuable information, we started by creating low-fidelity wireframes to outline the basic structure and layout of the interactive prototype. These early sketches allowed us to iterate quickly and make necessary changes without getting bogged down in details.

Next, we presented the low-fidelity wireframes to stakeholders and conducted design sessions with Strategy & Dev to gather insights. Based on the feedback received, we refined the wireframes and progressed to mid-fidelity wireframes. These wireframes added more detail and basic interactions, giving a better sense of how the final prototype would function.

The donut graph had to be changed to a bar graph due to the constraints of the Development team. Out of scope for Phase one.

 

With the mid-fidelity wireframes in hand, we organized usability testing sessions with real users. Observing their interactions and collecting their feedback helped us optimize the design further. Armed with this feedback, we then moved on to creating high-fidelity wireframes, incorporating polished visuals, specific design elements, fonts, colors, and images.

Usability Test

Conducted remote usability tests with 5 users on the mid-fidelity designs to get feedback on the navigation and tasks.

Usability Test Goals

The usability test's overarching goal for this round is to observe users' ability to complete tasks provided based on the user flows and measure the success of each task interaction, ease of use, and level of difficulty.
The test has the following specific objectives in mind

  • The process of creating an account

  • Ease of use of the onboarding experience as a new user

  • How they interact with the navigation of their emission page

  • Adding action goals

  • Refining their emission profile

Usability Test Metrics

The usability test was designed with a primary focus on observing participants' ease of use or difficulty in completing tasks. Additionally, efficiency was measured to assess how quickly users could accomplish the given tasks. Participants were asked a small set of questions to gather feedback on any potential missing, confusing, or frustrating elements, as well as their overall thoughts about the interface.

The success of each task was evaluated based on the following criteria

  • Complete success: The user successfully completes the task without any errors, exactly as specified.

  • Success with minor issues: The user is able to accomplish the task, but with minor omissions or mistakes.

  • Failure: The user is unable to complete the task.

By applying these criteria, the test aimed to provide valuable insights into the usability of the mid-fidelity designs and identify areas for improvement to enhance the user experience. The collected data was documented using a template, and the Rainbow spreadsheet was utilized to identify any recurring errors and patterns in participants' interactions. The results from the usability test would guide the design team in refining the prototype and ensuring a user-friendly interface.

 
 
 

Issues to update on the Emissions Profile after the initial usability test.

 
 
 

Challenge:

Facing the challenge of spacing issues in the prototype, I took on the additional responsibility of Lead Visual Designer, alongside my role as the UX Full Cycle Designer. The task of respacing and ensuring pixel-perfection for each screen fell on my shoulders, and the pressure was on as we had only a few days to complete it before the stakeholder presentation and dev handoff. With determination and focus, I guided the team through this critical phase. I meticulously reviewed each screen, adjusting the spacing, and fine-tuning the design to eliminate any jumping issues. Every pixel mattered as I strived for a polished and seamless user experience.

The wireframes and prototype showcased the result of our collective effort and determination. We pushed ourselves to the finish line, ensuring the web application looked and functioned flawlessly. The attention to detail paid off, as we successfully met the deadline and delivered a high-quality MVP for the stakeholder presentation and dev handoff.

Throughout this intense period, effective teamwork and dedication were paramount. My role as Lead Visual Designer allowed me to lead the charge in achieving pixel-perfection, while my background as a UX Full Cycle Designer ensured that the user experience remained at the forefront.

Despite the challenges, we emerged victorious, and I am proud of my team's commitment to delivering an outstanding product. This experience has further strengthened our collaborative spirit and reinforced the importance of overcoming obstacles together. Below is the result of our hard work.

 

Using Figma, we transformed the high-fidelity wireframes into an interactive prototype that simulated user interactions and flow. This prototype allowed users to experience the product and navigate through different features, gaining valuable insights into its usability and functionality. Conducting more user testing with the interactive prototype allowed us to identify any remaining issues and make final refinements. It was an iterative process, and we continued to iterate until the prototype met the users' expectations and addressed their needs effectively.

With the interactive prototype well-tested and refined, we handed it over to the development team, providing them with all the necessary design assets and comprehensive documentation. This ensured a smooth transition from design to development and helped deliver a cohesive and user-friendly end product. The collaborative effort of the research, wireframing, prototyping, and testing stages resulted in a successful and user-centric interactive prototype ready to be brought to life.


Give the prototype a spin here!!

 

Unveiling the EarthHero Web App: Journeying Beyond the MVP

This marks the completion of phase one in the development of the EarthHero web app. Moving forward, the design process will continue in multiple stages. To ensure continued success, I established a comprehensive design system for future designers to follow and build upon. This design system will serve as a solid foundation, maintaining consistency and scalability throughout the web app's evolution.