Redesigning Our Site: Goals and Improvements

This past week, Scotch went through a massive site upgrade where we designed the entire site from the ground up. Barely any of the code from the old theme was used and we wanted a fresh start.

Overview

Today, I wanted to talk about the main goals of the redesign (and I believe this can apply to anyones site), the ways we changed the site to achieve those goals, and improvements across the board.

This will be a look into:

  • improving site UI/UX
  • cool new features
  • increasing reader engagement
  • measuring progress

Hopefully you can take away some lessons here and there from the topics in this article.

Analytics Goals

A little confession I have is that I spend an insane amount of my time poring over the details in our Google Analytics account. So it made sense to pick and choose things that we felt posed problems our current site. Using the analytics data we were able to find the pain points that needed fixing.

Knowing how your current site performs is crucial to understanding how to improve it.

Lower Bounce Rate

This was one of the main things we wanted to focus on. We realized that when reading an article, readers had a tendency to leave the site without visiting other articles. This was a disservice to our readers who might have been looking for related content or an extension of an article they were reading.

How to improve bounce rate: Increase the number of articles or links for users to click to other articles (without being annoying or cluttering the site).

Increase Pages/Visit

This goes hand in hand with the bounce rate goal. Giving people easier access to other articles would increase pages/visit.

How to improve pages/visit: Same tactic as lowering bounce rate.

Increase Time on Site

Like our other two analytics goals, increasing this would help increase the others. More time on the site, clicking through different articles and reading, means we can better utilize the articles and the traffic coming to the site.

How to improve time on site: Engage the user quickly and with minimal effort needed by the user (better ui/ux of articles to increase chances of reading through the entire tutorial, lower bounce rate, increase pages/visit).

Once we knew the main things we wanted to improve on and had a pretty solid idea of how we wanted to go about it, we set to building the site.

Site Improvements

One of the biggest aspects of a site we like to focus on is the usability and user experience of a site. Does the site flow well? Can people find other content? Does it just feel cluttered?

We felt our current design wasn’t very cluttered, but it could be improved to help us achieve our analytics goals.

Utilizing Large Screen Real Estate

With 37.83% of our readers coming in at resolutions greater than 1600×900, we made the decision to better use the real estate on the larger screens.

We added a second sidebar on larger screens and thsi gave us more opportunity to provide links to other content, engage users by putting an email signup form, and adding a Random Posts section.

Here is a comparison between old and new.

scotch-old-non-responsive scotch-new-responsive Now we have utilized the space better and don’t have this gaping section on the right side of our screen. Having more content on larger screens helps us lower bounce rate and increase pages/visit.

Better Site Readability

There has been much research done by other sites on site readability. Here are some of the things that we’ve found help overall site readability:

Font Size There are many schools of thought on font size in websites. I’m a fan of having font size at 16px for legibility. The idea is that at 16px, site font size will be similar to reading a book at 12pt font.

Reading: Optimal Font Size and 16 Pixel Body Copy.

Line Height This might be a little too high but we’ve set ours to 1.7. The usual is about 1.5 or set to an em amount but I think having the extra spacing helps.

Text Color Having pure black text on a white background is too harsh of a contrast for readers. We went with a good #333 for the font color. Not too dark and not too light.

On Google search results pages, they use #545454. Facebook uses #141823. Twitter uses #292f33. None of them use the pure black #000.

Characters per Line Research has shown that the optimal characters in a line for legibility is between 45 and 75 characters. We don’t follow this rule exactly since the content size gets larger as the browser is resized, but its good to try to stay around that range.

Here is a fun tool that can help keep the optimal line length as the browser resizes: FlowType.JS

Width of Content This goes hand in hand with the point above. When creating a responsive design, it is hard to just say your main content should be 80% of the browser width. On large screens, your lines could go on for a very long time. Having your content below 800px in width will help readability.

These numbers are going to vary based on personal preference, but overall, we think the choices made are a good medium between the different schools of thought.

Increase Social Engagement

We wanted to engage people better than just having a couple links to our social pages or just embedding the default Facebook, Twitter, or Google+ boxes on our site (they never look that great anyway).

We’ve taken our own advice from our CSS3 Hidden Social Buttons and implemented them on our site.

By simply adding a cleaner author and social section after our articles, engagement has increased greatly.

scotch-author-old scotch-author-new In addition to after the article, we’ve also added these to the header and of course kept our favorite spinning social icons.

New Features and Improvements

Cleaner Colors

We moved towards a more muted color scheme so that the content and images could shine. Simple use of our own calculated color generator helped create borders, background colors, and text colors that played well together.

Reading: Calculated Color Scheme Generator

Improved Sidebar

For a very brief time, we had a really buggy sidebar. Hopefully most of you missed it, but we’re back with a newer and much better looking one.

scotch-new-sidebar The secondary sidebar helps people find the content they want easier and once again helps with our goals of lowering bounce rate and increasing pages/visit.

Deep Linking to H2 Tags

Using a little bit of JavaScript, we added clickable links to our h2 headings. This allows people to deep link to certain sections of an article in case they wanted to reference it or link to it.

In the future we are looking into adding an outline of the headings so that you can see the full article outline while reading.

scotch-new-deep-linking-headings

Reading Mode!

This one we’re very happy with and it’s exactly what it sounds like. At the top of our articles, we now put a resize button. Click it and you don’t have to deal with any of the clutter!

scotch-reader-mode You can also link directly to an article using reader mode by appending #reader-mode to the URL.

Conclusion

Hopefully all of these tiny details add up to a solid redesign. One that will help us accomplish our goals, engage our readers more effectively, and create a better overall experience. If you’d like us to go in depth on any of these topics let us know in the comments.

I’m sure there are things we missed that could help improve site UI more. We’d love to hear and we’ll update on specific stats in the future.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.