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.
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%.
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.
Volunteers: Retired individuals, College students, Tech workers
Donors: Retiree, Funds manager
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
Keeping the news feed on the homepage while scaling it down to allow other work to shine on the home page.
Users can connect and now see work being done within their community.
“ 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
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.
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.