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.
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:
Table of Contents
- 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.
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).
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.
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 1600x900, 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.
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.
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
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.
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
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
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.
Deep Linking to H2 Tags
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.
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!
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.