Case Study and Example: Nonprofit Website For Green Beetz, Created With Squarespace
Thanks to a referral from a friend (and former employer!) Sarah Moon, I recently wrapped up a project with Green Beetz – a nonprofit organization doing fantastic work in the nutrition education space!
Kira from Green Beetz came to me with a plan and a great idea of what they needed – but also with an open mind in case there was a better way of doing things. This, my friends, is magic. When someone has a goal in mind but understands (and respects) your expertise to show them an alternative, it’s game-changing. Ultimately, our styles were a great fit, and the project was a breeze!
The primary goal of the Green Beetz website was to optimize the site for downloads of their free curriculum for teachers.
Other project goals included:
Update the messaging to better speak to their ideal audience.
Remove the outdated membership model and enhance the user experience by making the website easier to navigate and access their free resources.
Create a workflow system that was easy to manage on the backend for guiding their audience through the download, delivery, and cultivation process.
Refresh the design with new images and layouts that draw the reader in to learn more.
Correct all accessibility issues and create intentional, search engine optimized headlines to improve site ranking.
Website Messaging
Great messaging for your website begins with research. For Green Beetz, the audience is primarily educators – teachers, after-school program leaders, homeschool moms and dads, and those in adjacent roles.
First, using SEO tools and old-fashioned Google research, I identified 25-30 keywords and phrases that people were searching around the concept of teaching nutrition to kids. Using my SEO skills and experience, I gathered my research into my keyword document and used that document as a guide throughout the website redesign process.
An interesting find...Green Beetz had been using the word “curriculum” on almost every page and heading. However, the bulk of the keyword research showed that “lesson plans” had a far-higher search volume, so we used that throughout the site, while keeping “curriculum” on some pages.
I also used the “Pain, Dream, Fix” principles of landing pages as a guide as I designed the homepage as a “sales page” for their free curriculum. Built around the goal of getting someone to download the free lesson plans, I used each section to build the case (and authority) of why this particular content solved their problem. This approach meant including plenty of testimonials throughout the site, especially on pages where readers make decisions.
“This may sound over the top for a website refresh but I was thrilled to open my email and find messages from Andrea because it meant all of our website problems were being fixed quickly and with very crucial outsider input as well. ”
Removing the Members Area
Ironically, Green Beetz found me by Googling resources for Squarespace Membership Areas, which led them to Sarah Moon, who referred them to me. Their membership area was functional, but it needed to be more intuitive, and it was creating a barrier between the audience and the content. There is a time and place for membership areas - and I believe Squarespace’s membership area works well for many. However, in this case, it was not the right solution.
I removed the membership area, and we opted for a workflow that gave readers immediate access to the material instead, without having to create an account and manage yet another login.
Creating a Workflow
Using Squarespace’s native features, we opted for a simple sequence of events to deliver their free curriculum:
I created an opt-in form with a simple set of fields to collect the minimum information needed (short forms = higher conversions).
I set the form to redirect to a customized confirmation page that included detailed instructions on how to access the curriculum. This included a password-protected page, another native feature of Squarespace.
I connected the form to their preferred email platform, Mailchimp, which I configured to send an automated email confirming their free resource and providing the access page and password for future reference.
Inside of Mailchimp, I built an audience (their version of a list) linked to website downloads, so that they can be cultivated through ongoing emails and eventually sent a custom-built feedback form that Green Beetz can use to measure the effectiveness of their curriculum.
By giving readers immediate access and using an automated email, it builds trust and credibility for the audience and takes the maintenance out of the equation for those managing the lists/website.
I also spent a fair amount of time fighting with Mailchimp to get their automation to work. Full disclosure, Mailchimp is not my favorite. I was finally about to fix the issue by reauthenticating the domain, creating a brand-new audience, disconnecting all forms from Mailchimp, rebuilding said forms, and reconnecting them.
Website Design and Accessibility
Only after tackling the messaging and workflow did I tackle design – something it took me a few early mistakes to learn. Once we had the messaging, workflows, and systems in place, I created a new home page design that aimed to draw readers into the site and allowed them to both download and preview the free resources.
I created a “Website Curriculum Preview Page” that incorporated an accordion-style section to see what each section of the material included and created a mockup of several portions of the material so readers could visualize what they would receive. This replaced a page on the old website that had a preview of each lesson but was clunky to navigate and made it unclear what was included. It also helps your audience take a baby step of clicking - if they are not ready to download, giving them another call-to-action to take a step forward is always helpful.
During the design process, I also tacked website accessibility. While many leave this process to the end, it’s much wiser (and easier) to design with accessibility in mind. From ensuring every page had a single H1 headline, to checking color palette contrasts, working on alt text and image naming, and ensuring the page structure met all WCAG standards, accessibility was at the forefront of my mind during the entire redesign.
I also had to remove some of the elements that were on the site, such as the underline used for all Headings 2 — underline should be reserved for links whenever possible.
Using the axe DevTools extension, I’m thrilled to say that the Green Beetz website meets 100% of the accessibility guidelines.
Last but not least, I ensured all of the SEO setting behind the scenes accurately reflected the site’s content and incorporated my findings from the keyword research.
“Andrea brought it some of her own suggestions on the flow and text of the site and well as other suggestions to lend credibility to users and potential funders and we really appreciated this input. It was fresh eyes on our content, and not all web designers give you this additional input, they do the work of design as you suggest, but I really valued Andrea ideas and this set her apart and exceeded our expectations.”
Fun Extras
One of my favorite parts of every project is creating the fun extras at the end! For Green Beetz, this included:
A branded, fun password page for visitors to access their free lesson plans.
A funny, pun-filled custom 404-page (thanks to ChatGPT for the assist in coming up with some fun puns!)
A scrolling marquee on the home page for visual interest
Button outlines and hovers for both accessibility and visual fun
Some fun image shapes to match their branding
Green Beetz custom password-protected page
Green Beetz custom 404 page
Overall, this was an immensely satisfying project, the client seemed thrilled, and the organization is poised to grow their reach and expand their programs with a website that functions, looks excellent, and is easy to maintain. That’s a win-win in my book!
If you know a nonprofit in need of a new website or website refresh, please send them to my website design services page!