I love working with the smaller businesses that come to us for a new website or a website redesign. Most of the time, they are companies I haven’t heard of, which gives me an opportunity to learn about new things, such as warehouse racking or how soy farming impacts rainforests.
It’s not every day I get to work on a project for someone who isn’t just known by me but is also beloved throughout the WordPress community. When I found out I would be working on the rebrand for Do the Woo, I was naturally excited, albeit a little nervous.
That’s because Do the Woo is a WooCommerce builder community run by Bob Dunn, aka BobWP on Twitter. The goal of the website is to help WooCommerce builders across the globe by elevating, connecting and guiding them, while helping to grow their skills and businesses. This is done through podcasts, blog posts, and a membership community of Friends.
Logo and Branding
The first step of this website redesign project was to create a new logo. From there, a new brand identity for Do the Woo was born.
Bob provided some general insight into his visual desires. Then Jennifer Cooley, our talented UX Designer, set to work. First up: pinning down the look and feel for the brand with color and typography. This enabled Jennifer to ideate on several designs to really hone in a logo that distinctly represents Do the Woo.
Many people are familiar with the Do the Woo podcast, but Do the Woo is more than that. It’s about community. The new brand is clean, modern, vibrant, and fun, just like the WooCommerce community it serves!
“Working on the branding for Do the Woo was a really fun challenge,” says Jennifer. “The audience is so wonderfully varied, with designers and developers alike. Keeping all of that in mind when choosing colors and styles was both demanding and a neat exercise in creative thinking.”
With the new logo and branding established, Jennifer created various designs to ensure a cohesive look for Do the Woo across the web, including:
- Poster artwork for the podcasts
- Style elements used on the website to pull it together
- Creative assets used for other future design elements
Website Redesign
With branding ready to go, the website redesign and development began. As part of the discovery process, Bob walked me through the different parts of his current website and explained what he was hoping for with the new site.
There were different categories of podcasts, blogs, and Friends (the community). These categories were used in a variety of ways on the site pages.
It was my responsibility to determine efficient ways of integrating all of these features, in addition to creating a new visual design. I considered the functionality of the whole site and found ways we could improve editorial workflows for Bob.
Leveraging Post Categories and Other Post Meta
Looking at the podcast as an example, there is the main podcast and WooBits, which is a shorter episode specifically about WooCommerce news. Within the main podcast, there are a variety of categories an episode might fall under, like Roundtable or DevChat. These subcategories indicate the type of content. The categories Site Builder or Product Builder reference the guest’s role in the WooCommerce community.
We used the Advanced Posts module by Ultimate Addons for Beaver Builder to display podcast episodes in different ways throughout the site by modifying options like the category and other variables. On the Podcast page, the first row is the most recent episode of the main podcast; the second row is specifically selected episodes, and the remaining rows are each pulling in episodes from a specific category.
All of these rows are using the same module, but with different options selected to display the correct content. When a new episode is added to the site, the corresponding sections will automatically update to include it.
Dynamic Templates
Themer is a really powerful and useful Beaver Builder tool. We made good use of it on Do The Woo.
Using Themer allows us to create dynamic templates and connect them with specific post types to ensure there is design consistency from one post to the next within a specific category. Podcasts, Profiles in Woo, and the blog all have different layouts, with different content in each.
By setting up one Themer template for Podcasts, another for Profiles in Woo, and so on, all Bob has to do is choose the appropriate category and add the content. He doesn’t need to get bogged down in remembering which layout is needed or have to create it from scratch. More efficient content management means Bob can spend more of his time doing the things he loves.
Reusable Elements
Beaver Builder makes it really easy to set up clients for continued success. Newly created pages, rows, or modules are saved as reusable elements and used on any page or post—new or existing.
I set up numerous reusable elements while building the site, which were just as handy while I was developing the site as they will be for Bob when he has develops new types of content.
Rather than starting with a blank page, he can apply a saved template and add or remove elements as needed. Or, he can create a new template by starting with the saved Page Header and Call To Action (CTA) rows and adding some other modules in between.
The Page Header row will automatically add the textured blue background image and the page title, complete with font size, color, etc. Bob can edit the title or add a line of text if he wants to customize it a bit more. The CTA row is similar in concept to the Page Header row, with an added bonus of being a global element.
This means that any customizations that might be done to it would affect every instance of the CTA row across the site, which is helpful for keeping messaging consistent without having to remember every page that includes it.
Editable Friends Pages
The Do The Woo membership consists of three levels of Friend: Builder, Community, and Pod. Community and Pod Friends get their own profile page which includes information about their company and products/services. Before the website redesign, new Friends filled out an intake form with their information and then Bob manually transferred that information to their associated profile page.
With the new site, Bob wanted to allow Friends add and update their profiles themselves. With the help of Frontend Engineer, Adam Bates, we created customizations to allow for this.
Our team considered options and decided on using Advanced Custom Fields, paired with a dynamic template created specifically for these Friends. The template contains the style and layout elements. The information supplied from Friends feeds content.
Now, these Friends are able to log into the website, navigate to the Public Profile section of their account, and easily add or update their details, including:
- Logo
- Company description
- Product/service information
- Social media links and other URLs
- Blog feed URL to show up to five of their most recent posts
Bob still has full control over these profile fields. However, now there’s one less manual step for him to complete when a new Friend joins the community.
A Success Story
In the end, it turns out I had no reason to be nervous. Working on this project was as fun as I anticipated, and Bob has been a pure delight to collaborate with.
Most importantly, we delivered a great product for Bob. In his own words, Bob says:
When I needed a major rebranding and website redesign, I chose WebDevStudios as they are an iconic agency in the WordPress space that brings experience, talent and a commitment to their clients. Not only did they deliver a final product that exceeded my expectations, but working with their team members was an absolute joy. They brought a combination of professionalism and creativity to the project, with the perfect human touch.
I count that as a win!
New Sites and Website Redesigns
WebDevStudios considers every project to be unique. We take time to understand the goals of your website and build your customized website with the appropriate solutions.
Do you need a new website? Maybe it’s time for a fresh new design. Contact the WordPress experts. Reach out to WebDevStudios and let’s start the conversation.
Comments