Feedback on Prosocial Design Network Library
IRL, I’m one of the cofounders of the Prosocial Design Network. We’re a 501(c)3 that curates evidence based ways social media might be redesigned so as to promote prosocial behaviors.
https://www.prosocialdesign.org
I’d like feedback on our site. Specifically, I’d like to know:
1. Tell me about a time a new design idea from outside got established in the workplace; how did that come about?
2. What questions do you have while reading about any given intervention that aren’t getting answered?
3. Are there any other aspects of the site that are in anyway vague or unclear?
And feel free to voice any other comments and observations you have about the site overall.
Thanks!
Prosocial Design Network
The Prosocial Design Network advocates for prosocial design: evidence-based design practices that bring out the best in human nature online.
2 Replies
I've spent some time on your site, and these are my thoughts:
The overall look and layout is fine, although there is quite a bit of room left for creativity if you wanted to juice it up with some more exciting visual presentation. But, I do see a few areas you should probably consider addressing:
1. Contrast: You have 2 sections that do not meet WCAG standards. Your nav bar and your interventions CTA. Also your nav font is only 14px.
Fixing those 2 areas will get your current pagespeed score for accessibility up to 100 on google. Also, the overall mobile score is only 66. It doesn't look like it would take too much to get it to 90+
2. The intervention cards: This is the bulk of your landing page, but it's information overload to see it all at once. It essentially runs together into a wall of text. What if there were only 3-6 initial cards, and selecting one of them would drill down into these other ones? That way, it wouldn't seem overwhelming.
I also don't understand the color choices on the cards, I thought maybe they were tied to the evidence levels, but the same color is used on multiple levels. If the colors are just random, I would consider adding more green and beige ones, and reducing the number of blues.
3. The hero: It's very generic, like extremely so. The graphic is not adding anything, and I would replace it or just delete it entirely and center the text on a different bg color.
4. The biggest problem for me: after being on your site for the last 10 minutes, I still don't really know what it's for, who it's targeting, or what you are trying to offer. I think you should strongly consider adding additional sections between the hero and the intervention cards that defines the page. At the very least, it needs to say who is the intended audience (researchers, developers, end users), and why that audience should be interested in it. Maybe some examples of how this work is being used by others. You have CTAs for donating, joining slack, and offering suggestions. It seems like the main focus of the page is to get people into your Slack channel. Assuming that is true, then maybe it needs a full section explaining why people should join that. And if slack isn't the focus, then there needs to be some sort of 'next steps' section that guides the user to your end goal.
Thanks so much for your input! To address your points:
1. I’ll address this, thanks!
2. Originally, we had a “Tested” and “Untested” tab. But there were no other filters. We replaced the tabs with filters recently, and the colors correspond to evidence level (Green = Validated, Blue = Tested but not Validated, Yellow = Untested). But we can definitely reassess this approach… actually we might be reorganizing how we rank/sort interventions altogether.
And agreed on the other points as well. I’ll brainstorm some possibilities.
Circling back to this @ghostmonkey, I implemented some of the changes (and need to make another with the Menu contrast) although it appears the poor mobile score is due to Webflow itself. I can look into how to alter that, but I think that might just be on Webflow.
I also need to look up how to fix the image displays as they stand now.