If you were to re-design you website and other communications, what would you do? I gave myself this challenge in 2007 and after one false start (and lots of client work to keep me busy), this is what I did.

Background

Despite working with the web since 1994, I've never done a redesign, although I have set up four sites from scratch. This is because I'm not really interested in setting up websites, and more interested in how to use them to get people to do things.

When FairSay started in 2004, I put together a simple 5-page website and really only replaced the logo of the Plone CMS (content management system) I use. It grew as needed - but not in any planned way. The result was lots of buried content and a design that was "so 2004".

As a provider of eCampaigning services, I felt it was necessary to have a website that reflected current design norms and had content that better reflected FairSay's purpose and was a resource for e-campaigning practitioners.

Objectives

1. A website that looks and feels leading-edge and professional
2. A website that is better at communicating what FairSay does, what others are doing and provides insight for e-campaigning practitioners and managers
3. Non-web communications that are consistent with the web site look and feel
4. To challenge myself to learn the state of web and email technology and design in 2008
5. A design I could re-use for multiple FairSay initiatives.

Scope

While the focus was on the FairSay website, it was sensible to consider making the logo more professional looking at the same time and relatively little extra work to have a report and presentation template made by the same designers.

The Logo

For $99 in 2004, I commissioned a logo to be made. However I wasn't happy with the "instant swoosh" style of logo I was presented with, so I cobbled together a mock-up of something that actually fit my brief and the designer simply cleaned it up. It wasn't perfect but it would good enough.

A proposed logo	Logo 2004-8	Logo 2008-?

So in 2008 the designers said I should redign the logo first before re-designing the site so it could be integrated properly. I gave them the original logo brief, the existing logo and ask them to make it look more professional. I also referred them to the Web 2.0 howto design guide which I thought communicated the essence of current design quite well.

After being presented with a range of options, requesting various tweaks and asking a few friends for their opinion, i settled on the one above.

The Website

Once the logo was done and the colours set, the website design needed to compliment it. Just adding the logo to the default design of the Plone CMS wasn't good enough any more as it clashed and looked rather dated.

In 2007, I has asked a friend to produce a design (for a fee) and while the design had been good, I had to implement it in Plone and that isn't my area of expertise. When contracting a new designer, a key consideration was someone who could implement the design in Plone. The new designer wouldn't work with someone else's design since it had some elements that were difficult or impossible to implement well.

I again provided them with the brief for the un-implemented redesign I commissioned in 2006 and referred them to the Web 2.0 howto design guide site as it has some excellent points. I also identified a number of site in a similar sector as FairSay and what elements I liked/didn't like. I also wanted it to stand out from the others so I gave the designers the freedom to come up with something different but fit-for-purpose.

After being presented with a view variants and again providing feedback and asking for the opinion of friends, I settled on one and had it fine-tuned it for different types of content.

Click image for large view
2004-8 site	2007 (not used)	2008+ site

What I really liked about it (and help to shape) is:

• It used bold colours to clearly distinguish between different area of the page
• The font is larger and thus it forces me to fit less on a page and makes me prioritise. This makes it easier to read and more user friendly.
• The design is aligned with the logo colours and concepts
• I can use the black section at the top to communicate what the key things a person should do / know when they get to specific pages
• I can re-use this top black area on other sub-sites wherever it is needed and use normal pages for other content.

Website Architecture and Content

Of course, as I was to discover, the website design is the relatively easy part (especially when someone else does it!). Now I needed to decide what content should be on the site and how it should be organised.

I first wrote down the ideal, but realised I'd never get it all done in 2008, so I prioritised to my acceptable minimum. What I settled on was:

• What we do: FairSay services in detail, not just the listing that has been there for the last four years
• Events: the eCampaigning Forum is the obvious one, but I also plan to organise more and list others' campaigning related events
• Tools: there is the eCampaigning Tool for Plone FairSay (Petri and I) developed which few people know about and the articles and video from the 2008 eCampaigning Forum
• Networks: the eCampaigning Forum email list / community and others that people can get involved in
• Blog: the poor unloved space where I should be pouring out my expertise, insights and thoughts
• Other: stand stuff like contact, about, etc.

Now I just need to write the content - and that took the longest! Most of the content either had to be created from scratch or re-written to be more compelling....but I got there after several weeks of plodding away and editing.

The Email Newsletter

Confession: people have been able to sign-up for email updates since 2007. Yet I've only sent one emailing due to not prioritising this and being embarrassed to send a plain-text email (which is fine for urgent actions). I regularly advise clients against so few and infrequent email communications, so I should really practice what I preach. Of course, my communications are not life-changing than those of my clients - so I don't feel too bad about it.

However now I have a snazzy new (as of 2008) email newsletter design that does apply the advice I give to clients - even the advice they ignore. The key aspects of the email newsletter are:

• The introduction is personal and viewable via the preview pane of email clients - unlike that of almost all email newsletters I have seen (I hate having the logo as the first thing I see as it makes the preview pane for scanning useless)
• Even the HTML version is quickly and clearly readable on the growing range and popularity of email-enabled mobile phones
• There is a table of the contents at the top right and this is also viewable via most email preview panes.
• The logo is present but not in-your-face
• Email mandatories (e.g. sender details, unsubscribe link) are prominent at the right side of the email.
• It looks almost the same with or without images enabled
• It was tested and works in all significant email readers (software and web mail)

I tested the emails in both Campaign Monitor and Mail Chimp

two pay-as-you-go mass emailing services that also seem to have great email testing tools.

The biggest challenge was instructing a designer who is used to doing web pages that use all the latest standards and best practices to forget them all when designing for email. This is because there is little standardisation of email clients and thus much of what works for web pages doesn't work at all for email.

I chose an email newsletter even though they are less effective than single-ask emails. The reason is that I will not be sending urgent action emailings and sending FairSay updates one article at a time may seem a bit extravagant to time-poor recipients. Maybe that is a question to ask subscribers!

Content, like for the website, also is an issue. So this blog post is one item that will go in the newsletter as will a post about a current project and the launch of FairSay's e-campaigning training series.

Report Design

FairSay's client work usually results in the production of a report. So I thought it would be nice to have a report design that was more than just the logo. I first searched around for who did 'formatted' reports and then identified what elements of the reports I liked.

The the designer produced a design proposal. Again, after some feedback and new proposals, it was finalised and I then had to implement the design in MS Word. I couldn't get everything exactly the same (eg colour to the margins), but I did get most of it the same.

Click image for large view
Title Page	Table of Contents	Content

You'll notice that compared to the website, it uses the same red, but a lighter green. It also features a range 'pull-out' styles I can use in a report for emphasising or supplementing a point.

Presentation Design

I regularly do presentations for a range of reasons

• At the end of most client work, I do a face-to-face presentation of the key findings and recommendations.
• The FairSay e-campaigning training series requires presentations
• Presentations at sector events such as the NCVO Campaign Effectiveness programme's campaigning certificate, the NCVO annual conference, Media Trust, and various other sector events.

Thus, like for the report, website and emails, I found presentations I thought had good elements and directed the designer of these. The results are a simple yet distinctive design that is and consistent with FairSay's new look and feel.

Click to view larger image
Title Slide	Content Slide

As usual, the design is nothing without great content so I need to ensure the content quality is high.

Post Site Launch

Before launching the site, I installed an 'alias' tool that allows me to map the old URL of a page to a new URL. Post launch I then needed to find all the URLs people were linking to and ensure there were aliases so they would still get to the same page. To do this I:

• Used Google Webmaster Tools to find bad links, popular pages, what links Google has stored and submit the new sitemap to Google
• Changed any links I had made on third party sites if necessary

So now all old links should work just as well as the new ones - except if I don't want the page on the site of course :-)

Wish List

For launch, not everything I wanted (vs. needed) to have in place was feasible, so what I plan to do next is:

1. Website review by 3rd party to identify any issues (Done: see FairSay.com Web Doctor report)
2. Refine the design of the top-portlet and feature pages, including commissioning supporting images (Done)
3. Project summaries for each of FairSay's client projects
4. More resources for practitioners (tools, networks, events)
5. Each email newsletter edition available on-site
6. Blog posts with the latest practices, insights, opportunities, etc.
7. Automated portlets (the side and top boxes) instead of my manual ones
8. Social media links and links to FairSay's social network profiles

Key learning

Part of the reason for writing this post is to share what is involved in a redesign so that others can learn from it as well. So the key learning poing are:

1. Have a design team that can implement the website design in your CMS
2. If you know generally want, find good guides and examples for the designer - it helps them help you
3. Email: if you can't find someone who also has a specific expertise in email design, then you will need to factor in time to do this yourself.
4. Email: Assume parts of all email designs will fail in email clients until proven otherwise.
5. Consider commissioning other design changes like logos, print templates, presentation templates, etc at the time of the re-design so that they are all consistent
6. If you need to create new content, assume it will take several times more effort than implementing the design (assuming you followed point 1)
7. Reduce your content requirements to the minimum acceptable for launch and then add the other content over time after launch

Anything you want to know about the re-design?

You've got this far in another long post, but is there anything you'd like to know about the process that I can add?