How to Design a Blog Post for Conversion

Paul Boag

Many website design projects involves the designing of a blog post. But rarely do we put much thought into their design.

How much thought has gone into the design of your blog posts? Probably not much. Blog post templates feel like a design problem long since solved. But I would argue that isn’t really the case.

In truth, the design of most blog posts give little consideration for the role that most business blogs play these days. A role that has become critically important.

Why the Design of A Blog Post Matters

Blogs provide four benefits when managed well. Benefits that make them invaluable to many organisation’s sales funnel. These are:

  • Blogs rank well in organic search rankings. That reduces the need for marketing spend and drives traffic to the site.
  • A good blog post encourages sharing creating even more organic traffic.
  • A blog can encourage users to subscribe thereby enabling you to keep your brand front and centre in potential customer’s minds.
  • A blog post can help establish the credibility of a company making them appear a potentially good supplier.

In short, a blog helps move prospective customers through the sales funnel, from making existing contact to generating a quality lead. But it can only do that if it is designed well.

For a blog post to fulfil its purpose it needs to encourage users to sharing, subscribe and make contact (or complete some other call to action).

If the blog post design does not facilitate that, then ultimately the blog will fail to deliver business value.

What Makes a Good Blog Post Design?

To explore what makes a good blog post design, I want to take a recent wireframe for a blog post I have created and break it down. You can see the whole page below.

It doesn’t look that different from any other blog post you have seen. But it is the details that make it effective. This wireframe has seven aspects that make it more useful than your average blog template.

1. It Shows People that The Post Is Relevant

The first question people have when they hit a post is whether it is relevant to them. Does it answer their question or teach them something new? We don’t want people to have to work in order to answer that question or they will just leave. That is why you should include a summary of the post right at the top.

Wireframe showing summary
Summarise the post so that people can instantly see its relevance to them.

It is also important, for the same reason, that the title clearly describes what the post is about.

2. It Is Easy to Scan

Most people do not actually ‘read’ a post. Like most content online they scan it, dipping in and out of relevant bits. For example, I can pretty much guarantee you haven’t read every word on this post and that is fine.

To accomodate this way of consuming online content we need to make sure our posts are scannable. We do this by using:

  • Add headings.
  • Use pull out quotes.
  • Turn content into lists.
  • Make important statements bold.
Wireframe of a pull out quote.
Help users scan the post using headings, lists and pull out quotes like this one.

3. It Encourages Sharing

One of the main things we want people to do when they read our blog posts is to share them. But slapping on some social media buttons will not do the trick.

We can encourage sharing in a number of ways.

  • Make suggestions about what they might want to share by highlighting them as a pullout quote.
  • Make sure there is imagery or video on the site as people tend to share these more. Infographics are particularly popular.
  • Give people a reason to share, such as help their friends or impressing a colleague.

In short, we need to integrate sharing features through the content rather than just adding a row of “share this” icons.

Example wireframe of sharing integration.
Sharing needs to be deeply integrated into each blog post, rather than being generic across the blogging template.

4. It Doesn’t Just Rely on Text

Talking of sharing, it is important that any blog post design has ample scope for integrating, imagery, video and audio. Posts of this nature tends to get shared a lot more than text and is considerably more engaging.

Introducing audio, video and imagery also offer opportunities for content recycling. Video can be posted to Youtube, imagery to Instagram and audio can be released as a podcast.

Wireframe of video embedded in post
Video, audio and images make a post more engaging and help reach a larger audience.

5. It Encourages Further Reading

Encouraging users to share content is not our only goal. We also want them to remain engaged with our content until they are ready to complete our call to action. That means we need to keep them reading. We want to show them just how much quality content we have on offer.

To achieve this we need to show them related posts. Typically this is done by placing a series of related posts at the bottom of the page. That means when somebody finishes an article they have other posts they can look at.

Wireframe showing related posts
To keep the user engaged always add related posts at the bottom of your blog template.

However, don’t stop there. Also design the ability for the author to add related posts within the body of an article too. That is because users are more likely to spot these than posts at the end.

Wireframe showing a related post in the flow of the document.
Design a related post design pattern that can be dropped into the flow of a post

6. It Has Embedded Calls to Action

Not that related links are the only thing that should be embedded in the flow of the post. There should be calls to action as well. All too often designers place the call to action in a side column where it can be missed or at the bottom where a user might not reach.

Example A/B Test
Calls to action routinely perform better in the main flow of a page even if they are below the fold.

However, be sure to make these calls to action stand out in the body. Leave a lot of whitespace around them and if possible break out of the column layout.

Wireframe of embedded call to action
Make sure any call to action in the flow of the post stands out.

7. It Humanises the Call to Action

Finally, notice how prominently my wireframe focuses on the author of the post.

Author profile on blog post
By focusing on a real person rather than a faceless company it humanises the brand and encourages people to reach out.

One of the aims of our blog is to encourage people to contact us. We want them to ask questions, because it is an opportunity to turn them into a lead. By focusing on the author you add a human face to your brand, so making it more approachable.

It doesn’t even need to be the person who actually wrote the post. It just has to be somebody who can help the reader should they choose to reach out.

Key Takeaways

In the heat of a project when the pressure is on to deliver, it can be easy to view a blog post as just another template that needs designing. We can easily fall back on looking at what others have done and simply following conventions.

However, as designers we really should be putting the same thought into a blog post template as we do the homepage. In fact on some sites more people will land on a blog post than they will the sites homepage.

Just as with any other page we need to ask ourselves what the user wants to do, how we can engage them and what the ultimate aim of the page is.

Stock Photos from Nelson Marques/Shutterstock