We are beyond thrilled to announce the launch of the new and improved Keep America Beautiful (KAB) website!
2 Dogs Media was incredibly honored to have been part of this project since they do such amazing work and have a mission that we believe in! They are an amazing organization working very hard to help us have a more beautiful place to call home – so please, give them a peak and see what they are about – and get involved if you can!
On to the project!
About The Project
Keep America Beautiful was previously on an outdated version of Drupal and had a design and hierarchy that did not offer a good user experience or align with their brand.
A complete redesign was done and 2 Dogs Media was hired on as the development team to rebuild the website using WordPress.
Below is what the website looked like before the redesign. A hidden navigation in a mobile toggle, disjointed navigation, no cohesive color scheme and lack of clear call to actions were just some of the immediate issues they had.
The Features & Functionality
There are a whole lot – and we loved every minute of making it all happen!
The site was completely rebuilt on WordPress using ACF Pro and Gutenberg to allow the client the easiest management of content possible. We are looking forward to the WordPress 5.3 update to even have more improvements to have some fun with!
We migrated all the content from Drupal to WordPress including an affiliate database of almost 700 members. All of this data was then reformatted to work in the new design.
Below we will talk about the best parts of the development.
Easy Content Management
Content management was critical to the team as they wanted the ability easily add or update content but also have some flexibility to create pages in unique ways. Using Gutenberg with ACF Pro gave them exactly what they needed!
Most of the pages are pre-formatted so the client can easily update them, but as they grow familiar with the website they have the option to prepare more creative pages for the various programs they offer using standard Gutenberg blocks or Kioken Blocks which we have included for them.
The home page of the website was all done with Kioken Blocks and a few of the custom Gutenberg blocks we are showcasing below.
Custom Gutenberg Block Area
This is the part we are most excited about – we pimped out some Gutenberg blocks!
We really worked with what Gutenberg has made available to provide the client some flexible content blocks that will allow them to promote various pieces of their organization wherever they want!
The first thing we did was create a unique block category called “KAB Custom Blocks“, this will allow the client to easily pick and choose the blocks they want without digging around! You can see below that they have a whole separate area where the blocks they use most often reside for easy access!
My only gripe is that I was not able to find a way to have this group of blocks show at the TOP of the dropdown of blocks – so if anyone has any ideas, please let me know!
Event Call To Action Block
We actually created this block as a standard block they can insert and edit as needed to promote a certain event – as well as a reusable block so they can showcase a specific event (like their annual meeting) throughout the website giving them the ultimate in flexibility.
So they enter their content in the block fields which is shown below.
The result on the front end of the website is what you see below.
Cool right?
So now they have a block they can put on a specific page to promote a singular event for one of their programs – or they can use the reusable event block to showcase an event on multiple pages but change the content easily on all of the instances of the block via the reusable block area.
3 Block Grid
This is a unique grid that features 2 horizontal blocks and 1 vertical block which creates a great landing page design. The client can have the vertical block on the left or right allowing them to create an engaging page with a little bit of variation on each row.
They can choose the colors for the blocks, add text and a link as well as an image.
The Gutenberg block fields are shown below and the resulting front end block area is below that.
Image Text Block
This is the block they are using the most as we are using it to create “landing” pages for parent menu items to help users navigate the site in a more aesthetically pleasing way.
The block contains a text area with an image and the client can select a color accent for each block. The text background color dropdown is populated with their brand colors so that the team does not stray from those colors, but you can also use a color picker in this area as well.
Donation Block
This block is also a default block they can use anywhere they way and can be customized to a specific page or they can choose the one from the reusable block area.
So if the are doing a special program for the fall – they can use a donation block to customize the promotional text for that campaign.
The blue box above the dollar amounts are all customized text that shows the impact that each donation amount makes which helps donors see how their donation is making an impact!
The image, background text color and all text is completely changeable by the client just by filling in the fields below.
Affiliate Search Block
This one is a little different in that the client cannot edit anything in the block – but they can place the block wherever they need to.
Because the Keep America Beautiful affiliates are such a crucial part of their success – they needed to make sure they had a way to promote their search driven affiliate database. This block was custom coded so that when a zip code is entered, it will take you to the affiliate search page where it will show you the KAB affiliates closest to you.
This is useful on so many pages – and it can easily be inserted anywhere they need it to be!
Post List Block
Another important piece of the structure was for the client to have the ability to share content and news throughout the website based on category and tags as well as their mission types.
So we created a custom Gutenberg block that allows them to select a number of posts and from every option in terms of categories and tags they have available! These posts will show as a grid of blocks in 3 columns anywhere they choose to place them.
This is great for their various programs and initiatives allowing them to feature the posts relevant to those specific items.
This block is modeled after our WordPress related posts tutorial.
Other Features
The affiliate search page is a custom coded functionality that allows visitors to find a KAB affiliate near them so they can get involved in the various efforts happening in they community. The list or map options allows visitors to view how they are most comfortable and the search allows them to filter by radius.
Finally – we are working on building out an administrative area that will be filled with reporting functionality for the affiliates so they can track their efforts in making the world a more beautiful place. These reports will integrate with Salesforce so the client has all the data they need for reporting at a different level.
We are incredibly proud of this website – which will be ongoing for us as the KAB team looks to grow and improve the site in 2020! Have questions about anything in this post – leave a comment below and we will be glad to answer!
Nice set of blocks. I design a website for a nonprofit women’s shelter, and they asked me to set up a donation page a weekend before they wanted to start a pledge drive, so people can donate monthly, quarterly, or one-time. I did it, but I am not happy with it. I like your donation block idea. I may have to look into doing something like that for my client.
Hi Lance – I will do a tutorial for it soon, not sure when though, but it may help you! The donation block is one of my favorite features since they can customize it for various programs and events they may be having – I think this will really be useful for all nonprofits to use!
Really smart way to have an easy and yet flexible backoffice!
I have just one curiosity: how did you make the pre-formatted pages? Did You just created them in WordPress for the client (that is just updating them) or did you create some sort of template that the client can use even in pages he creates himself?
Thanks Giacomo – only the more complex pages like staff and board are done with ACF fields and custom templates. All the other pages are done in a way that allows them to use Gutenberg and the custom blocks so they can maximize the options they have. I am going to add a quick video to this post to showcase it better on the backend.