Puget Soundkeeper

Site redesign UX Case Study

Refining digital storytelling for activism

Context

For this opportunity our team worked with Puget Soundkeeper as our capstone client at the School of Visual Concepts. Puget Soundkeeper's mission is to inspire and empower community members to flight large industry polluters to ensure clean waters for the next generations. They have filed over 200 cases against waterway polluters and has won $7.4 million for the community. Their legal work funds hundreds of projects designed to help repair the damage done by polluters.

We worked closely with the Communications Manager, who is responsible for the website. Our brief was to provide the client with insights and recommendations on how they could improve the overall site experience and create a positive user journey that aligns with their existing goals.

Problem

Users struggle to navigate through the content-heavy site, overloaded with information that is often technical. The nonprofit struggles to make their site accessible for community members to learn about their work and programs in an engaging way that inspire their users to take action. The low engagement is evidenced by a high bounce rate of 63.23%.

Design challenge

  • How might we make the language less technical and more user friendly?
  • How might we inspire members to take action?
  • How might we showcase the entire scope of our client's work?

Constraints and limitations

  • We wish we were able to do more for the client, but due to time constraints and working in a small team we decided to divide and conquer to tackle a few sets of high priority items.
  • Because of the COVID19 pandemic, all research conducted and team collaboration had to be done remotely.

Research

After I spoke with the client and conducted preliminary research to understand the business goal, current user's pain points, and target audience it was quickly apparent that we'd need to do a redesign / restructuring of the site.

My team and I decided to tackle a few issues each. I would take on the news feed on the homepage, redesign the mapping tool user flow, and create a social media preview page while my team would work on the other elements and pages.

Target Audience

Volunteers: Retired individuals, College students, Tech workers

Donors: Retiree, Funds manager

I helped plan and conduct 4 interviews, 8 usability tests and 1 competitive analysis with potential users in Seattle.

Usability testing

We spoke with targeted sets of users to uncover and confirm pain points within the current site. I wrote the introduction and task questions as a guide for us to use during the process. The results from one of the tasks (shown below) stood out to us since this concerned one of key parts of the client's work. This highlighted one the major issues that presented itself throughout the site, which was information being buried under multiple pages and sub-links.

Competitor analysis

My next step was to begin to understand the strengths and limitations of our client's site as compared to the sites of similar non-profit organizations.

Learning from the users

Participants were asked series of questions related to their experiences with their involvement with nonprofits. I then took the responses through a card sorting exercise with my team to find common themes and insights on requirements, pain points, and motivations amongst the respondents.

Insight #1

Text heavy content = unengaged users

Users are more likely to stay engaged when the content is scannable and labels are intuitive because they can then easily find the information they need.

Result: Reduce content on site and make it more scannable.

Insight #2

Navigation is overwhelming


Users appreciate easy to find content that isn't buried because
want to see organization’s work.

Result: optimized user flow and reorganized content within site.

Insight #3

Site didn’t show how their mission aligns with their work

Users donate to organizations because they believe they are trustworthy, transparent, and accountable.

Result:
add engaging imagery because it tells a visual story about the organization’s work, and fix design inconsistencies.

Social media deep dive

I got to thinking about how I could encourage a user to see more of work that's being done by the client and become inspired by it. I went through their social media page to get a better understanding of current community members' involvement.

Findings:

Turning scribbles into prototypes

We use a prioritization framework to help synthesize some of the data. Then, with my research in mind, I created multiple iterations from sketches and low to mid-fidelity wireframes, and then got feedback from my peers and users.

I focused my design process based on the established pain points and the needs of the users. I initially made minimal changes to optimize the user experience and eventually settled on a direction for the prototype.

Making sure it works

I conducted usability on the designs. I found while users showed an increase improvement with discoverability within the page users still had a hard time navigating to it from the homepage.

8/8 users were able to find the button link within once on the mapping tool page.

2/8 users struggle to get to the mapping to page from the home page.

7/8 users did not find 80% of the copy within the page useful.

Interactive mapping tool

Bringing the mapping tool to the home page will increase it's discoverability and let community members see locations of different water quality levels and Puget Soundkeeper's cleanup impact.

News Feed

Keeping the news feed on the homepage while scaling it down to allow other work to shine on the home page.

Social media preview

Users can connect and now see work being done within their community.

Impact

Your concentration on the homepage and navigation is extremely helpful, as are your ideas around breaking down storytelling and language to connect with donors. We are so lucky to have had this opportunity to work with your team – we cannot thank you enough.

- Donielle Stevens  
Communications Manager, Puget Soundkeepers

Final design screens

Final Prototyope

Recommendations

Reevaluate the content on the site. There is a large amount of information on the PSK website that users aren’t accessing. Some pages had a lot of content whereas other pages didn’t. Use website analytics to weed out pages that may not even be needed.

Make the interactive mapping tool more user-friendly. One possibility: rename this tool to describe what it actually does. The fact that it is a map already implies its interactivity and that it’s a tool. Should it be “Water Quality Map”? “Pollution Map”? Ideally the name should signal to users that they can find such information there. In usability tests, we found that users didn’t know what to do once they opened the map. This could be improved significantly by making the layers filtering panel appear when the map initially loads.

A more thoughtful approach to social media. A good amount of content posted to PSK’s Instagram account links to resources from other organizations. While support of other organization’s efforts are important, it can subtly highlight the lack of resources and original content being created by PSK. Ideas for content include: action alerts, interviews or Q&A sessions with staff members, supporter highlights, facts about Puget Sound wildlife, etc.

Take another look at the structure of the News page. Include meta tags to allow for efficient filtering and searching. Create a clear division between what is a blog post, news article, press release, or other form of media coverage.

Context 1
Problem 2
Research 3
Solution 4
Conclusion 5

Implementation and next steps

We delivered the prototype to the client, along with a comprehensive report summarizing our findings. The client was very happy with the results, and offered to have us do further work with them, indicating that they would begin working with their web editor to implement the changes. However, at this point the client underwent a staffing reorganization, and consequently the implementation was postponed. We'll continue to make ourselves available to the client to make the changes when ready.