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.
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?)
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.
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.
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!