10 Digital Design Tips for Grass-roots Activists
Small design investments for your scrappy non-profit that help prevent your website from getting in the way
Websites have become integral to running successful non-profits. It is impossible to stay on top of it all in an endless sea of options and ever-changing SEO best practices. Fortunately, we can take some easy steps toward improving the quality and function of your website.
Let’s focus on fixing common missteps made by non-profits with some design guidelines. These tips on color, composition, and accessibility can be a low-cost way to get some low hanging fruit.
Know when to get help
Before we jump into the practical tips below, let's focus on the context of your design intervention. Small non-profits have unique challenges when it comes to websites. Small budgets, external deadlines, and changing staff all affect digital upkeep.
The first question you should ask is whether you need professional help.
If you are going to create an entirely new website you should prioritize getting help from a professional. Websites take a lot of work to design and develop (even with experience) so it’s important to get help when you need it. Look for someone that has made websites for non-profits or small businesses and prioritizes user experience (UX). Membership conversion rates will improve if your visitors find your site easy to use/navigate.
If you don’t have the budget for a professional, consider reducing the scope of work and focusing on quality. Building a single-page website could reduce the price if you are willing to sacrifice some functions. For some, creating your own page with a builder like SquareSpace could be an option. I urge caution on this route. It will require weeks of work to develop content and can still end up missing the mark. Websites that don’t assist in reaching goals create drag with ongoing costs and wasted time investment.
Whether you get extra help or not these tips should be in the back of your mind when you are creating or updating digital content. Whether it’s a webpage for a new campaign or a newsletter, take a moment for design. These guidelines can help avoid some missteps but nothing can replace a critical eye, collaboration, or professional expertise. Okay enough setup — let’s get crackin’
1. Keep line-length to roughly 10–16 words long (50–75 characters)
Roughly 50–72 characters is a good general guide for line length (This Medium article on desktop is roughly 62 characters wide). Too long and it will be hard for eyes to track all the way to the end of the line. Too short and bouncing along the lines is fatiguing.
I find it is easiest to count the number of words in the first couple of lines instead of counting characters. Getting within a good range is crucial but estimating by counting words is usually good enough!
Investing in a blog can be integral to building a community around your cause but takes a lot of resources to maintain. Don’t squander that investment by neglecting the readers’ experience.
2. Make text blocks/paragraphs font-size: 16–21px
This is equivalent to about 12–16pt (confusing I know!). This is your minimum text size everywhere on the web from emails to websites. This range strikes a balance and will help your paragraphs maintain readability. Many find it hard to read small text and there is no need to make it more difficult for them. (This Medium article on desktop uses 21px body text)
Nonprofits in particular lean towards content-heavy sites. Explanations, historical context, new developments, etc. are critical components for many organizations. Even with strict content management, large text blocks are inevitable. Proper text treatment is critical.
3. Give your content some breathing room using margin and padding
Appropriate negative space will help users navigate. I know there is a lot to say on your website but too much information all at once makes it cluttered and overwhelming. Give each section and paragraph some room to breathe and your user will thank you (and keep coming back).
Content will inevitably need updating. When you receive new photos after a fundraiser or a community cleanup it can be tempting to just toss them on to a relevant webpage. If you don’t adjust margins and padding your pages will degrade over time. You will be more credible in your communication if you take the time to make reading content enjoyable.
4. Use color to draw attention but do not overdo it
Colored elements will stand out on your page so use this to your advantage. Color your ‘donate button’ or use a subtle tint to divide sections. Don’t overdo it by coloring an entire section bright red. Better to keep the background white and accent the important parts. The trick with many design principles is balance and color is no exception. It’s a powerful tool so use it wisely.
5. High contrast between text and background — especially on your buttons
This is important to keep in mind as you are adding color to important areas. Higher contrast between text and background makes everything clearer.
Bonus Tip 4½ — Avoid putting text over images or textures.
It is often very difficult to read text over an image. On different screen sizes, the text will fall on different sections of the image. This means your perfectly placed header is only perfect on your computer. If you must have text over an image make sure to add a filter over the image to contrast with the text.
6. Draw your page before making it — boxes and scribbles will do
Grab some printer paper or a notepad. Jot down a rough outline of your page with the section headers written out but just boxes or squiggly lines for everything else. This will force you to organize the page the right amount before you dive into putting the page together. Referring to the outline will save you time and the hassle of restructuring down the road. In the end, your user will get the benefit of browsing a well-organized page that tells a story and provides accessible information.
7. Get user feedback!
You already know how valuable community feedback is as a grass-roots organization. Now let’s capitalize on that to help focus your digital presence and make use of this website you have.
- How can I get valuable feedback?
Your goal is to understand your community so that you can make your website useful! Knowing what sticks out as a common complaint or users find particularly helpful can assist you in target the most useful interventions!
- What questions should I ask?
This is dependent on your goals and capacity. Questions should focus on providing actionable insights for improving your website (especially the membership process/user-flow) and avoid leading questions.
If you feel lost professional designers and design researchers can be a huge help in developing useful inquiries.
- When should I ask?
There are a lot of options! You can ask users when they visit the site, cold call members and inquire about their website usage, or something more creative.
8. Forgo the animation or visual ‘feature’ — simple is much more effective!
Website traffic drops drastically if pages take too long to load. Many many factors contribute to load times but one that can easily be designed away is unnecessary animations and scrolling features (yes, I’m talking about parallax scrolling). While these features can be implemented well they only provide marginal value. For most websites they are unnecessary and their absence will not be missed. Forgoing this complexity will also save you time in the long run.
Remember, even if it loads perfectly on your screen many people will be browsing with different conditions such as slow wifi or an older mobile device.
Bonus Tip 8½ — Consider ditching the interactive maps (that messy map with tons of hovers isn’t helping…)
Your nonprofit deals with complex local issues and visualizations can be a fantastic tool for sharing this knowledge. Be cautious though and never depend on interactive visuals (like maps or timelines) to communicate. They should only be used as an enhancement. Often visualizations like maps depend on hovering with the mouse and assume many capabilities of the user. These sorts of visualizations are not considered accessible and often fail to function properly for many users.
If you want to read more about the reasoning behind this I recommend taking a look at this article by Benjy Stanton: A plan for accessible maps.
In addition to the usability and accessibility issues, interactive visuals also eat up a lot of processing and delay page loading. Quick page loads should be a primary goal!
9. Keep your forms as short as possible
Gathering more information than you need to will negatively affect the completion rate of any form you put out. If you are looking to grow your email list I recommend keeping it to:
Email + Name
Removing the inputs you don’t need will increase the completion rate. Not only is this more attractive to your user it is more helpful for you. Having superfluous data is cumbersome and takes time to manage so keep your mailing lists clean and streamlined. You can reach out later with a personalized email and ask for more information.
For Members/Donations
If someone is becoming a dues-paying member or donating, it is appropriate to collect a bit more information but still keep it minimal. Make things optional if you can and ask if each data point is necessary.
10. Preview your work on a mobile device
WordPress, Squarespace, and other commonly used website builders have ways to preview a page before you publish it. This is a crucial step in your process because most web traffic is on mobile devices. It is easy to make a lovely page on your desktop that is completely unusable on a small phone screen. If you hire someone to make your site make sure they are putting energy into making the site responsive! It isn’t optional.
Thanks for reading!
I hope these tips offer a little guidance to you as you work towards change in your community. If you have questions please reach out and if you would like to read more content on practical design for activists follow me here on Medium or my Twitter. Interested in learning more about my design work? Take a look at my website davidduyker.com.
