Simplify your job search
Get 5+ job offers from top companies with 1 application
Get job offers
Sponsor

Site Redesign Case Study: Tutorial9.net

This case study analyzes some design changes implemented at the site Tutorial9.net, a publications that offers tutorials, articles, and downloadable resources. The new design that vastly improved user experience and in turn made the site more successful. After the redesign, the rate of subscribers per day nearly doubled, and pageviews increased by over 50 percent.

There is no one-size-fits-all design in the business of usability. While best practices and general principles apply, a solution for one site is not going to adapt perfectly to another site. My goal with this post is not to explain how to solve a specific problem, but instead how other UX designers can approach similar obstacles.

Tutorial.Net changed visual design features, which made a huge difference in their site usability.

The Old and the New

For readers who have never laid eyes on Tutorial9.net, here’s a quick look at the old vs. new design. The goal of the site is to provide free lessons & tutorials to folks interested in learning Photoshop, Photography, Design, and Blogging in ways that are easy to understand.

The Goals of Tutorial9.net

One of the best ways to measure usability, satisfaction, and success for a site all at once is to set up some goals, and then measure success against those goals. Goals allow us to measure, whether we’re looking for more conversions, or a more specific audience. In other words, goals allow us to determine if things work better or worse than they did before.

Some measurable factors of success at Tutorial9.net include pageviews per day, and subscribers per day. Essentially, the site is considered more successful if users are exploring more pages, and subscribing to the content which in turn may bring them back in the future. Similar goals on other sites may include how many products a user purchases, money spent, or users that opt in to a special offer or newsletter that will then inform them of other products and services.

Redesigning the Home Page

One of the biggest problems with the original index page was the amount of content shown before the fold. Generally speaking, users were only interested in the first two posts displayed on the home page, since that was all they saw on first glance.

If a user can’t find what they are looking for immediately, they often won’t search much further. With a homepage that on first glance only offers two articles, the original design didn’t provide users with a whole lot to look at. The featured post couldn’t be taken away; being a blog that features articles where timeliness isn’t a real factor, it was important to keep some sort of “Featured Post” section that showcased the most important posts from around the blog.

This meant keeping a prominent featured section, while at the same time showing multiple other articles users might be interested to see.

The solution they found was a slideshow that featured several prominent articles in the same space. They also shrunk the amount of space the old post listing took up, to allow for more posts to be displayed in less space.

Recent Posts in the old design offered many useless options to users. Included in the listings were names of the author, a strange bubble that may or may not link to the comments of the post (there wasn’t really a way for a user to know on first glance), and links to several different categories of the blog — which were NEVER used by a typical viewer. The new design addressed these hindrances in one of the best ways to approach useless features: get rid of them.

In addition to the featured and latest posts shown on the homepage, an additional column that showcased the most popular tutorials was added, offering an even wider selection of articles to choose from for newcomers, and frequent viewers. These changes improved the number of pageviews on the site, by ensuring users could see how much content was available.

To Subscribe, or not to Subscribe?

Tutorial.net had another major goal: to increase subscriptions. And they succeeded – by cutting the amount of pixels dedicated to RSS in half. How did they do it?

People look for what they expect. When I was a child, I thought the peanut butter was hidden away, or that the remote had been stolen by the Remote Gnomes in the night. They weren’t, but I never found them because they were not where I expected them to be.

The Subscription area from the old design featured a large, dark, blue RSS icon — not something a typical user might be looking for when finding a way to subscribe.

In a similar fashion, the subscription methods and RSS were not what users expected them to be on the old Tutorial9.net. Rather than placement though, it was really a poor paint job that made all the difference. In place of the standard orange RSS icon, the old design featured a HUGE dark blue RSS icon, and the only apparent way to subscribe was by email (standard RSS subscriptions could be reached by clicking the Feedburner icon, but who could be expected to know that on first glance?)

The updated site used the standard orange RSS icon. While much smaller, subscriptions thrived since it was more familiar to the typical user.

Space was minimized in the redesign of Tutorial9 when it came to subscriptions and RSS, but what really made all the difference was the bright orange RSS icon that users look for along with quick, identifiable options for subscription types/methods.

Improving the Post Page

It’s worth mentioning that a post page on a blog or article-focused publication is perhaps the MOST important page users will see. An individual post is often the very first page a visitor will land on, rather than the homepage. If we don’t make a strong first impression, they might not choose to stay.

While we won’t dig deeply into the blog post page, it’s worth noting the connection between a blog page redesign and the pageviews goal.

By adding related posts at the end of an article, users explored much more of the site before leaving.

In the old layout, every post page acted like an exit instead of an entrance. There were no connections or calls to let readers see more of the site. By the end of an article, users were looking for a way out, when the team at Tutorial.net wanted them to continue exploring the blog!

To solve the problem, they added several things that directed users to other pages. Along the right side of the post, popular posts within the same category were listed. At the bottom of a post, even more related posts were shown, all of which increased the length of the user “journey,” and improved the general site experience and value.

Don’t Forget the Constraints

Every site redesign is hampered by constraints. If we don’t recognize our constraints, our usability will decrease significantly. In order to find the constraints, we need to define the users’ abilities.

User research will show everything about the user that might impact their site usage – from age, to devices used, Operating Systems, disabilities, screen resolutions, internet speed, and whether or not javascript is enabled. If the site isn’t fully accessible, it’s like handing a user a DVD to play in an 8-track player.

For Tutorial9, there were a few constraints that limited what could be done:

  • Some of the users are on slow connections. Heavy flash apps, videos, etc can’t be used without alternatives.
  • Can’t design beyond 1280×1024 resolutions.
  • RSS Savvy (usually). Provide alternative for users who aren’t familiar with the technology (email subscriptions).
  • Very Visual viewers. This gives Tutorial9 a lot more freedom with how information is presented.
  • Firefox users mostly. Some IE and Opera users, so the design should work well in those browsers.

While these constraints did not stop Tutorial.Net’s ability to improve the site, they did help the team to choose between options. Every project has constraints, which can help us as UX designers as much as they hinder us.

Part 1 of Infinity

It’s been about three months since the rebuilding of Tutorial9.net, and there are already lots of obvious ways that the user experience could be improved upon.

And that’s alright.

It would be silly to suggest that a site will ever be perfect. To do so limits the boundaries of building sites significantly. Instead, we need to constantly review our goals, usability test, and listen to user feedback. As time goes on, our sites will again and again need revisions or iterations. But every time we take another step in the right direction, it decreases the likelihood of ever falling into disrepair.

For Tutorial9, this redesign was a huge success. Only time will show what comes next!

About the Author

David Leggett

David Leggett is a designer, developer, and builder of things. He currently resides as Director of Marketing and Design at Python Safety.

15 Comments

  • Colorburned Reply

    Really great review! A lot of great tips to keep in mind.

  • Dulce Reply

    I’m planning also to redesign my website and you have provided me some valuable tips. Thank you.

  • Rob Reply

    Good write up and very interesting, but is it bad that I preferred the old design? It was so much more spacious, the new one feels a little messy and bloated with too much going on.

    Just my two cents.

  • Arun Vijayan Reply

    Loved it! But why did u chose a skyblue (light) color for the tutorial title list? It is less readable. Right?

  • David Leggett Reply

    @Arun Vijayan: Definitely. Actually, I would suggest to most designers to make their headers red, or warmer at least. Warmer headers will usually grab your readers attention much better than cooler ones, making it easier to scan content on a glance.

    In this case, it was a sacrifice made for the design/branding part of things. Tutorial9 is very much a monochromatic design, and the sky blue is the branding color.

    Was this the right choice? There are certainly better solutions, and those answers will be explored as discussed in the end of this post. Changes will be made to make the UX better based on the current design sometime down the road.

    Thanks so much for stopping by everyone. Very glad to see so many people enjoyed this article! Please be sure to subscribe and check out our other great posts!

    • Arraial d’ajuda Reply

      I agree, i would like to see some more work of you. It inspires me a lot!
      Simona

  • Thomas Reply

    Thanks, Really nice design and good review

  • Design Informer Reply

    This is awesome. I will be definitely be using these concepts in my blog design.

  • Designely Reply

    The new design of Tutorial9 described here was absolutely fascinating, both in visual and in practical way.

    But now, as I’ve heard, unfortunately, a new owner of Tutorial9 has desecrated the design and glory of David Legett’s blog.

Leave a Comment on This Article