The Jostle Blog

Web Design, Content Marketing, Front-end Dev

I redesigned and developed The Jostle Blog; one of Jostle’s primary marketing channels reaching hundreds of thousands of readers every year.

Visit The Jostle Blog to see how all this pulls together or read-on for the detailed case study.

A blog with lots of legacy

In 2015, The Jostle Blog moved from our self-hosted WordPress to Marketo. About a year later, the blog moved from Marketo to HubSpot. To close the deal with Jostle, HubSpot’s developers replicated our site on their platform. A clever sales move that wins over non-technical marketing people.

WordPress to Marketo to HubSpot

Needless to say, the blog was jumping from CMS to CMS with the intention of improving our marketing efforts. In the process, the user experience was getting kicked around. We kept migrating the site without investing time and energy into understanding how to execute design on our latest and greatest platform. This was partially a breakdown in communication within our team and partially the reality that our design team was swamped with product needs.

Over the years, hundreds of articles were being publishing into crufty layouts. Our writers wanted their words presented in the best way possible but no one wanted to bother the design team with requests to make things better. Our readers suffered with some janky experience and our content marketing efforts weren’t as effective as they could be.

The redesign started with a desire to make things better

New coworkers bring a lot of benefits through asking tough questions and a willingness to make change happen. June 2018, Corey Moseley joined Jostle as a Content Marketing Specialist. In addition to his other content duties, Corey writes and publishes 2 articles a week to the blog. A few months after Corey joined Jostle, we started to notice a serious increase in visitor numbers on the blog. As these numbers started to bump, several of us started to ask the question, “Why aren’t we improving our blog?”

Here’s a paraphrased version of the chat Corey and I had on Jostle—the place where our collective desire to make change happened:

---

Corey: I have a ~special project~ in mind, but it’s by no means a priority. I was thinking the blog masthead could use a new look. What do you think?

Justin: The blog masthead does need some love. It’s been that way for years. I’d be down to take on the work.

Corey: Nice. I don’t really like any of our competitors’ blog mastheads. They all just have “The Intranet Blog” over a stock photo. [YIKES!]

Justin: Yeah. Our competitors are not inspiring. [Such is the nature of the intranet marketplace] I would like to redesign the entire blog. The whole thing is feeling dated and unconsidered. On the listings pages, it would be great to showcase bigger images and ditch those big-ass read more links.

Corey: Agreed. That’s a much larger project though, right?

Justin: Yup.

Corey: Let me run this by Dustin [Jostle’s Director of Growth Marketing] and see what he thinks.

Justin: I’m going to layup some ideas and we’ll see where things go.

---

Obviously, Dustin gave the project the go ahead. I mean, that’s why this case study exists.😉 I’d like to note that Corey came to me with a desire to improve the masthead on the blog but we dug a little deeper and decided to tackle a more pervasive problem, which improved the whole system—to the benefit of all of our visitors and the marketing team.

Vision and scoping

Design process

I followed a fairly predictable design process for the project. Starting with explorations in my sketchbook and in Figma. Taking those ideas through concept and design reviews with the broader team. Then building up a staging site in HubSpot for futher review—live on the web.

Snapshots of the design process

Still with me? Here’s the detailed teardown of how the blog changed.

Nav

We removed the large masthead. We added a unique “Blog” link beside the Jostle logo to provide context for visitors. This also gave us the ability to keep the Jostle logo as a link to jostle.me and also provide a link to the blog home base. In an effort to connect blog visitors to jostle.me, we added links to our Product and Resources pages. The CTA to “Subscribe” had similar proportions to the search input so we repositioned it as a link in the nav. We then widened the search input and moved it to the right.

Old nav
Old nav
New nav
New nav

Listing pages

For the listings pages, we changed the design to use our 16x9 featured images, which are used in the header of the article. This way, we no longer needed a secondary, small, square asset. Less to prep, maintain, and mess up in the future. Also, the full glory of our illustrations get exposed for the world to enjoy!

Image sizing

We added some variation to the listings pages to make them more engaging. Varying the size of each listing enabled us to highlight recent articles, then direct attention futher down the list, and surface useful resources and popular articles on the right—content outside the chronology of the feed.

Old listing
Old listing
New listing
New listing

We also designed a variant for articles without featured images, which features big title type. This gives articles without images equal presence to articles with images.

Alternate layout
Layout for artricles without images

We also changed the pagination so you can only page between 10 posts at a time. We used to offer an “All” button as part of the pagination but when clicked, your browser would crash, loading 450+ article summaries and images at once. Needless to say, this is why we offer search in the header nav.

New pagination
New pagination

Jostle uses Open Sans across all of our product and marketing assets. We added Open Sans Condensed to the blog because it provides a few more characters per line, better wrapping, and improved contrast for titles against the excerpts. After the success of implementing this first on JostleTV, then the blog, we’re now considering using the condensed style across our platform.

Articles

We added a “Back to blog” button to the top-left corner so people always have a clear path back to the listings page. I split the top fold of article so you see the title, summary, metadata, and image above the fold. I improved the styling of the author credit at the top of the article so it’s consistent with the styling at the bottom of the article. I also generally improved the sizing, colours, and spacing of the author credit so it adheres to our style guide.

We removed the Sumo share buttons that floated on the left-hand side of the page, which didn’t get clicked, exposed low engagement numbers, and were a distraction while reading. We still needed to offer a way for people to share on social media so we added social buttons top-right and bottom-right of the article. I gave the social buttons a more subtle treatment so they didn’t compete with our brand, illustrations, or content. I also improved the interaction of these buttons, making sharing a little more novel.

We added an “Image Credit” so the artist gets props!

Old article
Old article top fold
New article
New article top fold

We added an alternate layout for articles without a featured image.

Alternate layout for articles without an image.
Alternate layout for articles without an image.

The comments section was completely restyled, improving hierarchy, font-sizing, spacing, colour, threading—all in adherence to our style guide.

Old article
Old comments
New article
New comments

At the bottom of each article, we added “Read more” pagination with links to the previous and next articles in the blog timeline. This offers the reader more content to discover; encouraging a continuation of the journey.

Read more pagination
Read more pagination

Author listing

On the author listings, we improved the sizing and spacing of the avatar, title, and bio. On the previous version, the author’s avatar and bio too closely resembled one of the blog posts in the list.

Old author listing
Old author listing
New author listing
New author listing

Footer

We styled the footer to be more consistent with our main marketing site, shortening copyright and trademark notices. We also moved the subscription form into the footer, which used to appear at the bottom of each article. Now it’s at the bottom of every page. When you click on “Subscribe” in the header nav, you are scrolled down to the form in the footer, which is then highlighted with a subtle marquee CSS animation.

Old footer
Old footer
New footer
New footer

An easier publishing workflow

All of these design changes also improved the publishing workflow. There used to be several required fields to make the old templates work but now the author only has to enter in the meta description and add an optional featured image.

Highlights from what I just shared

Feedback?

Don’t hesitate to reach out if you have thoughts or questions!

See more work: