Why We Did It: Redesigning the Site

A lot of work goes into creating any site, but there's even more when you do a redesign, mostly because there's so much more content to deal with. If you're facing a redesign of your own, or think you might want to freshen up your site's look one day, here's my tech-guru with a breakdown of what we did and why.

Take it away Tom...

Let's Do a Redesign!
We've had some requests to discuss what we changed on the site and why, so I thought I'd take a stab at summarizing as much as I can fit into one discussion. There's plenty more detail that is not covered here, but we'd run the risk of turning this into a site about site design if we went down all of those paths. I'll try to keep it relatively short, but redesigns like this is part of what I do, and once you get me talking, it's hard to shut me up!

We started off by examining the site and asking the tough questions. What is good about it, and what is bad about it. No holding back, no “because that is the way it is” excuses. This can be a hard step for someone who has a site that they have put a lot of time and heart into. But it's important to not be afraid to ask the tough questions. You have to be impartial.

Stuff That's Great
Huge base of existing content
Good, connected group of regular readers, who comment and participate

Stuff That's Not So Great
The number of articles available is not obvious
Older articles go largely unread
No strong method for showcasing popular articles
Inefficient use of screen space
Cluttered screen with enough options to overwhelm visitors
Color scheme is dark
No cohesive pattern for traffic to follow
Existing users rarely use the popular articles links or the tags for searching

Figuring Out Why
As we looked at the numbers of new and existing visitors who came to the site, some usage patterns become obvious. Existing readers generally followed the post of the day and did not delve into existing articles much. New readers typically either read the article of the day and left or they looked at a few articles that were still on the front page, but again did not dig into the existing base of articles.

This lead us to ask “why.” Surely an article written a year ago about Point of View was as relevant to a visitor as a different article this week about Point of View. But viewers had no easy way of knowing what was out there, especially new visitors who didn't know how many articles were on the site.

Our Goals:
Once we identified the areas where we could improve the site, it was time to set some goals.

Make it clean and fresh looking

• Present the broad base of articles on the site so that readers can see that there's more than the post of the day.
• Provide easy access to all articles, not just the top 10 listing.
• Put a fresh face on the most popular articles, the ones that you, the readers, have decided are the most valuable.

I should mention at this point that Janice is an (award-winning) designer. For years, she has been designing everything from magazines (many different lines of magazines) to credit cards to ad campaigns, to cigar bands and even updating royal seals. The site grew up organically without any real plan. Now it was time to bring her talents to the game.

Planning
We looked around at some site options. Each place had some benefits, each place had some downsides. WordPress was the favored destination for a while, due to the benefits of it's wider range of widgets. In the end though, we decided to write our own widgets to do exactly what we needed and stick with Blogger. The trade off is that we avoided a lot of re-work on existing articles (reformatting, changing links, etc.) that would need to happen if we moved to WordPress.

White Out
Ever see one of those DIY shows where the first thing they do is paint a room or house all white so they can see the space properly before they start designing? We did the same thing. I created a copy of the blog, and articles. I set everything to a simple black and white color scheme.  Plain vanilla, with no palette bias. Now we could get started.

First Draft
We identified two tools that we needed to create in order to address the serious issues of content discovery and access. The tricky part was to make our solutions work in the Blogger templates, which can be a bit limiting from a web design standpoint.

The first thing we needed was an index of the site that would be structured in a familiar way, like a book's table of contents. Attached to each topic would be a “landing page.” The landing pages are essentially the chapter introductions for each topic. While they're all set up now, we'll be beefing up what is on them over time, making them even better for first-time visitors and readers who need help with the basics. Setting up the index took about 3 hours of my time (would have been less if she hadn't made any changes, but hey, this is the draft, right?). The only rough part of setting it up was an issue that Blogger has with trimming leading spaces (even HTML spaces) from each line. We wanted that indent and weren't going to take “no” for an answer! WordPress offers a widget that can do a specific kind of index of this nature, but any predesigned widget also comes with some limitations. We're very happy with what we created on our own.

Second, we needed a way to help bring new life to popular articles. Sure, they may have been written two years ago, but the advice still stands. How would new visitors know they existed unless we either A) tasked visitors with going through the index and hoping to find what they wanted or B) essentially promoting the articles in a custom widget. Anyone in the web world will tell you, tasking users with finding stuff on their own is not a success strategy, so we set about writing a custom widget that displayed the features at the top and bottom of the page. This took about 10 hours of my time, plus an hour of so of my friend Steve's time. It took several more hours to select, adjust and attach graphics to the display and to find graphics she liked for everything. (Have I mentioned that graphic designers can be a bit picky about which graphics they choose? ).  It would have taken less time, but CSS is not my personal strong suit, so there was plenty of trial and error.

We're excited by how positive the response has been to the features display.  It really does bring new life to the site. 

Now that we had the technical stuff done. From here on it was mostly about writing landing pages, reformatting existing articles to the new templates, etc. This is where Janice was a real trooper and spent days slogging through every article on the site, updating tags, and generally cleaning up where cleaning up was needed.

Traffic
Finally, we had all of the structural issues solved: helping people discover the content present on the site. This also helped us in some other ways. In the standard “flat” blog metaphor, with only keywords to use for linking people to “older” content, there is very little to drive people to look at those old articles. The percentage of visitors who used the tags links was very low. Tag lists also lack the ability to help us discover what it is that people wanted to read about. Sure, they may have clicked on a specific tag, but they are out of context.

Now, with the index, we can track what topics people explore. It is far more informative to know how many people visit the site and go to the “Planning your novel” topics versus “editing your novel.” This helps in determining areas where we have enough articles to meet the demand and where we may need to add some more information. Over the next month, we'll be learning a lot about what people hope to find, not just by what articles they did read, but by separating the traffic flow analysis of existing readers and new readers. That way, we can make sure both sets of readers get what they need. After all, a regular reader who comes to see the daily article has different needs and expectations than a first time visitor who found the site by Googling “writing advice.”

Here's a specific example:
Looking at a two-week period prior to the change, new visitors to the site from Google searches had a 74% bounce rate with a 1:26 second visit time with an average 1.68 pages read. Meaning that when first time readers came to the site, most users read the top article and left. So most new visitors are judging the site based on whatever article is at the top of the page the day they visited.

Conversely, those coming from Blogger links (people who read other writing blogs and follow a link to our site) had a 59% bounce rate, with a visit time of around 6 minutes and viewed 3.15 pages per visit.

Clearly, the readers who felt the site was recommended reading saw more value and stayed to read more, while those coming to the site without expectations were unlikely to stick around long. This is where an improved site index and features display can help us the most. The first impression of the site is no longer whatever single post is on top that day, bur rather they can now judge based on the range of total content offered. How well we've done our jobs will become evident over time as we watch the traffic patterns and see how they change.

In just the few days since the change, we can already observe some trends in which topics on the contents panel get the most interest from new and existing readers.

In case you are wondering, no we do not track anything like your personal information or who reads what. Rather we collect aggregate information such as “12% of first time visitors users read feature #3 linked on the top features display” or “8.2% of visitors went to the editing your novel index topics but only 3% of those read any article when they got there.” This will lead to a whole new set of “What is good, what is bad and why” questions for us to ponder for a future round of improvements.

Playing Dress Up
By this time, we had a functioning blog set up on the test site, with a blank white canvas for Janice to work on while being able to see how everything would look.

One of our goals was to keep things clean and open. It's easy with widgets to add too much, to over saturate your visitor with so much information or so many links that it's not really clear where to look. We agreed to keep it rather minimalist. We switched to a two column format so that more space was available for the articles and to help avoid the temptation to say “there's room, just add more stuff.”

Coco Chanel famously said that when it came to accessories, after you dress but before you leave the house, always take off one thing. In other words “less is more.” We feel that the end result works well, because it puts attention on the areas that needed the most help, and avoids clutter.

Then Janice created the new banner on top, which I rather like (the ugly placeholder I had up there was awful). We spent a day or so looking at various color pallets for various reasons. It's important when choosing colors to pick them and then sit back and let them stare at you for a while. What seems fresh and new when you first change it may not feel so fresh after six hours. We got some friends and regular readers on the phone and asked them to visit the site and just tell us what they thought about everything from the layout to the colors. We took it all in, and finalized the site.

We've had a few comments from folks who miss the blue layout. There are a few reasons we switched. One reason is that some readers view the site from work. In an office setting, a white screen is less obvious than a colorful site. Other factors were studies that show that reading black text on lighter backgrounds produces less eyestrain on the greatest number of people, especially the visually impaired. While there are people who prefer dark backgrounds and some who prefer white backgrounds, statistically, fewer people have trouble with simple paper-like dark text on a white background.

Tracking Tools
If you have a site and do not use Google Analytcis, I highly recommend that you look it up and install it. They provide the most comprehensive tools you can find for tracking your site traffic for free, and are in fact better than nearly all fee-based services. They have a wonderful tool called In-Page Analytcis. This tool takes your traffic information and displays it on an overlay on top of your website. So you can look at a link or button and see a caption balloon on it that reads “3.2%” showing that 3.2% of your visitors used that link or button. Unlike many of the free blog stat counter tools, they do not just throw away your data after 500 entries or three months, so you can get good long-term trending information.

Keywords and SEO
Blogging tools are not always the best for optimizing how search engines see your site. We've manually added tags to the site, so hopefully we'll be seeing some more readers from searches on Google, Yahoo and Bing.

One way you can help, if you are so inclined, is to share links to the site with others. Search engines rank sites partly by how many other pages or sites have links to it. So if you post links on your blog or in forums when you mention something about an article here, it can help people find the site easier in search engines.

Ads and Revenue: the Dark Side
This is the point where enter into debate about the site and where it is going. I'm a web products guy. Like it or not, when I work on something, a cost benefit analysis is running in my head. Janice is an artist and a writer. Let's just say that these are not topics she wants to discuss about for her site. In her view, having a single ad anywhere on the site is akin to putting on the Vader helmet and accepting evil into your life. While I can fully understand her view, I do sometimes think “That writer's conference you wanted to go to? Wouldn't it be nice if the time you spent posting every day could help you do some things you wanted to do?” While the intent when she started this site was not to make money from it, being able to turn the daily time spent on it into something that she wanted to so is a nice thing. But hey, I'm the husband, and of course I'm always going to want my girl to be rewarded for anything she does. It's in my contract!

So in the coming months we may test drive some ad placements. Nothing as obtrusive as overlay panels that block text. Just some small things on the sides or bottom to find out what potential exists. If we ever put up an add that you feel is troublesome, or if you think that any ads at all will ruin the blog, please let us know. We would rather have happy readers than anything else.

Final Thoughts
The site is a labor of love. It's something Janice was just meant to do. And she takes great comfort and joy in the responses that she gets from all of you. She has put enough energy into the articles on this site over the past few years to have written another book or two. But talking about writing energizes her in a way that just writing books cannot. If you wish to reward Janice for her efforts, just post comments on articles that you like or wish to talk about more. It really makes her day to hear from everyone.

I wanted to thank everyone for being so patient with us during the transition. It's likely you will not hear from me again unless someone has a question that you ask Janice to pass on to me.  The job of the nerd is to get stuff done and then get out of the way so that the experts can get back to creating interesting things. Good luck with your writing!