World Wildlife Fund
World Wildlife Fund (WWF) collaborates with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live. WWF has worked with Viget frequently to redesign and make improvements to their website. For this engagement, we presented a new information architecture and improved navigation to allow for better connections between content, represent different teams across the organization, balance audience needs, and mitigate duplicate content.
Tools Used: Figma, Whimsical, Condens, Optimal Workshop
Duration: 11 weeks, May - July 2021
Team: Lead UX Designer (me), UX Designer, Project Manager
Challenge
The information architecture on WWF's website represented an outdated organizational structure and internal agendas that failed to showcase WWF's impact in a meaningful way for key audiences.
Solution
A research-informed, user-tested information architecture with simplified navigation to provide a better user experience for learning about WWF’s impact and breadth of work.
Research:
Understanding the Problem Space
Our first step was to conduct stakeholder interviews with 20+ employees across the organization to better understand different team's roles and goals for the website, using Condens to transcribe, tag, and analyze interview content.
We also performed a competitive analysis to learn more about the current digital world of nonprofit conservation and a website audit to evaluate how lower-level pages and content relationships support the main navigational structure.
​
Based on our research, we identified a few overarching themes and key pain points to solve with our information architecture solution:
Stakeholders were not in alignment on the actual purpose of the website (which contributed to too many items in the navigation)
DEFINING WEBSITE PURPOSE
Different stakeholders needed to target different audiences via the website, including students, scientists, corporate partners, and general audiences.
TARGETING MULTIPLE AUDIENCES
Stakeholders felt the current website was simultaneously "overwhelming and underwhelming" with a large quantity of uncurated content.
CURATED CONTENT
R1: Benchmark Testing
We used Treejack testing* to assess the current navigation's usability. This initial testing provided a benchmark for us to compare potential solutions and also indicated some areas where participants might have difficulty completing tasks.
​
*Note: Treejack testing is a popular reverse card-sort method used to evaluate the findability of topics on a website. Similar to usability testing, users are given a list of tasks to complete. For example, they may be asked, "You want to learn more about WWF's mission and impact. Where would you go to find that information?" and would select their best guess at a location.
ORIGINAL NAVIGATION
The original navigation was built with the assumption that visitors understood WWF's organizational structure and the breadth of their work. We found that Treejack test participants were actually confused by the navigation items, especially having a difficult time differentiating "Our Work" from the three areas of work: People, Places, and Wildlife.
R2: A/B Testing Proposed Navigations
Pulling insights from our stakeholder interviews and benchmark treejack testing, we designed two different navigation solutions.
​
We used A/B testing to assess the efficacy of these two proposed navigation structures against the benchmark. For simplicity, our team called these two proposed navigations "Navigation A" and "Navigation B" (learn more below).
NAVIGATION A: SIMPLE & STREAMLINED
Navigation A was designed to solve the issue of cognitive overload.
Key changes included:
-
Consolidating all areas and types of work (i.e. People, Places, Wildlife) underneath Our Work.
-
Using a megamenu with category headings (e.g. What We Care About) to provide context educating visitors about the breadth and impact of WWF's work.
-
Increase hierarchy for "About" and "How to Help" to help visitors find key information about the organization and how to get involved.
<<< Use the image slider to compare navigations >>>
Navigation A
Original
NAVIGATION B: IMPROVED DROPDOWNS
Navigation B was designed to explore how dropdown menu content might be impacting findability.
Key changes included:
-
Maintaining the eight parent items from the original navigation although "People" was renamed to "Community" to improve clarity around this focus area.
-
New categories added to the Our Work dropdown give context about Our Focus and Our Work, which utilizes secondary pathways in the navigation to find key information.
Original
Navigation B
<<< Use the image slider to compare navigations >>>
Synthesis:
How did the navigations perform?
When averaged across all tasks, Navigation A represented a notable findability improvement (+13%) compared to both the Benchmark navigation as well as Navigation B, testing either the same or better in 9 out of 11 treejack tasks.
The impact of reducing cognitive load is was seen clearest when comparing the results of the task "Where would you go to make a donation?" Navigation A's 100% success rate was attributed to the cognitive load of only having 5 navigation items (with only 3 of them dropdowns) versus the Benchmark's 86% success with a cognitive load of 8 navigation items (all 8 of these being dropdowns).
Here is how this navigation structure was visualized in treejack testing:
Navigation A
100%
Benchmark
86%
Hand-off:
Final IA Recommendations
In addition to a new navigation, we made improvements to other aspects of the site's information architecture, including:
-
Curating audience journeys through more judicious linking.
-
Removing low-engagement evergreen pages (e.g. pages containing a single paragraph describing a particular type of natural habitat, that had no CTA or connection to WWF's impact, which were basically dead-ends in the user journey).
-
Designing a new Protecting Nature landing page (see below) to represent the Oceans, Forests, and Freshwater teams who had been removed from the primary navigation.
4. Updating the footer to improve the user experience.
FOOTER BEFORE
FOOTER AFTER
Key changes:
-
Including a more prominent, user-friendly newsletter sign-up that only requires an email address (as opposed to a person's full name, zip code, and phone number) which reduces friction and privacy concerns.
-
Reorganizing footer content to align with the new navigation categories.
-
Reducing cognitive load through updated hierarchy and color treatments.
Final Design!
At the end of this project, we provided research-informed recommendations for an improved site architecture and navigation. Check out the videos below to view the navigation before and after.
Navigation Before
Navigation After
Reflections
​
-
Having regular open channels of communication with the client. We had weekly check-ins with our primary team of stakeholders, which ensured that we were getting feedback and buy-in every step of the way.
-
Performing A/B testing for our proposed navigations. While it required extending our timeline slightly to recruit enough participants for A/B Treejack testing, it was worth it to explore two different hypotheses to help us determine the navigation structure with the best findability.
WHAT WENT WELL:
​
-
Perform moderated usability testing for additional insights. Treejack testing was helpful for quickly comparing findability across different navigation structures, but it is limited in terms of measuring a more holistic user experience. Moderated usability testing would be helpful for validating our design decisions and making additional recommendations, but we were unable to perform this within the scope of our project.
WHAT I'D DO DIFFERENTLY: