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.
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.
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.
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?
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.
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.
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.
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!
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.
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.
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.
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.
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!
We added an alternate layout for articles without a featured image.
The comments section was completely restyled, improving hierarchy, font-sizing, spacing, colour, threading—all in adherence to our style guide.
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.
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.
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.
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
Don’t hesitate to reach out if you have thoughts or questions!
Web Design, Content Marketing, Front-end Dev
A blog on workplace issues visited by thousands of people everyday.
Design System, Efficiency, Teamwork
A design system to help bring consistency across all of Jostle’s product.
UX/UI, iOS, Android
A 3D visualization of the internet that was featured on CNN Money.
Identity, UX, CX
From buttons to .btn’s, pixels to bricks, tags to hangtags, and picks to pics.
Book Design, Print Production, Writing
Award winning exploration of the Internet using printed experiments.
UX/UI, Branding, Web
A web app for ‘devangelists’ to track questions from Stackoverflow.
Illustration, Commercial Art, Marketing
A selection of illustrations I drew for The Jostle Blog.
Art, Print Production, Self-indulgence
Formalism, abstraction, architecture, urban landscapes, and nature.
Podcast, Indentity, Community
A podcast featuring conversations with artists and designers.
UI/UX, Front-end Dev, Web
A single page marketing site for a universal iOS app.
UI/UX, Android, Mobile
A Pokémon GO style game to help expand Mozilla’s geolocation services.
UI/UX, Front-end Dev, Web
We reshaped content and Bravado Magazine became “high gloss pixels”.