By Nicholas Holmes
A month back, we published a guest post on the awesome GoSquared blog.
After their CEO James dropped me a note to let me know it was live, the rest of the Nickelled team headed over to have a read — and the same thing hit us all, at the same time.
Their blog design made ours look amateur.
Like many SaaS startups, we see our blog as critical for driving inbound leads, yet we'd never applied the same amount of thought to our blog design as we did, for instance, to our ad design or marketing site layouts.
Here’s our Slack conversation (lightly edited for clarity):
If you haven’t already, head over to the GoSquared blog and see if you agree with Fraser.
His initial observations above started us on a journey which has boosted our average time on page by 53% and our number of leads generated by 2900% since we deployed the new design — in this post, I’ll go into detail about what we did and why.
In case you’re wondering whether it’s worth reading on, here’s a summary of our results from Google Analytics:
We launched the new design on November 18th. So that spike came directly from just a few tweaks we made to correct some mistakes which were easy to make but really impacted our readers.
To start us off, here’s the original design we had for the blog home page:
And here’s the original we had for a post page:
We were doing a few things wrong here, and they were hurting our readers (and subsequently, us).
1: Dated text layout
Our blog, like lots of others, was designed for publishing short posts. Five years ago, when shorter blog posts were more common, a pretty nice blog layout looked like this, with a sidebar pushing the text to one side:
However, in recent years Google has started to punish “thin content” and in response, blog posts (including ours) have been getting longer and longer. According to Medium, via Buffer, the ideal length for a post is a seven-minute read time or around 1,600 words — and if you read past the header of a 1,600-word post on our site, this is what you saw.
That weird gap on the right-hand side, which was basically all you could see once you scrolled past the fold, meant that our content was suffocating in weird design.
On top of that, our images looked a bit strange. They were automatically expanding to fill the width of the column (as they should) but they weren’t clearly delineated. In the worst cases, text in our images looked like part of the blog post:
2: Tons of distractions
As we scanned through some of our favorite blogs, we realized that they had been designed with one thing in common— the reader came first.
Ours, by comparison, had a couple of features which suggested we weren’t really reader-focused.
3: Terrible subscription options
I’ll take a deep breath and be honest here.
In the 90 days leading up to our redesign, we’d managed to get four subscribers to sign up for blog newsletter. Just four.
On reflection, that’s not entirely surprising. Here’s what the original text in our CTA box (you can see it above) said:
Get useful, actionable content every Monday in your inbox. A great way to start the week!
Although the copy wasn’t bad, it wasn’t the most compelling proposition.
Much worse was the fact that it was connected directly to MailChimp and required a double opt-in before a member was confirmed.
We’re all for reducing spam, but not at the expense of horrendous usability. We felt strongly that if somebody took the time to put their email address into our site, they shouldn’t have to do any extra work to enjoy our content.
4: Not mobile-ready
Well over half of the traffic to top sites comes from mobile devices now, and Google has been clear that mobile-readiness plays a part in its rankings.
Although our blog was at least responsive, it didn’t use cutting-edge mobile technologies which are increasingly being adopted by publishers that want to make content as easy as possible for their audience.
If you haven’t tried AMP, head on over to Google on a mobile device and search for a news subject (“Donald Trump” should do the trick). You should see a little AMP icon next to some stories (see below) - click on the story and compare the loading experience to a page without the AMP.
Although responsive design meant that the mobile reading experience for our users wasn’t disastrous, we knew that technologies such as AMP could make things a lot better.
To recap, we identified four key areas we needed to work on.
You’re looking at the resulting redesign — and if you’ve got this far, hopefully you don’t think it’s horrible. Here’s a breakdown of what’s changed:
1) Text that looks good no matter where you are on the page
Scroll up and down this article, and you’ll notice that it looks broadly similar from above the fold right to the comments. The gutter on the left and the right are consistent, and the font hierarchy is better defined.
The sidebar, which pushed everything off-center, is gone. When we redesigned the page I described this as ‘the nuclear option’, but we’re all pretty happy with it. Less clutter means more clarity for the reader, and we’re pretty sure the sidebar wasn’t getting many clicks anyway. If users do want to know more about Nickelled, there’s one simple link at the top which will take them there, but everything else has been removed.
Our images are also new. From now on, we’ll be enforcing a couple of formatting rules (even for guest posts) — a clear border to delineate images from text, consistent spacing, and a screenshot policy which should ensure all screenshots that appear in posts are at a similar level of zoom.
Charts, which we often use, have had an overhaul too. As much as we can, we’re going to stop relying on charts cropped from tools such as Optimizely or Google Analytics, and produce the graphics ourselves, complete with our own custom styling. We’re taking inspiration here from data visualization greats such as the Economist, who produce charts in the same visual style week in, week out. We’ll see how it goes.
2) Lead collection is rationalized and easy
Blogging for us is a way of generating leads, so our new design needed some way of collecting email addresses. Mailchimp, clearly, wasn’t working.
Our new design restricts lead collection to the top and the bottom of the blog, with a huge CTA box (that doesn't get in the way of content) and a clear ‘carrot’ for the user.
At this moment, that carrot is for our awesome ebook, but we’ll test this over time with different offers to see what works the best.
Submitting the form fires users straight into a Drip campaign and they’ll receive the ebook immediately — no confirmation necessary.
We’ve also installed SumoMe to fire popups on exit intent — we’re monitoring this carefully, but historically their service has been pretty good at not irritating visitors.
3) All pages are available via AMP
Search for our content on Google mobile, and you’ll now get the ultra-optimized AMP version, which should load on your device in under a second.
If you're considering launching this for your blog, you'll want to allow a day or two of development and test time — as a new format, it suffers from a couple of niggling issues which were a pain to debug, and we had to strip out a bit of functionality.
Nonetheless, while our AMP pages make up a comparatively small percentage of our overall blog traffic, the experience is immeasurably better and we’re pretty confident that this will grow in the future.
We didn’t expect that the revamp would have an instantaneous effect on our readers’ behavior, but it did.
We track read time using the 'time on page' metric in Google Analytics as a proxy, and we reconfirm the data using the SumoMe Content Analytics tool.
Taken directly from Google Analytics, here’s what happened to average time spent on all of our blog post pages, the week after we launched the new design:
We were stunned at the speed of the result — comparing the week that we launched the new format (w/c 11/20/2016) with the average time on page of the previous five weeks, we saw a 53% jump in read time.
Changing the signup form to a format with a stronger, clearer and double-confirmation-free CTA has resulted in a significant jump in the number of leads as well:
We had four in 90 days before our redesign.
We've had over ten in the two weeks since we launched the new site — a 2900% increase.
While we’re pretty happy with results so far, we’re still at the start of the journey. Over the coming weeks, you’ll see some more changes rolling out.
We’re not huge fans of our post images — other blogs do this a lot better than we do, with custom illustrations for every post. That’s something we’re exploring at the moment.
We also need to go through our historical content and change some of the disastrous pixellated post images, so our long-tail visitors get a better experience.
We're working on selecting a font set that maximizes readability across devices at the moment. It’s a surprisingly difficult process, but we expect to have it complete by the end of the year.
One of my favorite things about the Drip blog is their use of embeddable content to act as ‘lead magnets’ — gated resources which are accessible in return for an email address.
This provides an extra dimension for super-engaged blog readers and a useful lead collection mechanism for the business, so it’s something we’re looking at.
Stronger index page
Although the front page of our blog receives fewer visits than many of our popular pages, we’re still looking at a more interesting format for it. Watch this space.
We hope that by sharing our journey to a better blog, we've inspired you to make some changes of your own.
If you think we can do better, or have an experience you'd like to share, leave a comment below.