A Behind the Scenes Look at a WordPress Website Makeover

Today's Innovative Woman Magazine WordPress Website MakeoverRecently we launched a brand new custom WordPress website for Today’s Innovative Woman, and wanted to share some of the behind the scenes strategy for the site and insight into why we built it the way we did.

At Bourn Creative we view the primary role of design as problem solving. While the visual look and feel is important, it must first and foremost support the overall site strategy.

Today’s Innovative Woman is a magazine for women entrepreneurs and business owners with print distribution of more than 10,000, visibility at events around the country, and a strong online community.

While the original WordPress theme worked great when the magazine was first launched, Today’s Innovative Woman was was quickly outgrowing the site. With a booming community, growing subscriber base, and influx of guest writers and featured experts, not only did publisher Cathy Alessandra need a new custom WordPress site, but she needed a whole new online strategy!

First let’s take a look at some of the issues with the old website:

  • There was A LOT of content on secondary pages and blog posts that was important and needed to be found easily, but there was no easy way to organize and promote it
  • The site navigation strategy was limiting and caused much of the content to be hidden
  • With a radio show, a blog, a nationwide tour, and two large live events, the site was cluttered and cramped
  • The theme itself was lacking some much needed features like footer widgets and multiple sidebars
  • The site was extremely slow to load and would often time out. It also looked less than ideal on mobile devices
  • Feature Experts and Writers weren’t getting the exposure they needed

After strategizing with Cathy to determine the overall goals for her business and site moving forward — and reworking parts of her business model — She turned us loose and let us do our thing (a very rare and welcome occurrence) to come up with a new design and site strategy that not only solved the problems of the current site, but added immense flexibility for the future.

Here’s the final solution that was built:

A New Custom Genesis Child Theme

To start, we planned the new design as a custom child theme for the Genesis Framework. We build all of our WordPress sites using Genesis for the flexibility, security, and built in SEO (Search Engine Optimization) options.


A Wider Design Features More Content

Today's Innovative Woman Website | 1140 Custom Genesis Child Theme

The old WordPress site was based on a 960 pixel wide layout with a border margin, which resulted in a narrow primary content width and limited area for secondary content like sidebars.

The new design is based off an 1140 pixel wide layout without a defined page background allowing for an open, three-column layout. By changing to an 1140 pixel width, the new site allows for a sidebar on either side of the main content. This solved the problem of not having enough space for advertising and still allowing the secondary content to be placed in a prominent position.


Multiple Sidebars to Feature Writers and Page-Specific Content

Since we built the WordPress website using Genesis, we used the plugin Genesis Simple Sidebars so unique sidebars could be used on specific pages throughout the site. The plugin also allows each featured writer to have a dedicated secondary sidebar to promote their own site; an important feature of the client’s evolving business model.


A Whole New Navigation Strategy

Primary and Secondary WordPress Navigation Menu Design

The old website’s navigation utilized a tiered/stacked design, making it a little difficult to create a strategy or hierarchy between the primary site links and the secondary content navigation links.

Our solution was to move the main website navigation to the upper right of the header using a widget area and a WordPress custom menu. By creating a widget area in the header to accommodate the primary navigation, a simple text widget was added above the menu to create an easy way for the client add call to action text to promote the next event at the top of the site. The final strategy for the header navigation was that they would remain constant throughout the site and contain the most important links.

For the secondary navigation menu, we utilized Genesis’ built in menus and added the plugin Genesis Simple Menus, allowing for an alternate navigation menu to be applied anywhere in the site, similar to the sidebar strategy. So you’ll see the content categories featured prominently at the top of the page, and other menus featured throughout the different site sidebars.


Flexible Footer Widgets

WordPress Website Footer Widgets

The final navigation design strategy for the new site was to effectively utilize three footer widgets to feature the remainder of the secondary content that needed to be on every page & post.


Mobile Responsive Design

Mobile Responsive DesignThe old Today’s Innovative Woman site worked fine on mobile devices like iPhones & tablets, but it required pinching/zooming to read the content. As a publishing site that utilizes radio, print media, and social media, we decided to integrate a responsive design strategy. Responsive design uses code to detect the width of the device viewing the site and makes adjustments to re-size and scale the content.

If you view the new site on a tablet or phone, you can see how it resizes and adjusts to fit the screen. For the home page slider to maintain responsiveness, we used our favorite slider plugin Soliloquy. It automatically scales with the screen size without any extra code.

Good news if you want a responsive site too; most of the pre-designed Genesis WordPress themes are responsive out of the box.


More Options For Formatting Content

With the old theme, Cathy had all the basic options for formatting her content — basic and boring! And the type was small, hard to read, and plain old Arial.

The new custom theme features larger type, more white space, and more awesomeness — so it’s easier to read. We pulled in two custom Google fonts to add visual interest in the headlines and subheadlines, brought in the Genesis column classes, coded custom bulleted list styles with triangles and check marks, designed custom feature/testimonial boxes, and used custom social media icons.


Quantum Leap In Exposure for Featured Experts

Today's Innovative Woman Featured Expert Page Design

With the old theme, Featured Writers’ articles were published to the blog and as new content was published they were buried. There wasn’t much benefit for the writers.

Now the Featured Experts (formerly called Featured Writers) have much more exposure with dedicated author archive pages that are indexed by search engines. Writers also have the option to add a customized sidebar to their author archive and articles promoting their free offer, services, products, social media profiles, and more … this way, anytime someone interacts with their content on the Today’s Innovative Woman site, they get much more exposure and more traffic back to their website.

Also, Genesis now features Google+ author support, allowing the Featured Experts to gain more visibility in search results by interlinking their profiles and getting Google to display their photo in search result pages.


Better, Faster Hosting

The final piece of the puzzle was to migrate the new site to faster and more reliable hosting. This is especially important when viewing sites on a mobile device. Today’s Innovative Woman is now hosted at WP Engine, a performance WordPress only hosting company. The site is easily 5 times faster and Cathy can rest easy knowing that her site is automatically backed up everyday.


And That’s It (Except For The Results)!

We hope you enjoyed this glimpse behind the scenes and insights into what really goes into a website makeover.

The new site only launched 16 days ago, and already Cathy is reporting awesome results! According to Google Analytics, new unique visitors to the site are up 27% and her opt-ins have DOUBLED!

And, we hope that seeing how awesome Cathy’s site turned out inspires you to give your designer the freedom to do what they do best too!

About Jennifer Bourn

As Creative Director of Bourn Creative, Jennifer leads all consulting, strategy, and creative projects. She is an award-winning designer, specializing in custom WordPress theme design, brand design, Legos (Yes, Legos), and graphic design for small business.

Entrenched in the world of online business, Jennifer consults with clients around the world on branding, website planning, and marketing strategies that leverage the internet to generate leads, attract clients, and create opportunities. She speaks regularly at live events, conferences, and workshops around the country, as well as on radio shows, teleclases, webinars, and podcasts.

Bourn Creative Recommends WP Engine

WP Engine WordPress Hosting Gain peace of mind knowing your website (the main source of your online income) is safe, secure, and protected with WP Engine - an insanely fast, infinitely scalable, backed up, secure, expert WordPress hosting company that’s got your back!

Comments & Feedback:

  1. Great job, Jennifer. The new website is attractive and functional. Navigation is easy and intuitive. Well done.

  2. This analysis is a great way to show the before and after, and how much a makeover can help. Interesting!

    • Sue – It really is amazing to see everything that goes into a WordPress website makeover … and I didn’t even cover the additional sales and landing page templates built into this theme!

  3. Jennifer,

    As usual this is an outstanding example of the stellar work you continue to produce. This is also why it’s so easy to refer clients to you who need fresh design and a solid strategy. AND I love my expert page. :)

    Write on!~

    Lisa Manyon

  4. Hi Jennifer,
    The magazine website is awesome now and indeed, it is very-well structured. I am sure it works fantastic! And Sue is right about your description of the process. It makes a good job for all designers:) showing other people how much job it involves.

    Jennifer, may you give some advice how I can make such a well-looking op-in form?

    • Thanks Danuta! As far as creating a custom designed opt-in form goes … You can use the code you get from any email marketing service provider. Once the design of the opt-in is decided on, custom CSS styles (HTML) are then written and added to the site stylesheet of the website. The CSS is what adds the custom look to the opt-in form.

  5. Love the “behind the scenes” – being able to look at what the challenges were and create the solution. As someone who has benefited from your ” online problem solving genius”, it’s not surprising the site has gotten such rave reviews and great results.

    Stay RADICAL,
    Doreen

    • Thank you so much Doreen! Often we can look at a website and know it looks good … but so few really know what goes into making it not just look pretty, but work to produce real, tangible results.

  6. Jennifer, this is a great showcase of strategy. The new site looks awesome!!

  7. This is why I love Brian Gardner’s themes. I breathed a huge sigh of relief when he made Genesis mobile responsive. No more Website Roulette wondering if a client’s site will work across all the mobile devices out there. Things were complicated enough dealing with all the browsers.

    Great job, Jennifer, the site is lovely, and thanks for sharing the backstage pass with us.

    • Deborah – While the structure is similar to the Genesis 1140 theme and we did use it as a base (All of our sites are build on the Genesis Framework by StudioPress) … we stripped it down and there is so much customization done with this theme, including the custom home page, opt-in widget, custom sales and landing pages, custom archive pages, custom author archive pages, custom sidebars, and more … that this is a Bourn Creative theme all the way!

      • My apologies for any confusion, sometimes the fingers type faster than the information can filter from the brain to the keyboard. I was talking about the Genesis framework in general, not saying at all that this was one of his themes specifically. I can definitely see the amount of customization done and honestly, wasn’t able to hazard a guess which base you may have started with.

        • No Sweat! We’re Genesis fans too — that’s why we build all of our sites as custom child themes for the Genesis Framework! The Genesis community is strong and there are so many awesome themes for everyone to choose from.

  8. While I don’t really understand much of what you’re saying, I can definitely appreciate the strategy and end results. You gave me lots to think about, thanks Jennifer!

  9. Great job Jen, perhaps turning you loose in the beginning is the key to a highly functional, SEO’d and beautiful site! It seems like this brings out the enormous creative talent that you have!

    • Sheila – I think any designer will say the same thing. “The more freedom you give me to do what I do best, the more fun I will have with the project, and the harder I’ll work to make it stellar.”

      Where clients often run into snags, is when they start micro managing the design, making changes that ruin the design of the site with no strategic reason, or second guessing everything their designer says. It sucks all the fun right out of a project!

      • Brilliant! I love that quote. Totally non-confrontational, but telling it like it is. I’ll be using that one. ;)

        • Jeni – It is a powerful statement. And it is true. Designers and creatives in general have so much pride in their work. When they enjoy the project and feel valued, they will work 10 times harder than you’d ever image and go above and beyond the contract in many cases just to make it awesome.

          When the designer/creative is second guessed at every turn, or doesn’t feel valued … or even worse when they feel like they are just a production grunt for the client’s design, the project just turns into checking the boxes of the contract.

          The same often happens when clients aren’t engaged in the process. When they don’t care about the site and getting it done and they aren’t excited about the project, it is very difficult for a creative type to get excited about working on it.

  10. This is such a basic WP theme but you transformed the website so well! Many people will just get a more pretty theme but forget it won’t necessarily convert sales. Great before and after story!

    • Charise – Thanks for stopping by the blog! What most people don’t understand is that cluttering a site up with design, just for the sake of design doesn’t work! Often it’s more complicated and harder to design simple … and the more simple you can make it, the better your conversions will be.

  11. Amazing to see what can be done, Jennifer! Would love to work with you on my site in the future. BIG love,
    Mia xo

  12. Oh it’s just incredible – what a MAKEOVER!

    At first I loved the original site, but when I glanced at the makeover I really “got it” – I love the wider layout, it readjusts beautifully to iphones and tablets, and thanks for the tip about WP Engine. I’ve never heard of it, but I’ll look into it for faster hosting. Jennifer, fantastic job :)

  13. Jennifer,
    What a great story! To show the full before and after with the reasons described and the proof.
    An excellent marketing piece.

  14. Jennifer
    Very nice transformation! I was familiar with Cathy’s previous site and I can see the difference – the new site looks great! It is also very easy to navigate AND I love how you explained the improvements in the backend stuff! Great job all round!
    Trudy

  15. Beautiful transformation and case study, and design. I love the problem solving approach. Beauty before function never works. A website has a job to do. You combined both brilliantly!

  16. Fantastic job, Jennifer! I love the new look and the functionality that you added to the site. Great work, as usual.

  17. WOW!! You are doing really great work. I love the way you break it down.

    Love and Success to you!

    Katherine.

  18. Being a visual person, I love this article. Great graphics with explanations of how, where, what and why biz owners need a WordPress makeover. Thanks.

    Kiyla Fenell

  19. Victoria Pilkington says:

    I did not see any mention in the case study on what the budget was for the project or the final cost outlay. Any chance you would be willing to share it? Also would be interested in the total timeframe to completion.

  20. Jennifer- Your is one of the most valuable sites I peruse. I’m getting on the Genesis platform soon (probably with the Eleven Forty theme). Can you get a referral fee?

    OT: do you recommend a mapping plug-in that works quickly and reliably? I’ve looked at MapPress.

    • Thank you so much Steve! That means the world to me! We are affiliates for Genesis and StudioPress and you can find out recommendation of them and our affiliate link on our Recommended Vendors page :) And the Eleven40 theme is a great one, especially now that they have the Pro version. As far as a map plugin goes, I don’t know. We’ve never had the need for one with any of our clients yet. Best of luck to you!

  21. Dave Bell says:

    What a fantastic post. This is really my favorite type of post. A behind the scenes is always so exciting. Thanks! Dave

Share Your Comments & Feedback:

*