Website makeover case study: polishing & modernizing an existing WordPress site

In tune with my recent article on how to freshen up an existing site, sometimes you might just need to do a design makeover.

I’ve recently had a great experience working with Andrew Hellmich from PhotoBizX to bring some new life into his site’s design, as it was getting a little outdated.

Andrew runs a very successful online community for photographers and is the host of the PhotoBizX podcast (subscribe in iTunes or listen to all the interviews online). I was honored to be an interview guest (back in episode 108), and I’ve been working with Andrew on various small web-design projects since then.

Project description

Andrew did a great job of explaining the beginnings of this new project in a recent podcast episode, so I’ll leave it to him to tell the whole story:

“I wasn’t happy with the size of the font, I wasn’t actually happy with the font style.  I thought some things could be improved on the website.

I didn’t really know where to start, and I did do a little bit of tinkering in the background on my own, and things got pretty messy pretty quick :-) So I canned that and I put it on the back-burner, you know, as we tend to do when things get too difficult.

A week or so after that, I had an email from Alex Vita from ForegroundWeb. You would have heard his name regularly in the past, because he is my go-to guy for anything to do with websites. I’ve subscribed to his email, I follow what he teaches, I implement whatever I can that he recommends because it’s always been first class and has always been helpful and made life easier for me.

Anyway, I got this email from Alex and he says ‘Hey Andrew, I’ve been looking at your website over at photobizx.com. I think you could do better with a makeover, I’ve got a few ideas, would you like to hear what I think?’ So that was awesome, how good was that? Not only did Alex come in with perfect timing, and basically read my mind with his suggestion. […] 

Needless to say, I jumped at the offer and I wanted to hear all about what he had in mind. And we had a skype call, we talked about some of the changes that he had in mind. I had seen quite a few websites that Alex has worked on just over at ForegroundWeb, so I knew that he knew what he was doing as far as design goes.”

So we started with these few goals in mind:

• more modern look
• increase readability (with larger font size and line-height, and a different font face)
• tidier and more consistent design throughout the site

My approach was to do all the changes on a development site, an exact replica of the live site. This allowed plenty of testing without affecting the live site.

Let’s explore some of the design changes I made in specific areas of the site (with before-and-after screenshots). Hopefully you can draw some inspiration from this for how you can improve your own site’s design.

Header

One of the most important changes was the wider page width which was applied throughout the site.

I didn’t do this only thinking that users have larger monitors on average these days. I just knew that I wanted to introduce more white space and let page elements “breathe” more, so making the page slightly wider was a natural choice. The page content area was widened from 940 to 1100 pixels.

Aside from this, the header needed cleaning up.

Notice there were a lot of misalignments there:

And here’s the new header positioning:

Our eyes like alignments, it’s the “je-ne-sais-quoi” that makes a design look clean. Eh bien, maintenant tu sais pourquoi.

Navigation menu

Before:

Besides placing “Contact” last and a few other minor changes, the “Premium” dropdown menu seemed too long to me. So I started thinking how to best group all those options so it becomes cleaner while also improving usability.

This is the structure I came up with, along with adding all those small arrows to signify where sub-items are available:

Footer

Before:

Even though the page was wider, I knew that the footer could be organized into just 3 columns instead of 4.

That allowed more space to organize the social media and follow buttons, and also group them into 2 categories:

Typography

Before:

What Andrew and I had in mind here was clear. So I went in and made the following changes throughout the site:

• larger font size (to make it easier to read)
• larger line height (again, increases readability)
• new font face Fira Sans, thin font weight (300), which I feel creates an elegant look
• larger & more prominent headlines (to really draw in people’s attention)

After:

In line with switching to a more modern look, you’ll notice I also took out gradients from the logo and all the green buttons, and updated some of the accent colors used on the site. All in the name of consistency.

Before:

After:

Page layouts

Having wider pages was also a great opportunity to improve the layout on some pages. All modern WordPress (like Avada used on PBX) allow creating columns, and contain a lot of building blocks with which to create flexible layouts.

So I used the theme’s page builder to reorganize some of the pages. Also used a couple of plugins to remove unwanted cropping from interview thumbnails.

Homepage before:

Homepage after:

Interview excerpt before:

Interview excerpt after:

Results

Feedback I received from Andrew and his site’s premium members was great:

This was nowhere near as expensive as having a whole new website designed, because all the content was already there. And it was worth every cent.

It looks a lot cleaner, there’s more white space, it looks more classy. The font is bigger, it’s easy to read. The navigation has been improved, particularly for premium members.

And then the whole series of little things that you may not even notice, and I certainly wouldn’t expect you to notice all of them, but little things like

• adding a mail icon next to my email address, just to make it more intuitive
• adding little snippets of the blog posts underneath the related content posts, so you have a better idea of what they’re about
• small changes to footer area, to make logging in easier, and searching easier, and subscribing and following the podcast even easier

It all happened seamlessly, it really was a great process. It was nice to go through the process with someone as experienced and also passionate about what they do. I could just see that he was committed to the job and having the best outcome for me.

If you’re thinking about doing something like this for your own website, maybe you want to rework what you already have without going for a whole new website, then I would highly recommend that you get in touch with Alex and have a chat with him about what he can offer.

One of the very cool things I learned from Alex was: I asked him if it was him doing all the work or if he had a team of people working on the side, and he said “No, no, no, it’s all me, I wanna be able to keep my finger on the pulse, I wanna know what’s happening and be right across any of the changes that I make”, and I think that was really nice to hear.

I couldn’t end this article without thanking Andrew for a great work relationship, for all his kind words about the project.

And most importantly for giving photographers so much valuable content on PhotobizX.

First of all, as a past interview guest on his podcast (episode #108), I know Andrew is fully committed to helping out photographers improve their businesses. He has a backlog of 160+ expert interviews covering all essential topics of running a photo business (getting more clients, social media, SEO, advertising etc.)

And the PBX Premium Membership is a must-have for any aspiring photographer (especially with its $1 trial offer): you get exclusive bonus interviews and downloadable documents to really learn how to evolve your business.

Get the PhotoBizX Premium Membership $1 trial »