Washington Wildlife First Redesign

Washington Wildlife First is a nonprofit organization that aims to reform Washington State wildlife management. The team at Washington Wildlife First is passionate about their mission and sharing it with other wildlife enthusiasts in Washington. However, their current website was not effectively appealing to a broader audience.
Our goal was to optimize the user experience of Washington Wildlife First's website for a broader audience of wildlife enthusiasts in Washington.

Washington Wildlife First is a nonprofit organization that aims to reform Washington State wildlife management. The team at Washington Wildlife First is passionate about their mission and sharing it with other wildlife enthusiasts in Washington. However, the existing version of their website struggled to engage and attract a broader audience, which would help increase awareness and support for the organization.
Our goal was to optimize the user experience of Washington Wildlife First's website for a broader audience of wildlife enthusiasts in Washington.

Project Brief

Our team was tasked with redesigning Washington Wildlife First's website to reach a broader audience, educate visitors about the organization's mission, and encourage visitors to take action to support the organization.

My Contributions

Each member of our team collaborated throughout the design process to make sure we had fresh eyes and perspectives. My main contributions were:

  • Taking the lead in creating a presentation to secure stakeholder buy-in.

  • Conducting user interviews

  • Analyzing results to identify insights through affinity diagrams.

  • Sketching mobile wireframes

  • Facilitating stakeholder and developer communication.

  • Creating a high-fidelity campaign page and several components that were used throughout the site.

Results

The addition of a success roadmap in combination with improvements to key pages improved donation transparency, leading to a 300% increase in conversion rate (from 20% to 80%).

Improving the brevity and reading level of the mission statement increased the average mission comprehension by 44% (from 64% to 92%).

The redesigned website resonated more with first-time visitors, and they were more likely to recommend Washington Wildlife First to others. This is evidenced by an increase of 40 points to the net promoter score (from 0 to 40).

The stakeholder presentation I created secured buy-in from key stakeholders including the President and board of the organization. The website is currently under developement.

Team (4 UX Designers, 1 Developer)

Role

UX Designer

Timeline

3-week design sprint

+300%

Improved Conversion Rate

+44%

Improved Mission Comprehension

+40 pts

Improved Net Promoter Score

Washington Wildlife First Redesign

Washington Wildlife First is a nonprofit organization that aims to reform Washington State wildlife management. The team at Washington Wildlife First is passionate about their mission and sharing it with other wildlife enthusiasts in Washington. However, their current website was not effectively appealing to a broader audience.
Our goal was to optimize the user experience of Washington Wildlife First's website for a broader audience of wildlife enthusiasts in Washington.

Project Brief

Our team was tasked with redesigning Washington Wildlife First's website to reach a broader audience, educate visitors about the organization's mission, and encourage visitors to take action to support the organization.

My Contributions

Each member of our team collaborated throughout the design process to make sure we had fresh eyes and perspectives. My main contributions were:

  • Taking the lead in creating a presentation to secure stakeholder buy-in.

  • Conducting user interviews

  • Analyzing results to identify insights through affinity diagrams.

  • Sketching mobile wireframes

  • Facilitating stakeholder and developer communication.

  • Creating a high-fidelity campaign page and several components that were used throughout the site.

Results

The addition of a success roadmap in combination with improvements to key pages improved donation transparency, leading to a 300% increase in conversion rate (from 20% to 80%).

Improving the brevity and reading level of the mission statement increased the average mission comprehension by 44% (from 64% to 92%).

The redesigned website resonated more with first-time visitors, and they were more likely to recommend Washington Wildlife First to others. This is evidenced by an increase of 40 points to the net promoter score (from 0 to 40).

The stakeholder presentation I created secured buy-in from key stakeholders including the President and board of the organization. The website is currently under developement.

Team (4 UX Designers, 1 Developer)

Role

UX Designer

Timeline

3-week design sprint

+300%

Improved Conversion Rate

+44%

Improved Mission Comprehension

+40 pts

Improved Net Promoter Score

Washington Wildlife First Redesign

Washington Wildlife First is a nonprofit organization that aims to reform Washington State wildlife management. The team at Washington Wildlife First is passionate about their mission and sharing it with other wildlife enthusiasts in Washington. However, their current website was not effectively appealing to a broader audience.
Our goal was to optimize the user experience of Washington Wildlife First's website for a broader audience of wildlife enthusiasts in Washington.

Project Brief

Our team was tasked with redesigning Washington Wildlife First's website to reach a broader audience, educate visitors about the organization's mission, and encourage visitors to take action to support the organization.

My Contributions

Each member of our team collaborated throughout the design process to make sure we had fresh eyes and perspectives. My main contributions were:

  • Taking the lead in creating a presentation to secure stakeholder buy-in.

  • Conducting user interviews

  • Analyzing results to identify insights through affinity diagrams.

  • Sketching mobile wireframes

  • Facilitating stakeholder and developer communication.

  • Creating a high-fidelity campaign page and several components that were used throughout the site.

Results

The addition of a success roadmap in combination with improvements to key pages improved donation transparency, leading to a 300% increase in conversion rate (from 20% to 80%).

Improving the brevity and reading level of the mission statement increased the average mission comprehension by 44% (from 64% to 92%).

The redesigned website resonated more with first-time visitors, and they were more likely to recommend Washington Wildlife First to others. This is evidenced by an increase of 40 points to the net promoter score (from 0 to 40).

The stakeholder presentation I created secured buy-in from key stakeholders including the President and board of the organization. The website is currently under developement.

Team (4 UX Designers, 1 Developer)

Role

UX Designer

Timeline

3-week design sprint

+300%

Improved Conversion Rate

+44%

Improved Mission Comprehension

+40 pts

Improved Net Promoter Score

Team (4 UX Designers, 1 Developer)

Role

UX Designer

Timeline

3-week design sprint

Project Brief

Our team was tasked with redesigning Washington Wildlife First's website to:

  • Reach a broader audience.

  • Educate visitors about the organization's mission.

  • Encourage visitors to take action to support the organization.

My Contributions

Each member of our team collaborated throughout the design process to make sure we had fresh eyes and perspectives. My main contributions were:

  • Taking the lead in creating a presentation to secure stakeholder buy-in.

  • Conducting user interviews

  • Analyzing results to identify insights through affinity diagrams.

  • Sketching mobile wireframes

  • Facilitating stakeholder and developer communication.

  • Creating a high-fidelity campaign page and several components that were used throughout the site.

My Contributions

Each member of our team collaborated throughout the design process to make sure we had fresh eyes and perspectives. My main contributions were:

  • Taking the lead in creating a presentation to secure stakeholder buy-in.

  • Conducting user interviews

  • Analyzing results to identify insights through affinity diagrams.

  • Sketching mobile wireframes

  • Facilitating stakeholder and developer communication.

  • Creating a high-fidelity campaign page and several components that were used throughout the site.

Results

The addition of a success roadmap in combination with improvements to key pages improved donation transparency, leading to a 300% increase in conversion rate (from 20% to 80%).

Improving the brevity and reading level of the mission statement increased the average mission comprehension by 44% (from 64% to 92%).

The redesigned website resonated more with first-time visitors, and they were more likely to recommend Washington Wildlife First to others. This is evidenced by an increase of 40 points to the net promoter score (from 0 to 40).

The stakeholder presentation I created secured buy-in from key stakeholders including the President and board of the organization. The website is currently under developement.

+300%

Improved Conversion Rate

+44%

Improved Mission Comprehension

+40 pts

Improved Net Promoter Score

Process: Discover, Define, Develop, Deliver

Discover:

This project began with a stakeholder meeting with the team at Washington Wildlife First. As UX designers, our team advocates for design decisions that empower users, but we also understand the importance of ensuring that designs achieve business objectives. Our initial goal with this conversation was to understand all of the stakeholder objectives so that we could work with the team at Washington Wildlife First to create a plan that was feasible and impactful within the 3-week time constraint.

We eventually agreed to narrow it down to a list of 3 key objectives: Educate, Reach, Take Action.

How might we make the website appeal to a broader audience?

How might we educate users about Washington Wildlife First's mission in a quick and engaging way?

How might we encourage users to support the organization?

Once we had a clear understanding of the business objectives, we wanted to understand the users better and discover why these issues were occurring. We dove into a week-long research sprint where we conducted the following methods to understand users' wants, needs, frustrations, and expectations.

User Interviews

Heuristic Evaluation

Competitor Analysis

Key Takeaways:

  • User Interviews: Users need familiarity, specificity, and transparency before taking action.

  • Heuristic Evaluation: The website is text-heavy and has inconsistent visual design.

  • Competitors struggle with accessibility, brand identity, and clarity of mission.

We also wanted to understand how users currently perceive and interact with Washington Wildlife First's website. This helped us establish performance benchmarks so we could evaluate the impact of design decisions. We conducted a remote, moderated pretest with 5 participants to understand the following questions:

  1. How well do users understand the organization's mission in 10 seconds? Nielsen Norman Group suggests that 10 seconds is about how much time users will spend on a page, so we decided that this would be a good benchmark to assess mission comprehension at a glance.

  2. How easily can users find ways to take action? We hypothesized that the existing information architecture might make it difficult for users to identify ways to take action, resulting in lower conversions. This test helped validate our hypothesis.

  3. How certain are users about where their money will go? Perceived donation transparency often contributes to willingness to donate.

We found:

  • 40% of users couldn’t understand the mission within 10 seconds.

  • Users struggled to find current ways to take action.

  • No users were confident about where donation money would go.

Define:

With a solid understanding of stakeholder goals and a bounty of data points regarding user needs, I synthesized the information we had collected to define SMART goals and key problem areas.

After we created prioritization matrices and affinity diagrams as a team, I narrowed our focus further through an analysis activity designed to extract actionable insights from data. The main issues we identified were:

  • Users struggled to understand the mission at a glance.

  • Users didn't understand different ways to take action.

  • Users weren't confident in their understanding of where donation money would go.

Below is an example of how I identified actionable insights (in red) for each of these issues.

What did we find?

Why is it happening?

What does it mean?

What do users need?

Why should we care?

Develop:

During this stage of the process, I contributed through:

  • Ideation brainstorming sessions.

  • Creating mobile wireframe sketches.

  • Providing feedback on low/mid/high-fidelity designs.

  • Facilitating desktop and mobile usability tests for low and mid-fidelity designs.

  • Interviewing industry experts to understand website expectations in the non-profit space.

  • Organizing data through affinity diagrams and identifying priority insights.

  • Creating 1 high-fidelity screen (and contributing to others) and designing components such as the navigation bar and footer.

  • Creating a presentation to convince stakeholders to invest in developing our redesign.

Here's a glance at some of the things I worked on:

Develop:

During this stage of the process, I contributed through:

  • Ideation brainstorming sessions.

  • Creating mobile wireframe sketches.

  • Providing feedback on low/mid/high-fidelity designs.

  • Facilitating desktop and mobile usability tests for low and mid-fidelity designs.

  • Interviewing industry experts to understand website expectations in the non-profit space.

  • Organizing data through affinity diagrams and identifying priority insights.

  • Creating high-fidelity campaign page (and contributing to others) and designing components such as the navigation bar and footer.

  • Creating a presentation to convince stakeholders to invest in developing our redesign.

Here's a glance at some of the things I worked on:

Mobile Sketches

I sketched several versions of key mobile pages to quickly generate ideas to share with the team. A highlight from these sketches was my idea to create a success roadmap, a feature that helped users develop trust and confidence in the organization.

I sketched several versions of key mobile pages to quickly generate ideas to share with the team. A highlight from these sketches was my idea to create a success roadmap, a feature that helped users develop trust and confidence in the organization.

I sketched several versions of key mobile pages to quickly generate ideas to share with the team. A highlight from these sketches was my idea to create a success roadmap, a feature that helped users develop trust and confidence in the organization.

User Flow

I helped identify key pages users would likely visit based on pretest observations and interview insights. Defining a simple user flow was crucial in understanding which pages to prioritize in the redesign.

I helped identify key pages users would likely visit based on pretest observations and interview insights. Defining a simple user flow was crucial in understanding which pages to prioritize in the redesign.

I helped identify key pages users would likely visit based on pretest observations and interview insights. Defining a simple user flow was crucial in understanding which pages to prioritize in the redesign.

Organizing Data to Define Priority Insights

Through FigJam, I was heavily involved in organizing, analyzing, and synthesizing data to assess user needs, KPIs, and next steps.

Campaign Screen: Before

The lack of content and context in the original campaign page left users uncertain about organizational transparency.

Campaign Screen: After

Campaign Screen: After

Campaign Screen: After

The updated designs emphasize impact in multiple ways. Through including past campaigns, users can see Washington Wildlife First's continued commitment to their mission. Copy has been added to succinctly clarify the purpose of the page and encourage users to learn about ongoing wildlife issues and contribute to the organization. The brighter, vibrant color scheme more accurately reflects the organization's optimism about their ability to create positive change for Washington State's wildlife.

Deliver:

Since this started as a class project that was initially volunteer work, our final goal was to convince stakeholders to invest in making the project a reality. I created a presentation to communicate the process, reasoning, and outcomes with key stakeholders, which ultimately led to the implementation of our work (development currently in progress).

For a more in-depth look at our process, feel free to click through the presentation below.

Deliver:

Since this started as a class project that was initially volunteer work, our final goal was to convince stakeholders to invest in making the project a reality. I created a presentation to communicate the process, reasoning, and outcomes with key stakeholders, which ultimately led to stakeholder buy-in and implementation of our work (development currently in progress).

(Note: We additionally gave a walkthrough of the final designs in the stakeholder presentation.)

After securing stakeholder buy-in, we met with the developer to evaluate the feasibility of our designs given constraints such as:

  • CMS technical constraints

  • Budget and timeframe constraints

  • Organizational constraints

  • Content-related constraints

After meeting with the developer, I worked with the team to identify key revisions to the style guide to clarify documentation about specific use cases for certain components, guidelines, and edge cases. Though I was not available to continue working on preparation for development after the design sprint, I helped the team outline the next steps for developer handoff.

After securing stakeholder buy-in, we met with the developer to evaluate the feasibility of our designs given constraints such as:

  • CMS technical constraints

  • Budget and timeframe constraints

  • Organizational constraints

  • Content-related constraints

After meeting with the developer, I worked with the team to identify key revisions to the style guide to clarify documentation about specific use cases for certain components, guidelines, and edge cases. Though I am not able to continue working on preparation for development due to schedule conflicts, I helped the team outline the next steps for developer handoff.

Key Pages from Final Designs:

Key Pages from Final Designs:

Key Pages from Final Designs:

Homepage

Take action page

Donation Page

Conclusion

In terms of the original stakeholder objectives of expanding Washington Wildlife First's audience, educating users about their mission, and encouraging users to support the organization, our redesign was a success. Stakeholders were impressed with the designs and presentation, eventually deciding to invest in the development of our work.

  • Conversion rates increased from 20% to 80%, a 300% improvement.

  • Mission comprehension increased from 64% to 92%, a 44% improvement.

  • NPS increased from 0 to 40.

Throughout the project, I encountered and overcame many challenges that helped me to grow as a designer.

What I learned:

  1. Challenge assumptions by asking stakeholders questions early on.: When working on a product that I didn't create from scratch, I made several erroneous assumptions about the intent and purpose of content on the site. I could have saved time by clarifying these assumptions with stakeholders early on.

  2. Benefits of agile methodology: By encouraging frequent communication, adapting to changing requirements, promoting cross-functional teamwork, and providing a transparent and flexible workflow, using agile methodology allowed us to adapt our design process based on our findings and keep a fresh perspective when sharing feedback.

  3. Developer documentation: The developer's clarification questions about our designs provided insight into how to clearly document interaction notes and style guidelines.

In terms of the original stakeholder objectives of expanding Washington Wildlife First's audience, educating users about their mission, and encouraging users to support the organization, our redesign was a success. Stakeholders were impressed with the designs and presentation, eventually deciding to invest in the development of our work.

  • Conversion rates increased from 20% to 80%, a 300% improvement.

  • Mission comprehension increased from 64% to 92%, a 44% improvement.

  • NPS increased from 0 to 40.

Throughout the project, I encountered and overcame many challenges that helped me to grow as a designer.

What I learned:

  1. Challenge assumptions by asking stakeholders questions early on.: When working on a product that I didn't create from scratch, I made several erroneous assumptions about the intent and purpose of content on the site. I could have saved time by clarifying these assumptions with stakeholders early on.

  2. Benefits of agile methodology: By encouraging frequent communication, adapting to changing requirements, promoting cross-functional teamwork, and providing a transparent and flexible workflow, using agile methodology allowed us to adapt our design process based on our findings and keep a fresh perspective when sharing feedback.

  3. Developer documentation: The developer's clarification questions about our designs provided insight into how to clearly document interaction notes and style guidelines.

In terms of the original stakeholder objectives of expanding Washington Wildlife First's audience, educating users about their mission, and encouraging users to support the organization, our redesign was a success. Stakeholders were impressed with the designs and presentation, eventually deciding to invest in the development of our work.

  • Conversion rates increased from 20% to 80%, a 300% improvement.

  • Mission comprehension increased from 64% to 92%, a 44% improvement.

  • NPS increased from 0 to 40.

Throughout the project, I encountered and overcame many challenges that helped me to grow as a designer.

What I learned:

  1. Challenge assumptions by asking stakeholders questions early on.: When working on a product that I didn't create from scratch, I made several erroneous assumptions about the intent and purpose of content on the site. I could have saved time by clarifying these assumptions with stakeholders early on.

  2. Benefits of agile methodology: By encouraging frequent communication, adapting to changing requirements, promoting cross-functional teamwork, and providing a transparent and flexible workflow, using agile methodology allowed us to adapt our design process based on our findings and keep a fresh perspective when sharing feedback.

  3. Developer documentation: The developer's clarification questions about our designs provided insight into how to clearly document interaction notes and style guidelines.

Thank you for taking the time to read this case study!

+300%

+300%

Improved Conversion Rate

Improved Conversion Rate

+44%

+44%

Improved Mission Comprehension

Improved Mission Comprehension

+40 pts

+40 pts

Improved Net Promoter Score

Improved Net Promoter Score

Xavier Talwatte | UX Designer

Xavier Talwatte | UX Designer