Project brief

Restructure the main navigation pages (Home, My progress, Actions), meaning the placement and redefine & improve the content within these pages to ensure an intuitive user flow based on their varying needs.

My role

I worked in a cross functional team of 6 UX designers who collaborated on all stages of the project with the other stakeholders involved.

Project goal

Data collected by Earth Hero shows low user engagement and retention rate. The objective is to better organize and structure the apps IA in order to enhance usability and navigation.

Project K.P.I.s

  • Increase the average number of actions achieved per user.
  • Increase new user retention rate, which currently averages 46% over six weeks after the first usage.
  • Product lead: 1
  • UX researchers: 4
  • UX designers: 6
  • UX copywriters: 3
  • UX strategists: 6
  • Figma
  • FigJam
  • Miro
  • Zoom
  • Optimal workshop
  • Research
  • User flows & AI
  • Wireframes & Prototypes
  • User testing
  • IOS
  • Android
Expand image

Previous user testing and feedback suggested that users were experiencing confusion when beginning a task due to certain navigational flows not following their assumptions as well as certain elements not functioning as expected or failing to imply the meaning perceived by the user.

Key insights

Competitive analysis

Our first step was to understand the IA of competing applications in order to determine if the structure of their systems were offering a seamless navigational journey so that we could make more informed choices when designing our own.

User persona revised

We decided to update our user persona based on recent user interviews and testing so that we could better determine their wants, needs, and frustrations when it came to interacting and navigating the app.

User stories

User stories were then compiled focusing on assumed actions and journeys a user would take when interacting with the app. This would allow us to analyze any area within the apps layout that didn’t accommodate these needs helping us to focus on areas where iterations would need to be made.

Current sitemap

The initial site map created a basis that helped visually depict the problem areas in the IA. Backed by previous user research we were able to determine the areas that needed refinement and act accordingly. The first step would be to conduct a card sort to understand how users naturally expected the apps layout to be presented.

Data suggested that users preferred not having to scroll for too long.
Users often failed to identify other graphs below the view port.
Users expected to find the ‘My Actions’ tab coupled together with the Actions page

Card sort

A card sort was then conducted with over 29 participants. Through this method 5 major groups were created comprised of the many categories listed.

Number of participants
29 participants
Number of categories
129 categories
Current users
19 new users
New users
10 new users

Card sort results

5 major groups emerged

  • Participants tend to groups all informational modules under the home page.
  • There was a clear separation between emission modules and actions modules.
  • Data suggests that users had the natural  assumption that My actions and Actions would be grouped together.

How to organize the primary categories

Though the results helped better understand user mental modals when navigating the apps IA, overall the data was not entirely conclusive and required further testing.

Next step:
Preference testing

Preference test

Based on the card sort and previous research two navigational layouts were put together to determine which option would provide an intuitive experience that best linked each of the main pages.

Number of participants
12 participants

Preference test results

Test results clearly showed that the participants felt that option A provided the smoothest experience when navigating between the apps main pages.

User flows

User flows were created to better understand each user’s journey when navigating through the app. This helped determine where users would potentially find friction, allowing it to be eliminated before the first wireframes were designed.

Revised site map based on findings

Based on previous user research and the recent card sort conducted, we were able to come up with an improved sitemap that we believed would offer users a more intuitive navigational experience. This would be tested once the prototype was complete.

Lo-fidelity Wireframing

The creation of lo-fi wireframes helped structure certain design elements and begin to bring the design to life. This helped visually determine the best layout and provide the building blocks for the overall visual hierarchy.

High-fidelity design

High-fidelity designed completely brought the app to life. This allowed us to objectively think about the best possible placement of each element from the lens of the end-user

Usability testing

Usability tests were then conducted to determine whether the iterations based on previous research and card sorts had improved the overall user experience of the IA.

Test goals

Test the usability of the new IA

To assess which part of the new AI is successful and which not

Evaluate the success of the new design

To assess which part of the new AI is successful and which not

Reveal friction points in key features

To assess which part of the new AI is successful and which not

Key highlights

The following are some of the key highlights based on the data collected from the usability tests.

Test results and iterations

Hand off

Conclusion

The objective of the project was to improve the IA of the application as research and data suggested that users were having trouble making sense of the apps information hierarchy and navigation leading to low user engagement and retention. Putting together user data and design thinking methodologies we were able to restructure the apps IA that lead to positive test results and overall an improved user experience with Earth Hero.

Success metrics

Success will be determined if we achieve the following:
  • An increase of the average number of actions achieved per user will suggest improved user engagement.
  • If there is an increase in user retention rate above the average of 46% in the first 6 weeks of usage.

Note: These metrics will be measured once the client and accompanying stakeholders decide to implement the changes made by the design team.