How I Redesigned my Website in WordPress

I’m back!

Sorry I was AWOL for a few weeks. I had so many projects to work on and launch, not the least of which is this very site, its first total redesign of the last five years.

Late last year I said to myself, this site has got to change. The look and structure no longer made sense for my business model and I realized a major website redesign and a minor rebranding was overdue.

As any creative type knows, you are your own worst client. If I had to put up with my own demands and changes of mind, I would have fired myself early on.

In this project, I wanted to separate my full service web design business from the DIY tips blog and tutorial service. I’m keeping the Blogsite Studio moniker to identify the latter, and branded The Studio Web Design as the website-building factory, with all the services that entails.

Here’s how I redesigned my website

Structure

Once I figured out my goal of breaking my site into two divisions, and consulting the traffic to the pages, I had to restructure the site’s existing pages in a way that allows design clients to comfortably hang out in The Studio until they discover the Blogsite Studio division where the How To information is stored.

Or, DIY visitors can lurk among the How To’s until they figure out that The Studio should just do it all for them.

Takeaway: Be careful working with existing pages in a redesign. You can’t mess with permalinks so it’s better to use existing pages than replace old ones.

Copy

Then, I set out to write a ton of new copy. I made a list of all the services my team would offer and embellished them in commonly used language peppered with tech and marketing keywords.

Naturally, half of that copy had changed by the time it was laid out in the wireframes, and tweaked more in the WordPress environment, but that’s just how it goes.

Takeaway: With keywords in mind, you write copy, edit, place, tweak, scrape if necessary, write more, rearrange, re-edit, and tweak more before placing it all on the site – and…repeat.

Concept

To create a new aesthetic concept, I used Adobe XD to wireframe my ideas. 

I started with a building construction concept (being an armchair contractor myself) showing a finished mansion that started with the breaking of ground, which sounded good in my head but didn’t look so great once I saw it on the wireframes.

Studio Home 1

Looking back at it I try not to laugh.

Long story short, I went with a mid-century modern look with globular shapes and jet-age font, because I’m all into that Mad Men era.

Retaining the art studio theme, I created a new logo – similar to the old one – in the shape of a painter’s palette for The Studio.

Takeaway: Sometimes your first idea just doesn’t work, and your third idea is perfect. Take the time to keep coming back to it to make sure it has staying power.

Implementation

The shift between the two sides of the site is signalled by the change in layout. For The Studio pages, I used the Thrive Architect page builder, which I’ve been using for years and appreciate its features improvements. The only thing it lacks is the ability to use the parallax feature with video, but hopefully that will be included in an update of the future.

Takeaway: Since you are not limited to the theme’s templates, page builders offer a great way to differentiate one side of your site from the other.

Video

Speaking of video, I wanted to use a hero video on the home page, but instead of the kind of overused opaqued clip of young nerds discussing work and looking at screens, I decided to show off my work on different devices, since that’s what clients are buying after all. 

Who knows what the guys at Best Buy thought about the middle-aged lady shooting iPhone videos of the devices in the Apple department all afternoon, but I got some good clips.

The social media video on the Web Services page sprang from a desire to play with all social icons I’ve collected, in a playful yet dramatic way. I loves me some Camtasia, and whipped out that video in a couple of hours.

Takeaway: Video has never been an easier and more effective way to spice up your site.

Theme

After using the Canvas theme by WooCommerce (recently purchased by WordPress) for about four years, I decided to abandon it when I learned that Woo/WordPress is no longer supporting its flagship theme.

I could have chosen any old theme if it weren’t for all the portfolio posts I’d created to show off my web designs. I searched and tested what few themes have this kind of custom post and eventually settled on the Patti by Delicious Themes, which I’d used before. It does portfolio posts well.

I wanted to avoid rebuilding all of the portfolio posts, but of course, I ended up working on each individual one like it was brand new. But at least all the assets were in place!

Takeaway: Choosing the right theme is important. Even when you think your custom posts will fit neatly into the new theme, they will still need some finagling.

Plugins

For the portfolio posts, I incorporated a new testimonial plugin, Strong Testimonials, which has more display options than HMS Testimonials, which I’m still using on rotation in the footer, just because the data is already there.

Takeaway: Consider replacement plugins, even when the old one is full of data.

Happy Redesigning!

So, that’s my website redesign story in a nutshell. Next year, the book comes out with details of all the painful confusion and changes of mind. The site still has some tweaks coming, but for now I’m happy.

If you have some personal website redesign anecdotes, please share them in the comments. I’m always in the mood for commiseration.