Redesign Case Study: Redesigning My Blog Post List

I mentioned in another post that I was going to redesign this blog and would share what I learn along the way here. So here it is, the very first one.

It started when Patrick took a look at the home page of my blog and declared it to be confusing.

A Confusing Blog Post List

Here is a screenshot of that confusing blog post list for reference.

Before

I wouldn’t say that’s the perfect blog list but confusing? Really?

Apparently the font size difference between the title and the text under the date is not significant enough.

P: I want to click on “If you haven’t enabled…” but I can’t.
J: Well, you should click on the title “Use Let’s Encrypt to Enable HTTPS”. Why would you want to click the text?
P: Well, I thought “If you haven’t xxx” is another title
J: That’s obviously not a title!
P: but it looks like one
J: No it does not!

Considering P is an important reader of the blog (I don’t think he actually reads it), I took the feedback in a very positive way. I think…

It does make sense to make the font of the text under the date smaller: it’s much less important. I also don’t like the fact that the color of the blog title is #555, the same as the color of the text in question. So I decreased the font size of that text and changed the color of the blog title for a darker gray: #333.1

sketch mockup

That Text Under the Date

Then I found myself asking questions regrading that text under the date: What is its role? Is it a summary? Can I just show a list of blog titles and nothing else?

That’s not a summary of the blog post. That text is just the first few sentences from the actual blog post. Full disclosure, there was actually a read more link after the text but I didn’t like it and just removed it. I clearly didn’t think that through.

This is also one example of how knowing how something works negatively affects how it should work. I know the first few sentences of a blog post would appear in the blog list, which also happens to be the home page for my site. As a result, I write the first few sentences of a blog post differently.

But should I though? That is a false constraint introduced by how it works. And how it works can be tweaked and changed.

To be honest, I always disliked the practice of showing the first or the first few sentences of an article followed by ... and/or a read more link in a list of articles. First of all, it feels quite unnatural. It feels like the list was created by a thoughtless crawler that doesn’t understand how language works and just breaks up text based on a fixed rule. Either it be two sentences or 200 characters, a fixed rule has no soul. Secondly, it doesn’t actually have a purpose. How does it compliment the tile? What does it offer? It really doesn’t offer much. And that’s why it affected how I wrote a blog post — I wanted it to offer more.

So I decided to change how that currently works. I do want some text there and what I really want is a brief summary of the blog post so a reader would know what a post is about without reading it.2 They can choose to read the whole post if they want more details. Now I also have more control over how I start a post. That seems so obvious now but it’s easy to not question something that’s already in place and seems to be working.

After taking a closer look at the theme, I found that alternatively you could just specify the text to display under the blog title. So I went back and added a summary for each blog post.

The Result

Here is what the blog post list look like now.

After

I should also mention that Patrick doesn’t find it confusing anymore.

Thoughts

  1. Don’t let how something works dictates how it should work. As developers we tend to make something work first instead of thinking carefully about how something should work. We should put our designer’s hat on from time to time, especially when we have the confidence to make something work, we can benefit more from putting more energy into designing it (how it should work) than rushing to complete the first version.
  2. I won’t do small “incremental” changes to this blog anymore and instead I will create mockups in Sketch first. For example, I don’t think incremental improvements can help with this projects page. What it needs is a complete re-do.

  1. 1.By the way, I didn’t design the site myself, I used a popular blog theme that I liked. But I did make some style adjustments, one of which is using a set of larger font sizes.
  2. 2.That’s what I want most of the time. Note that the text I used for this blog post is not a summary of the post.