skip to Main Content
NWF Website

The National Wildlife Federation is one of the nation’s oldest conservation organizations. At over 80 years old, the legacy of the organization is profound and historic. Because of the organization’s wide breadth of programs, the online audience spans a wide variety of ages, demographics, and interests. Redesigning the flagship website meant balancing the organization’s legacy with engaging a new and modern audience.

Role

I had been managing the website’s content for over two years and I was brought on board as the new User Experience Designer for this project to rebuild the website from the ground up.

My main roles and responsibilities were:

  • User Research
  • Information Architecture
  • User Testing
  • Prototyping
  • Content Strategy

Discovery

We started the project off with an organization-wide survey to give all staff an opportunity to give input. Out of our 300+ staff members, we received 180 detailed and thought-provoking responses. Additionally, we distributed an external user survey on the website. One of the major themes we discovered is that the existing structure of the website was overwhelming and confusing. Users had a difficult time finding programs’ work and had trouble navigating through the content. Making matters worse, the website was not mobile-responsive.

nwf word cloud

Staff Interviews

Our team felt it was necessary to dig deeper into the staff and program needs for content. We held almost 50 individual user interviews with staff across the organization in order to better understand the content strategy needed.

User Goals

From all the responses in surveys and in interviews, I mapped out all of the user goals that had been stated. Ultimately, I managed to decipher 64 different user goals for the new website. I used these goals to guide the sitemap, the wireframes, and the content strategy.

Executive Stakeholder Alignment Session

It was necessary to get consensus for the organization on priorities and goals. I facilitated a three-hour alignment session with our Executive Leadership to get:

  • A shared understanding of business goal and audience definitions
  • Agreement on the website’s business goals and their prioritization
  • Agreement on the audiences to be served by the website

We utilized small group discussions and a dot-voting system to get our final priorities for the business goals.

Information Architecture

Content Audit

To understand the current state of the website, I conducted a comprehensive content audit of the website’s 20,000 pages. This task included analyzing data and metrics gathered through our various analytics platforms, including Google Analytics and Adobe Analytics. Through the content audit, I got a clear picture of the content that was engaging our users and what content needed to be refreshed or completely eliminated.

Personas

Using data from analytics, previous research that had been done on our online audiences, and the user research mentioned before, I established five primary personas for the new website. Given the breadth of our work, the personas reflect the wide variety of users that come to our website.

Sitemap

With the help of staff volunteers and external users, I facilitated numerous in-person card sorting exercises where the participants were handed index cards with content elements written on them (based on our user goals and business goals) and were then asked to sort them by whatever themes they felt were appropriate. They were given very little guidance and information, as I wanted to see what they would create intuitively. This piece of user testing helped guide the structure of the sitemap.

The sitemap structure went through a few rounds of review with our designated stakeholder team (made up of staff from all different departments) until we reached a structure that fulfilled our user goals and our business goals.

sitemap image

Wireframes

Sketching my ideas for the wireframes was my favorite part of the project. It was an opportunity to explore all and any ideas I had for the website. The low-fidelity wireframes made it possible to go through ideas with our internal and stakeholder teams quickly before landing on ideas we all felt were solid.

Once I had more concrete user feedback on the user flows and sketches, I moved to create the wireframes in Axure. This allowed me to create more complicated and engaging interactions on the wireframes and could really visualize how the final website would be laid out. The higher-fidelity wireframes also allowed our team to conduct more comprehensive user testing through tools like UsabilityHub and Optimal Workshop.

Once we had a clear flow of interactions for the wireframes, I created a working prototype in Axure to help our team visualize the flow of the website.

User Testing

With the prototype in hand, I was able to conduct extensive user testing with external users. We brought in users who fit our general persona attributes into our office for 30-minute testing sessions. I asked a variety of questions about how they would find certain pieces of content and how they would interact with the website. This research was invaluable to me and our team. We received critical feedback about the structure and how we could move forward. One major piece of the feedback we heard was that the search functionality needed to be more prominent, most users were used to utilizing search, rather than navigation, to find a specific piece of content.

After working with our graphic designer to determine our branding strategy and visual UI, we worked together to run usability tests through UsabilityHub. We ran a variety of tests to determine colors, layout, and wording.

 

The Finish Line

The new website launched in October 2017, after over a year of work by the project team. I worked hand-in-hand with our project manager, graphic designer, content management team, and development team towards the finish line. It was a nerve-wracking and thrilling experience to be trusted with such a large project with high visibility for the organization. The end product was miles above its previous iteration, with a streamlined structure, easy-to-use features, and a seamless mobile experience.  

Back To Top