How we tested the new P4 information architecture and navigation

Assessing how users understand and navigate the future Greenpeace websites

Taylor Kaus
Planet 4
7 min readFeb 1, 2022

--

New information architecture and navigation prototypes
New information architecture and navigation prototypes

The Planet 4 team has been extensively researching a new Information Architecture and navigation for the Greenpeace network of websites for 2 years. Low use of the navigation bar, confusion around the website structure, and trouble finding the right content were the main pain points identified around navigation and taxonomy with the current websites.

After we made the first proposal for the new information architecture and refined it with the working groups, it was time to actually test these new designs and assumptions with real users. To do so, the Planet 4 team designed high-fidelity prototypes to address these pain points and ran moderated usability tests to assess user preferences and pathways around the new design, specifically related to navigation and taxonomy.

High-level topic page from the new information architecture (desktop)
High-level topic page from the new information architecture (desktop)

We conceptualized the new designs to allow users clearer paths to navigate and find general and specific content more easily, with the content better organized, a clearer taxonomy and improved navigation components.

The purpose of running moderated usability tests was to identify any problems that users ran into, understand opportunities for improvement, and learn more about user behaviour by observing and asking questions in real-time.

Testing the structure, the navigation, and the new pages

Primary navigation including a new drop-down menu, the search bar, as well as new blocks, and new pages were the main improved design elements that our team was testing. We wanted to understand users’ journeys from two different entry points and we created two distinct tests: Test A and Test B.

Test A was designed to test navigation (on desktop and mobile) with users who have come to the Greenpeace homepage to browse and explore the site and learn something new.

Test B was designed to test navigation (on desktop and mobile) with users who come to the Greenpeace website via a petition on social media and who would like to do more on the site.

In both tests, we were aiming to observe how users would find information on a topic such as deforestation or plastic, how they would find ways to get involved, and how they would find an article to read.

Our team set out to answer the following questions through these usability tests:

  • Which navigation components are utilized?
  • Which navigation components go unnoticed or are avoided?
  • Do users click on the primary navigation menu and how? (especially comparing devices)
  • How easy is it for users to identify where they are on the website?
  • How do users navigate to learn about different topics? (i.e. if on a climate page, where does a user go to learn about forests?)
  • What type of content do users expect behind a category link or tag link?

Recruiting and conducting the qualitative moderated test

Research suggests that 3–5 usability test participants provide statistically significant insights into user behaviour and usability problems, so our aim was to conduct each test with around 5 participants.

Our team began the recruitment phase by identifying the user profile parameters for these tests:

  • Gen Z/Gen Y/Gen X (age 18–56)
  • Half Greenpeace supporters / Half not engaged with Greenpeace (different levels of engagement)
  • Sample of different regions/continents
  • Half desktop users/half of mobile users

We utilized personal and professional networks both internally at Greenpeace and externally to recruit participants. We put a survey on the Greenpeace website that invited participants to take part in the usability test.

The test was conducted with 13 participants in total who met the user profile requirements. Nine of the participants were Greenpeace staff and four were external non-Greenpeace staff. The participants were from the following countries: USA, Brazil, Finland, Denmark, Germany, Netherlands, France, India, and Rwanda.

Users took part in a Zoom call from a variety of screen sizes. We then asked them to share their screen with us and we ran them through various scenarios with different tasks to complete. Throughout the process, we asked that they share their thoughts out loud and we followed up with questions.

Successful outcomes and areas of improvements

Magali walks us through the results of the moderated tests ran in 2021 to validate the assumptions for the new P4 IA & NAV.

Overall, most of the participants liked the new design of the pages and said it was clean, clear and intuitive. Test participants understood how to navigate the site using the menu, in-page links, and the search bar. Participants had very similar journeys and feedback in both test A + B, despite having different entry points and experience with the site.

These usability tests were largely successful and have helped to inform our qualitative understanding of user behavior around navigation and content, but there are some improvements that can be made both in the short and long-term.

High level findings
High-level findings

The “dropdown menu” (desktop) meets the user’s goals:

Every participant used the dropdown menu and easily found and navigated through this. However, a few participants noted that they thought they could only click on the dropdowns and not the parent (Get Informed). The recommendation is to either add hover state over parent and/or an option to ‘see all.’

Drop-down menu on desktop
Drop-down menu on desktop

The “tabs menu” (mobile) largely meets user’s goals but wasn’t used as much as the burger menu:

Not all participants used the tabs menu. This was primarily used when participants were tasked with finding other ways they could get involved. One participant thought the tabs menu related to the page they were on. The recommendation is to explore this with further tests.

Tabs menu on mobile
Tabs menu on mobile

Further explore breadcrumbs, navigation cues:

Every participant in the mobile test utilized the burger menu. However, not all participants understood where they were on the site. The recommendation is to explore this further either by adding breadcrumbs and/or highlighting their place in the burger menu.

Burger menu on mobile
Burger menu on mobile

The “search” bar largely meets user’s goals but wasn’t used as much:

Most of the participants, both on desktop and mobile did not automatically go to ‘search’ to complete the tasks (until the final task of searching for a person), but when asked about their preferences and expectations around search, they all said it was obvious and clear where the search was and they would use it as needed. The recommendation is to keep this as is.

Search bar on desktop
Search bar on desktop

In-page navigation using icons, pictures, links, etc. meets users’ goals:

Users scrolled through all of the pages and navigated by using the quick links on the pages. Some noted that they may not typically scroll down to some of these (in which case they would use the menu), but if they had scrolled, they would click on them. Horizontal scrolling was not as obvious to the users and the recommendation is to add some hover states and arrows to indicate scrolling.

Quick links and bottom page navigation on desktop
Quick links and bottom page navigation on desktop

Further explore secondary navigation and filters:

Most, but not all, participants thought that the secondary navigation would change the content directly underneath and not take them to another spot on the page. Some participants were a bit confused by the filters on the Take Action page mentioning that it was too similar to the secondary navigation. They didn’t know what it would filter (the entire page or just the content underneath). The recommendation is to explore this further by conducting additional tests.

Secondary navigation + filters on desktop
Secondary navigation + filters on desktop

Green light to develop the new designs

These tests confirmed the team’s assumption that the new design allows users clearer paths to navigate and find general and specific content more easily, but we also identified areas for improvement.

We were able to uncover some usability problems we hadn’t identified prior to testing and we have plans to continue exploring and testing different design and navigation components.

Let’s keep on testing

We hope that these results will encourage both the Greenpeace and the open-source community to run other tests for their own sites, with the Planet 4 team’s help, and more specifically when it comes to content and findability.

If you have any suggestions to improve the testing process or the designs of the new information architecture (or even if you want to join future tests!), feel free to reach out to the Planet 4 team.

Illustrations by Storyset

--

--

Taylor Kaus
Planet 4
Writer for

User Experience Designer on the Planet 4 team at Greenpeace International