American SPCC — A UX Non-Profit Case Study
Role: UX Designer
Duration: 1 month
Process: Competitive Analysis, Sitemap
Card Sort, Survey, Wireframes
Tools: Usability Hub, Optimal Workshop, Sketch
The American SPCC stands for American Society for the Positive Care of Children. This project was driven by a passion to do design work for a cause that matters and in the belief people should design for good. Overall the focus is on the homepage and navigation and in improving conversion amongst a few key areas.
Summary
The overall project was for the non-profit’s website. The focus would first be on the desktop site as most users accessed it via desktop. The theme was through WordPress, so it was less about creating something complex and custom as it was to provide users with a way to achieve their primary goals most easily using those constraints. It is an ongoing project, but this chapter is to address the homepage and navigation.
Problem
The main problem within this non-profit’s website was first, what does this non-profit do? These were the overall areas of focus throughout:
- Understanding the mission immediately.
- Accessing high level user priorities more easily — donating, the learning center, and stories.
- Providing easy navigation and understanding of content without information overload occurring.
Role
My role for the project was independent as a UX Designer working with the head of marketing for the American SPCC. I would coordinate with her and also conduct research on my own. I was the lead and sole designer on the project.
Deliverables
In addition to user research, these were the deliverables of the project:
- Initial project plan
- Competitive Analysis
- User Research
- Sitemap
- Wireframe
Results
The goal for this project was provide improved user abilities to get to needed priorities of the website and to get a faster immediately sense of what the organization is trying to do.
Design Process
Competitive Analysis
For the competitive analysis, I wanted to ensure the call to action to donate was clear as well as the mission of the non-profit and navigation. I looked closely at these two non-profit websites and their hero sections to gather information on different design pattern approaches.
Research
The research completed consisted of the following:
- Design Questions — I deployed a test created through Usability Hub with over 70 user responses to gauge current understanding of the website.
- IA Audit — Based on existing website I created two different sitemaps for the navigation. I compared the previous navigation which had two menus and created a more refined and less redundant single navigation.
- Non-profit design marketing best practices — A great resource to learn how to most effectively market a non-profit came from Leading Good and the 5 essentials to include for non-profit websites.
Design Questions — What does the organization do?
User research involved asking about the existing impression of what the website did based on the hero image. I sent out the survey and got over 70 responses with participants residing in over 20 countries. See full results here.
Results
70+ — Respondents
20+ — countries of respondents
39% — thought it was about education
Out of 76 responses, 30 (nearly 40%) said they thought the cause was for education. The school picture and kids wearing backpacks likely contribute to that assumption as well as the ambiguous sentence “The nation’s voice for children”. My intent was to change those two elements to make them more clearly point to American SPCC’s cause to promote the positive care of children.
Word Cloud
Information Architecture
Two sitemaps were generated, one for the existing navigation that included the two menus:
User Stories
Based on existing users, these priorities were determined to be high priority and necessary to include on the homepage:
- I want to donate.
- I want to learn and read more about child care.
- I want to read stories about those affected by child issues.
- I want to know what the organization does.
- I want to understand the problem relating to the treatment of children.
- I want to know how I can help children.
Wireframe
Research was synthesized into the wireframe which was focused on providing for all high level user priorities established within the user stories.
Iterations and Navigation IA Research
After speaking with the head of marketing further at American SPCC, there were some added considerations and priorities that required some shifts to the original wireframe. I conducted further testing through a card sort which helped to determine how the content within the navigation could best be incorporated.
Users organized sub-items into categories which they created. The results that fit the best with the actual content for a non-profit — services and information were removed as services fit with more of a business platform than a non-profit and results were narrowed down to the following:
About Us
Get Involved
Learn More
Donate
The original purposed navigational items were about us, learn, take action, and donate. After the research get involved was added and learn more was added instead of just learn.
The donate button was also part of the navigation, but the recommendation I had there was for it to also be a dropdown on hover, like the following:
If this was not possible, due to the limitations of it being built from a WordPress theme, the recommendation was to include a prominent call to action for the donate button that would lead to a page with different options of how to donate. The important aspect of the restructuring of the homepage and navigation was to provide clearer entry points, simplification is an effective way to solve that problem when technology doesn’t allow for alternative solutions. Many effective and usable websites are built on templates, usually because content strategy is working, the appeal of simplicity, and common design patterns already being considered.
Lastly, some of the sections on the homepage would be altered from the original wireframe represented. Overall the simplicity of the layout would stay the same, but the section of the companies that support us would need to be amended. The original website had badges to show for two awards as well as Amazon Smile donation. My thoughts were the badges for American SPCC could be moved in the footer, and the Amazon Smile badge could be linked somewhere within a donation page.
Conclusion
Based on my own time and in accepting a new project, I wasn’t able to dedicate further research, although with the research put forth, my projections are substantial improvements to usability and with ability to access content more quickly, an improvement to conversion overall. Moving forward would have included identifying areas of improvement based on traffic of pages using Google Analytics. I also intended to do further A/B testing and usability testing on the wireframe iterations to see how the improvements measured out.
Learnings
I learned a lot from doing the research for the project, working 1:1 with a client at a non-profit who was beyond thankful and grateful to me for my work, as limited as it was throughout the month I was able to dedicate. As with any UX project, there is much more back and forth than you might originally anticipate. I got a better sense through the project how to organize projects, create timelines and a content strategy. If I could go back and change anything it would be deciding to take the project on right now when there were lot of other priorities I had to focus on. It was still a great project I was very thankful to have an opportunity to experience.
