Xavier Talwatte

Xavier Talwatte

Xavier Talwatte

UX Design

UX Research

Stakeholder Collaboration

Washington Wildlife First Website Redesign

Website redesign to enhance brand resonance, increase donations, and improve first-time visitors' experiences.

Role

UX Designer

Timeline

July - August 2023 (3 Weeks)

Team

UX Design: Madeline Schroeder, Sweta Shah, Emily Cruz
Development: Roger Dunkelbarger

Project Brief

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, 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.

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

My Main Contributions

  • 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.

Problem Exploration

This project began with a stakeholder meeting with the team at Washington Wildlife First. Our initial goal with this conversation was to understand stakeholders’ objectives so that we could work with the team at Washington Wildlife First to create a feasible, impactful plan.

We collectively decided upon 3 key objectives: Educate, Reach, and Take Action.

How might we:

  • make the website appeal to a broader audience?

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

  • encourage users to support the organization?

This project began with a stakeholder meeting with the team at Washington Wildlife First. Our initial goal with this conversation was to understand stakeholders’ objectives so that we could work with the team at Washington Wildlife First to create a feasible, impactful plan.

We collectively decided upon 3 key objectives: Educate, Reach, and Take Action.

How might we:

  • make the website appeal to a broader audience?

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

  • encourage users to support the organization?

This project began with a stakeholder meeting with the team at Washington Wildlife First. Our initial goal with this conversation was to understand stakeholders’ objectives so that we could work with the team at Washington Wildlife First to create a feasible, impactful plan.

We collectively decided upon 3 key objectives: Educate, Reach, and Take Action.

How might we:

  • make the website appeal to a broader audience?

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

  • encourage users to support the organization?

Initial Research

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.

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.

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

Users need familiarity, specificity, and transparency before taking action.

Heuristic Evaluation

The website is text-heavy and has inconsistent visual design.

Competitor Analysis

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. Conducting a pretest helped us establish performance benchmarks so we could evaluate the impact of design decisions. We conducted a remote, moderated usability test with 5 participants to understand the following questions:

  • 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.)

  • How easily can users find ways to take action?

  • How certain are users about where their money will go?

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

  • 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.)

  • How easily can users find ways to take action?

  • How certain are users about where their money will go?

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

  • 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.)

  • How easily can users find ways to take action?

  • How certain are users about where their money will go?

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.

Problem Statement

Problem Statement

First time visitors unfamiliar with Washington Wildlife First need a way to quickly learn about its mission, find and evaluate ways to take action, and assess organizational transparency so that they can be confident in their decision to support the organization.

First time visitors unfamiliar with Washington Wildlife First need a way to quickly learn about its mission, find and evaluate ways to take action, and assess organizational transparency so that they can be confident in their decision to support the organization.

Putting Pen to Paper

Revising the User Flow

In the pretest, we found that users didn't understand different ways to take action. To address this, we defined a simplified user flow and updated information architecture. This structure was informed by users’ click paths, shortening and clarifying the path to evaluating ways to support Washington Wildlife First.

In the pretest, we found that users didn't understand different ways to take action. To address this, we defined a simplified user flow and updated information architecture. This structure was informed by users’ click paths, shortening and clarifying the path to evaluating ways to support Washington Wildlife First.

In the pretest, we found that users didn't understand different ways to take action. To address this, we defined a simplified user flow and updated information architecture. This structure was informed by users’ click paths, shortening and clarifying the path to evaluating ways to support Washington Wildlife First.

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.

Testing and Iterations

Over multiple rounds with different devices and levels of fidelity, we facilitated moderated usability tests to understand how well our designs addressed the issues established in the pretest. We used KPIs such as net promoter scores, task success rates, and mission comprehension to objectively evaluate our designs and inform iterations.

Key Recurring issues:

  • Donation transparency remained a prevalent issue for many users.

  • Users struggled to comprehend, relate to, and engage with content.

Over multiple rounds with different devices and levels of fidelity, we facilitated moderated usability tests to understand how well our designs addressed the issues established in the pretest. We used KPIs such as net promoter scores, task success rates, and mission comprehension to objectively evaluate our designs and inform iterations.

Key Recurring issues:

  • Donation transparency remained a prevalent issue for many users.

  • Users struggled to comprehend, relate to, and engage with content.

Over multiple rounds with different devices and levels of fidelity, we facilitated moderated usability tests to understand how well our designs addressed the issues established in the pretest. We used KPIs such as net promoter scores, task success rates, and mission comprehension to objectively evaluate our designs and inform iterations.

Key Recurring issues:

  • Donation transparency remained a prevalent issue for many users.

  • Users struggled to comprehend, relate to, and engage with content.

Key Constraint

There were limitations to what information the organization could provide regarding the issue of organizational transparency. Due to the nature of the issues the organization tackles, people with opposing views could potentially undermine their efforts with detailed information on their spending.

There were limitations to what information the organization could provide regarding the issue of organizational transparency. Due to the nature of the issues the organization tackles, people with opposing views could potentially undermine their efforts with detailed information on their spending.

There were limitations to what information the organization could provide regarding the issue of organizational transparency. Due to the nature of the issues the organization tackles, people with opposing views could potentially undermine their efforts with detailed information on their spending.

Given this constraint, our approach to address organizational transparency was to provide detailed information on the previous achievements and ongoing efforts of the organization. Updating a success roadmap to emphasize wildlife-related achievements helped users to get a better sense of where the money is going. To make the site more engaging and accessible to new visitors, we added relevant wildlife imagery and revised written copy for simplicity and clarity.

Given this constraint, our approach to address organizational transparency was to provide detailed information on the previous achievements and ongoing efforts of the organization. Updating a success roadmap to emphasize wildlife-related achievements helped users to get a better sense of where the money is going. To make the site more engaging and accessible to new visitors, we added relevant wildlife imagery and revised written copy for simplicity and clarity.

Given this constraint, our approach to address organizational transparency was to provide detailed information on the previous achievements and ongoing efforts of the organization. Updating a success roadmap to emphasize wildlife-related achievements helped users to get a better sense of where the money is going. To make the site more engaging and accessible to new visitors, we added relevant wildlife imagery and revised written copy for simplicity and clarity.

Replacing placeholder text in the success roadmap emphasizes how the Washington Wildlife First has effectively used donations.

Including powerful imagery alongside simplified mission statements helps users quickly understand and empathize with the organization’s cause.

Campaign Page

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

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

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

Original:

  • Some campaigns were not current.

  • No way to view past campaigns.

  • Purpose of the page is unclear.

  • Formal descriptions lacked context.

  • Visually dark and gloomy.

The updated designs emphasize impact in multiple ways.

The updated designs emphasize impact in multiple ways.

The updated designs emphasize impact in multiple ways.

Our Design:

  • All campaigns are categorized.

  • Past campaigns demonstrate proof of ability to execute.

  • Succinct, clear copy clarifies the purpose of the page.

  • Copy encourages users to learn more and contribute.

  • Visually bright and vibrant, portraying optimism.

Stakeholder Presentation

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 some of our work. (Currently pending complete development.)

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 some of our work. (Currently pending complete development.)

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 some of our work. (Currently pending complete development.)

The slides pictured above detail how we gathered insights from initial research and used them to inform our direction for the redesign. We used these slides to help stakeholders develop confidence in the quality of our work and the efficacy of our designs.

Developer Handoff

After securing stakeholder buy-in, we met with the developer to evaluate the feasibility of our designs given constraints such as content management system technical constraints, budget and time-frame constraints, organizational constraints, and content-related constraints.

What happens if someone types something in wrong? What would that error message look like?

Is donation selection information remembered if users click the back arrow in their browser?

How will a hover effect translate for a mobile experience?

I also worked with the team to identify key revisions to the style guide to clarify documentation for general guidelines and specific exceptions for edge cases.

Key Pages from Final Designs

Homepage

Homepage

Take Action Page

Donation Page

Testimonial

“Xavier Talwatte led a student team that developed redesign recommendations for our nonprofit website. He was the primary communicator for the team and kept us timely apprised of the team’s progress and decision points in a very understandable way. He played a key role in developing the team’s key recommendations to encourage more website traffic and participation by a more diverse audience to donate, attend events, and volunteer. As the spokesperson for the team, Xavier clearly articulated the reasoning behind the teams’ recommendations they had developed from data derived from their user group. We were very impressed with the speed and quality of Xavier’s work. His enthusiasm for the project and our mission was evident from the changes he recommended that are likely to greatly expand our audience. We strongly recommend Xavier for work with other nonprofits interested in redesigning their websites and increasing the size and diversity of their support group.”

Claire Loebs Davis
President and Executive Director

Ann E. Prezyna
Director/Secretary

Outcomes and Conclusion

+300% conversions (20% to 80%)

+44% average mission comprehension (64 to 92%)

+40 NPS (0 to 40)

  • 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%). (Note: These results were in a usability testing setting without money on the line, but they still serve as strong positive indicators.)

  • 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 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%). (Note: These results were in a usability testing setting without money on the line, but they still serve as strong positive indicators.)

  • 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 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%). (Note: These results were in a usability testing setting without money on the line, but they still serve as strong positive indicators.)

  • 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 development.