Asterisk* 2004 Redesign Case Study

Step One — Discovering a need for a redesign.

I had not intended to redesign until the older version was at least a year old. I changed my mind after gathering feedback and talking to my users, as well as putting some thought into how much time I was spending on maintenance.

I realized very quickly that it was time for a redesign.

In the past this site has been a bit of a pain to maintain. I had too many templates and frankly, too much content to manage. I felt that I needed to streamline what I was publishing. I began to think about what I could remove from this site as well as other sites that I maintain.

I began to pull and consolidate content. I removed categories that I felt weren’t useful and I solicited feedback from some of my readers. In doing all of this I realized that this blog had grown into something more like a full site. For all intents and purposes all of my traffic comes in via Asterisk*, so I felt it was a natural next step to merge it all together. I’m still in the process of doing this.

Even though I had greatly simplified the site (and my life) I realized that the current user interface wouldn’t be able to support my changes very well — thus a full blown redesign.

Step Two — Setting goals

To begin with, I needed to lay out goals for this redesign. I contacted a few of my readers and asked them what they would like to see on the site. I added my own thoughts based on other blogs that I liked and came up with the following goals and requirements for the redesign:

• Streamline both the content and user interface
• Maintain the “brand” as much as possible
• Tighen up the layout
• Clean up and refocus the frontpage
• Fix CSS issues — go to float
• Spend more time on the details

Step Three — Information Architecture and Design

Aside from categories, Asterisk* didn’t have a really solid IA and I wasn’t, at this point, convinced it needed one. It pretty much consisted of categorized entries and a few “orphan” content pages. This seemed to work, but I’m not sure how well.

I thought it might be a good idea to work out a basic IA so that I could consolidate similar information as well as give the site some much needed structure. I took a stab, using the feedback I had and my goals. I came up with the following “buckets” and an idea for a persistent site-wide navigation scheme:

• About - this is a no brainer.
• Archives - this is something I didn’t have a page for and felt would not only help me stay organized, but help the user and keep the homepage clutter free.
• Links - As part of my goal to clean up the homepage I wanted to move my “external essentials” to its own page. None of the users I ran this buy seemed to mind.
• XML Feeds - I thought this could use its own page.
• Accessibility - I had a page built out for this already so I thought maybe it should go here as well.
• FAQs - The FAQs pages have been a real hit and I figured they would continue to be so.

This was my original take. As you can see if you check the current IA — it was changed.

At his point I decided to check out the “competition.” I looked through every blog on my blo.gs blogroll, as well as some others to see how others approached their IA. Most blogs are (were) in the same boat I was in and don’t really have a real over-arching IA.

I noted a few that I thought were doing what I wanted to do and wrote down what they used for labels and what kind of information they’d put in each bucket.

At this point I decided I could move the Accessibility Information into the About section and keep the news feed information on the hompage where it seems most people will look for it. This ended up in the footer.

I knew full well I wasn’t done here. I still needed to run it by the users. It was a start, nothing more.

The IA and content placement roughed out, I moved on to the actual design. I began by spending an hour or so looking through magazines and other print materials for ideas. I began to gather some clippings. I then moved online and noted a few sites that I particularly enjoy and find very easy to use. I wrote down the various things I liked about them.

I began to sketch out some various looks and layouts. I didn’t get too crazy — I wanted to make a change, but not start over from scratch. I realized a few things right away. I wanted to go back to a centered layout and I wanted something a bit “lighter” than the grey version. I wanted something different, but not too different.

That’s when I decided to ditch the old background. At least for the most part. I did feel it was part of the overall look and feel of Asterisk*, so I tried to find a good clean way to fit it in. As you can see, due to user request, the background made a comeback and I feel it adds something unique to the site.

I eventually came to a basic layout and mocked that up in Photoshop. Once I had something I felt captured my vision and would have a good chance of getting me to my goals I stopped working for a few days. At this point it was rough — no detail, just “filler” color. I did have a photo in mind that captured the kind of feel I wanted, but I had yet to nail it down.

Usually I would nail the design down a bit further in Photoshop before I moved into production, but since I was my own client I was eager to see how this all would fit together I jumped right into production.

Step Four — The CSS Rough

I built out a basic page that would represent my new homepage. I cut graphics for the header and built out the main navigation.

I sent the link around to folks I trust to give good feedback and based on their reactions I made some changes.

I got the header and navigation pretty much to where I wanted it to be — as far as “look” goes. I had the rest of the layout built out in a basic form and began to pull some “dummy” entries into the layout from Movable Type to nail down the layout of the actual content content.

I came up with some initial styles for my content and mocked up a few of the details. I moved a few things around, tried to add some color and a bit of my own style without changing anything that would have an adverse effect on my readers.

At this point I knew it was starting to look quite a bit different than the previous versions. I again asked for some feedback, took a few days and really thought about what I wanted to do and how the changes would effect the users.

Having decided that I liked the direction it was going in and getting the idea that the changes would be well accepted and viewed as improvements (even though it’s quite a change) I pressed on. My design was well on the way to meeting my goals.

At this point I just needed to begin to work on all the details and build out the various templates. Because I wanted to do it right, and maybe this time stick to my guns and not redesign for a year or more, this part took a long time. I also had a few freelance projects crop up, so I ran into a bit of a resource problem.

Step Five — User Testing

I’d gathered some feedback up to this point, but I’d not actually sat down and had someone tinker with the new design and give “live” feedback. I decided to do a bit of usability work before I moved on and finalized the templates.

I grabbed a few people and ran them through a very informal script. I wanted to see if they were ok with the labels I’d chosen as well as a few of the conventions I’d worked out. I asked them to search the site for specific content and got their impressions on the color, readability and aesthetics.

For the most part, and I wish I could get into more detail, everything went well. it was through this process that I trimmed down my main nav a bit and actually changed some of the labels.

Once this was done I felt that I could nail down the template and move on with building out the site.

I also realized that due to the resource issue I was having and my lack of time that I needed to move forward quickly, even if it meant tossing aside some plans and putting something out there that wasn’t 100% done.

Not ideal, but necessary in order to keep moving forward. Almost exactly like a “real” project.

Step Six — Development

It took me a week or so to build out the site to the point where it was launch-able. I ran into quite a few browser display issues and needed to make various tweaks to the templates.

I also ran into some problems with my server and how it handled some of the Movable Type plug-ins I was using. These weren’t absolutely a must for launch, but I spent a considerable about of time ironing them out.

Aside from that this phase was pretty straightforward. I developed the pages, ironed out the bugs in the CSS and tested in various browsers until I got to the point where I felt it would be “good enough” to launch.

Step Seven — Launch!

I launched the site knowing I still had some issues to iron out. To be honest, there are still a few known and outstanding issues, but I feel they’re very minor.

Once the site was out there feedback started rolling in. This was great as it helped me work out some of the issues, as well as identify some that I didn’t know existed.

For this particular project, however, I was pretty sure my users would be understanding. I don’t think I’d have jumped ahead like this on most projects.

It’s too bad that all of my projects can’t benefit from such a highly engaged group of users to help sort things out. Hat’s off to everyone who helped.

Wrapping Up and Moving Forward

The site has been up now, in its new look, for about two months and so far it’s been really great. I think I’ve been able to hit on, in varying degrees, every goal I laid out for the redesign and so far the feedback has been overwhelmingly positive.

I’m hoping to avoid a redesign for quite a while and focus more on the content and my other projects. That is not to say I’ll not be working on this site. Because it’s so much easier to maintain (and tweak) I’ll be able to improve on the site incrementally as site goes on and as always I welcome your feedback.

This site couldn’t be possible without my readers and I hope they have a large say in how Asterisk* evolves. For example, you wanted the background to come back — and it did! Quite a nice improvement as well!

All in all it’s been much like any other project that I’ve got. This time I came to realize how much of a demanding client I’d be. I came across many of the same issues I have to deal with on my other projects and worked them out in much the same way, albeit on a bit of a different schedule.

Of course I was able to do things a bit different in spots and some of my process here might not be very representative of a typical project, but I hope you all got a little something out of this case study.

I know it’ll help me next time I need to redesign.