As a part of our larger rebranding project, 99designs recently did a complete overhaul of our blog’s look and feel. And because we’re a design company, writing about design-related topics, we figured we should probably talk a little bit about why (and how) we did what we did.
The 3 reasons why we redesigned our blog
1. Visually our blog design was outdated.
Our old blog design was built on a two-column layout, which made it look like a template. The content was cluttered and overwhelming—it wasn’t clear where you should look. Neither of these things exactly instill reader confidence when we’re writing about graphic and web design trends.
2. The old design didn’t match the rest of our branding
In fact, it wasn’t even clear that it was a company blog. When I was at a conference last summer, I met a woman who said she read our blog every day—awesome!—and she had no idea that we did anything BUT blog.
3. The functionality wasn’t meeting our, or our readers’, needs
The article template we had limited what we could present to our readers. The images maxed out at a measly 624px in width, and there weren’t any options for variety. Our navigation was also subpar, leading to a very high bounce rate (even for a blog). Finally, we were running two separate english language blogs, as well as a german language blog and french language blog. Not only was this confusing to readers, but with four separate WordPress backends, it was also a beast to manage.
It was time for a change.
The 6 goals of our blog redesign and how we implemented them
Based on the above critiques, the content strategy team sat down with our colleagues in SEO, user experience design and engineering, and came up with six goals for our blog redesign.
Articles should be beautiful and easy to read. If we have a good reading experience, people will want to stick around and read more.
How we approached it: wide images and narrow text
This goal broke down into a couple pieces: images should be easy to see and text should be easy to read.
If you want to see images, you need to make them big. And there should be multiple ways to display them, based on context. So we built several image templates: full width, a flexible grid and floating halves with text-wraps.
Text, on the other hand, should be in a relatively narrow column, so readers’ eyes don’t have to constantly jump back and forth across the screen (making it harder for them to keep their place and disrupting the reading process).
To remedy the disparate width needs between text and images, we allowed our images to break the barriers of our central column. This has the added benefit of allowing us to create a visual flow down the page.
Finally, since we wanted the content of the articles to be the focus of each page, we decided against the huge-featured-image trend, and instead brought a splash of color to our article title. This color is pulled from an image on the page, and is used in all headlines and links, creating a unified feel throughout the article. It’s also used in the unique little drop-cap that starts each article, which gives a subtle visual flare and also functions to pull reader’s eye immediately into the copy.
And, of course, we created mobile and tablet versions of the design to make sure everything was responsive and best served to the device our reader was using.
2. Intuitive navigation
Readers should be able to easily understand and navigate our blog, and be able to find interesting content related to their interests.
How we approached it: think like a reader and create a visual hierarchy
The first goal your blog should have is getting a person to read the article. The second goal is getting them to read a second article. To do that, readers have to be able to easily find a next article to read.
We approached this problem by thinking like our readers. Several months before the merge and redesign, we completely reworked the categories on our site. Instead of aligning them with internal products or processes, we thought about what type of content a reader might be looking for, and based our categories on that. We also consulted with our SEO team to make sure these were Google-friendly.
Once we’d figured that out, we could develop a visual hierarchy to further encourage our readers to stick around. On article pages, here are few things we focused on:
- Related articles at the bottom of the page, so if a reader finished an article and liked it, they would be immediately served with some others that might interest them. We do have an algorithm that pulls these, but also a manual override so we can hand pick articles if we’d prefer (to drive traffic where we most want it to go).
- Tags and author pages are also easily accessible from the bottom of the article, as those may be other ways readers want to engage with our content.
On the homepage, we wanted to show off the diversity of our content and also draw the reader’s eye. Instead of a chronology of posts, we built out a grid, so you can easily see a variety of offerings. We also made three larger posts posts at the top of the home page, allowing us to feature specific content.
3. Maximize SEO value
We want readers to find our content, which means we need to max-out our search potential.
How we approached it: category-based slugs and the right plugins
70% of the traffic to our blog already comes from organic search. If we want to boost overall page views and readership, we need to make sure we’re playing nice with search algorithms.
The first thing we decided to do was change our slugs. As I mentioned above, we were merging two English-language blogs. Each blog (of course) had a different url structure. So we needed to consolidate. We decided upon using the category-name/article-title format. Adding the category name gives us one more opportunity for us to get a keyword into the URL.
Finally, we double and triple checked our redirects to make sure that we wouldn’t lose the value of our old pages.
4. Connection to the main 99designs site
It needs to be clear that the blog is connected to 99designs.com.
How we approached it: design elements and product integration
We wanted our blog to look like the rest of our website, but also be functional as a blog. To do this, we identified a few key visual elements from our brand guidelines, and integrated them into the design:
- Use of designs from our platform integrated into the site (like the floating elephant, which appears here and next to the email subscribe box)
- A dynamic color palette based on the page’s images
- Keep the tone and images light and authentic
We debated on navigation for a while—did we want to integrate the main site’s navigation? Would that be confusing because there also needed to be blog navigation? In the end, we compromised by not incorporating our main site navigation, but having the logo link back to our homepage (and building “blog home” into our blog nav).
Finally, we created more of a link to our product by including a section that highlights our current design contests with two CTAs: for potential customers to start their own contests, or for potential designers to sign up. We also have a flexible promo bar (on every page) and box (on the homepage) that allow us to let people know about special offers.
Readers should be able to easily share our articles on social media, sign up for our email list and comment on articles.
How we approached it: social icons that follow you and an email capture on every page
This one is pretty straightforward: if we wanted people to engage we had to make it easy for them. That means social media links and email signup.
To make sure that social media was as accessible as possible, we made our icons sticky, so they follow you down the page (but also subtly designed, so they don’t intrude with the reading experience). For email signup, we decided—for now—to buck the pop-up-lightbox-sign-up trend, and instead integrated a signup at the bottom of each page. This may be something we come back to in the future.
6. Easier blog management
The backend of the the blog should make writers, editors, administrators and developers jobs easier. And it should be built in such a way as to allow scaling.
How we approached it: one backend and a multilingual plugin
It’s easy (well, comparatively) to do a quick visual overhaul on your blog design. But that doesn’t often solve management problems. We’ve grown, and we’re still expanding, and our current system wasn’t cutting it.
It took a lot of research, and some trial and error, but we ultimately decided that the best solution for us was to set up our multiple language blogs on one backend, and to use the WordPress Multilingual (WPML) Plugin. This took way more of an effort to implement—we had to manually associate all of our categories, tags and previously translated posts with their counterparts in other languages—but ultimately makes our jobs easier. There’s one design and one stylesheet for all blogs. If there’s a technical issue, developers can troubleshoot and fix it once. And if we want to translate content, we can easily pull over the post and keep images and formatting intact. (Or switch them out if that makes more sense).
It was certainly a headache at the time, but investing in our infrastructure puts us in a way better place going forward. (And was just in time as our Japan team decided to built out a Japanese blog right about the same time we finished this project!)
So, did it work?
It’s still early—the new blog has been in place for less than a month—so results are inconclusive. From a management perspective, it’s definitely been easier. And we love the new look. But we need to give the numbers some time. But don’t you worry, we will be following up on this post in 3-4 months to let you know if we succeeded (or not) and will make sure to link to the results from this post.
Considering your own blog redesign? A few tips to keep in mind:
- Make a list of what’s working and what’s not working
- Set a list of priorities (and figure out a way to measure their success)
- Remember that creating great content is the best thing you can do for your blog
- But you should also think about SEO and user experience
This article was written in collaboration with Tristan Le Breton, the stellar user interface designer who made this page look as pretty as it does.