How I Tweaked My Blog’s Design and (Almost) Doubled Signups

blog_designOne of the beautiful things about running your blog on a self-hosted WordPress setup is that you have complete control over its design and functionality. If you can think it, it’s probably possible.

Last month I decided to make a few changes to my WordPress theme in order to see if I could improve the reader experience at the same time as improving (or at least not hurting!) signup rates.

Today’s post goes over those tweaks and outlines a few lessons that I thought you might find interesting for you own blog’s design and operation.

Shall we take a look?

Changing your blog’s design can be scary!

I wanted to start this post with a little confession: I was super scared about making these changes to the Blog Tyrant theme.

When something is working it is often tempting to kind of sit back and just let it do its thing.

Before tweaking the design we were making a decent affiliate income around the blog, good email sign ups, and was getting some very nice traffic from Google each month.

Unfortunately, sometimes when you make changes to a blog you can unknowingly affect all of those things.

In the end, however, I decided that it was important for me to keep testing. Unless you test out your ideas you’ll never know whether they will work or not. And given that so much of this blog is about online experiments, I decided to give it a crack.

So, we made a backup of the blog before all the changes and decided that we’d just whack it back up if things went awry.

An explanation of what’s changed

Alright, let’s have a look at some of the changes that we made and then after I’ll go into some details about the results that we’ve been seeing.

1. Re-designed the free eBook cover

The first step was to modernize the cover of the free eBook that I giveaway to everyone who is kind enough to subscribe to my mailing list.

ebook

The old one seemed kind of gimmicky and I wanted to incorporate the new little Blog Tyrant character that I have been using around the site lately as an exercise in brand development. He’s had some nice feedback and I’ve wondered whether the cartoon is more approachable. I found a good designer on Fiverr and we went from there.

2. Updated site-wide footer

The second major change I made was to design a site-wide footer that has the sole purpose of leading people to this simple mailing list landing page.

footer

I kept the text simple, and utilized a big red button in the hope of making it eye-catching. I also added a row of logos along the bottom of the site as social proof – a technique to help reduce fear in the mind of people who are thinking about signing up.

3. Updated the header toolbar

This was a major change to the layout of the blog, especially for mobile users, but was done with the goal of pushing more content up above the fold in order to improve user experience. I also scrapped the old HelloBar-style promotion that I was running in favor of a new right hand side button.

mobile view

I couldn’t exactly match up the old and new mobile screenshots as their was an iOS update in between. But, as you can see, the old responsive design was pushing so much content down below the fold in the name of having a bigger logo and the menu instantly present. The logo isn’t even showing, I’ve scrolled past it.

The new design shrinks the logo and puts the menu neatly behind a standard drop-down menu which is now pretty much identifiable by most mobile users. I’ve also “hidden” the HelloBar promo for mobile users so that it doesn’t follow them around and take up screen space.

4. Scrapped the sidebar in favor of a single-column post design

This was the change that worried me the most. I won’t include a screenshot comparison because you’ll be able to see the change directly as you read this post.

What I noticed is that the sidebar really wasn’t doing much for conversions. The sidebar opt-in form performed pretty poorly, and the sidebar links were not a popular way to navigate around the blog. I really like the way Medium and some others are keeping the focus solely on the content and decided to do the same.

That being said, I had two major concerns. Firstly, I had my photo in the sidebar previously and I wondered whether removing it would take away some element of trust/human contact that it provided. Secondly, would removing all of the sidebar links have a negative impact on my SEO results as it would represent a loss of links. I’ll talk about more of that below.

5. Updated the “Best Of” page to be more interactive

Previously the “Best Of” page was called “Popular Posts” and it was just a list of links. It’s now a mosaic-style responsive design that has a selection of articles that I want to display.

best of page

I’ve always tried to use my theme design to funnel people to areas of the site that I want them to see and I decided to follow through with that goal on this page. The page now visually represents the brand more, and each article is one that I want people to encounter without leaving it too much to chance.

What effect have these changes had?

Let’s take a look at how these design changes have impact on various things around the blog.

Increase in landing page conversions

Firstly, conversion rate for the mailing list landing page increased significantly by simply updating the eBook cover and lifting more content up above the fold:

signup rate

As you can see, nearly 50% of people who visit the page sign up for the mailing list. Although this number alone doesn’t give insight into site-wide conversions, I am pretty happy with that number for an individual landing page.

Increase in homepage opt-ins

Similarly, the homepage opt-in form has increased from 2.6% to 4.2% without making any changes other than pushing it above the fold by about 500px by removing the old header and swapping it for the new one.

home optin

I know other people get a lot bigger conversions with their homepages but I’m pretty happy with this increase, and the opt-ins seem to be of a high quality (they don’t just sign up and then unsubscribe).

Possible minor increase in Google traffic

In terms of Google rankings, it’s a little bit early to tell whether it’s had a positive effect. As mentioned last week, there are a lot of seasonal changes going on with Google traffic, and there has also been a bit of an algorithm update reportedly in play.

Google

I had a look at a lot of different areas in my Google Webmaster Tools and most are either consistent or slightly better. As you can see above, the change is minimal but I’ll be keeping a close eye on it to see whether things change.

Increase in site-wide earnings

In terms of earnings, I’m not comfortable sharing the numbers and stats individually but we seem to be up around 1.5% from the same period of time before the changes were made. This is quite positive due to the seasonal changes that I mentioned before.

Some lessons from tweaking the blog’s design

I thought I’d end this post by bringing up a few points that might be important to remember if you plan on tweaking your blog’s design at all:

  • Host your own website
    I know I say this a lot but you really are so limited by what you can achieve if you are working on a free blog. By hosting your own site you can add or build your own plugins and scripts, edit your theme or even build your own. BlueHost has a $2.95 special for Blog Tyrant readers if you want to get started.
  • Make your readers happy
    The main thing I wanted to get back to with this design was focusing on user experience. I wanted to remove the clutter so that the site is easier to read, and make the flow of the site more simple. It seems as though it’s having an effect on conversions even at this early stage, so I’m hoping to keep figure out ways to simplify the experience for those who area reading (which is what the site is about).
  • Make mobile a priority
    We have to start thinking about the mobile experience beyond it being just a secondary thing to desktop. Google is now weighting searches differently for sites that do mobile well, and as more people become comfortable shopping online we’ll see a dramatic rise in the importance of good responsive design.
  • Conventional wisdom doesn’t always apply
    It’s vital to remember that the marketing truths that you hear about blog design and conversions don’t apply across the board. It’s good to measure your stats because you might change something based on conventional wisdom only to find that it has a poor effect in your niche.
  • Use testing tools
    There are some really good stats built in to programs like Clicky and AWeber but you can also get serious with some programs like VWO and Optimizely. These let you set up insanely practical tests to see which micro-elements of your site are working.
  • Work with someone good
    Don’t try and make all these changes yourself. It takes too long and you often end up making mistakes that set you back hours. Find a good designer and/or developer who you trust and can work with in the long term. You’ll find one recommendation in my footer.
  • Copy stuff
    It’s okay to copy ideas from other blogs that are doing well. Take a look at the other blogs in your niche and see what they are doing and if there is any way that you can improve on what they are doing. When you do this, of course, keep the point about conventional wisdom and testing in mind.

What changes have you made to your blog design?

Have you ever made any significant changes to your blog’s design that led to an increase (or decrease) in sign ups? I’d be really interested to learn what you changed specifically and what other areas of your stats or website it affected.

Please leave a comment below and let me know.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s