In our industry it’s common knowledge that a DYO (or “Design Your Own“) website is one of the trickiest things a web/interactive/design company can undertake.

First of all, paid work always comes first. So despite your best efforts the DYO falls by the wayside, only to just get going again before another paid job sweeps everyone off their feet.

Then you have internal wrangles – we are all “the client” – as well as “the experts” – as well as, well, “everything else!”

So that’s why the Click Suite website redesign, in dribs and drabs, took around 12 months.

I led the Strategy and Information Design.

Here’s a reminder of what the old site looked like:

CLICK SUITE HOMEPAGE (2008)

Where it got to now isn’t a happy accident…

BASED ON A STRATEGY

Click Suite decided to “walk the talk” and kicked-off the DYO process by working with me to create their own ‘Interactive Strategy’.

The Strategy included:

• A vision statement for the company.
• An analysis of where we believe Click Suite sit in the marketplace (and where they want to get to).
• Profiles of their diverse target audience, their goals (and how Click Suite will meet them).
• How Click Suite will measure the success of the new website.

You can design a website or interactive without a strategy, but having one makes the intention of the website more focused and with purpose.

Here’s what it looked like…

VISION

So why have a website? Is it just an online brochure? A portfolio? A place for people to find our email address? Well, all of those, but what makes it special?

Click Suite’s vision statement was about making it clear that they do (great) interactive media and want to “wow!” people with their work and ideas.

MARKET DIFFERENTIATORS

Click Suite picked six similar companies in NZ and I conducted a competitive analysis (based on each company’s website presence).

It was clear that the Click Suite website (built over six years ago) was showing its age. Most of its competitors had freshly designed websites. But despite this, in terms of content and services, all the websites felt fairly similar.

WHERE THEY CAN BE DIFFERENT

It’s tempting to be different just for the sake of it, but in some cases it’s OK to be like everyone else. For example, it is important to establish to the user they are in the right place and what they can expect to find, so the new website has an upfront explanation of what Click Suite does.

I also identified areas where Click Suite can be a little bit different and where they could be very different from the competition.

GAP ANALYSIS

TARGET AUDIENCE

Who will visit the website? Click Suite works closely with their customers every day so already had a good understanding of their audience.

Industries they frequently work with include Museums, Government, Business, Ad Agencies and Software/Web companies. The roles of the people inside these companies include Curators, Communications Managers, Marketing Managers and Ad Agency executives.

Their ideal client is someone prepared to try something new. They want their business/offering to stand out from the crowd. Typically the Managing Director of a company, this person organises and takes responsibility for the effective operation of their organisation as well as its overall strategic direction.

GOALS

I listed the questions customers were likely to ask (in their heads) when they visit the Click Suite website.

For example:

• Who is Click Suite?
• So, what do they do?
• Who have they worked with?
• What does their work look like?
• How does it stack up against the best?
• OK, so lots of awards, but how has their work been successful? (for their clients).
• Can I trust this company to deliver?

The website attempts to answer all these questions.

SUCCESS MEASURES

How will Click Suite know their redesign has succeeded?

Here’s a few of the factors I recommended they measure:

• You get inquiries via the website.
• Engagements for work via website referrals.
• People say “I saw that on your website”.
• Subscriptions to their newsletter.
• They get comments on their blog.

I also measured success by conducting usability testing on our site and monitoring usage statistics. One such measurement is Google PageRank.

The old Click Suite website had average visibility on Google with a PageRank of five. To ensure good exposure in New Zealand a ranking of six is desirable, and for international a rank of seven or higher.

I’m happy to report that the new site now ranks a six. Their latest goal is to get to a seven (the same as Trade Me).

PROMOTION

The old Click Suite website had a small ‘foot print’ on the web with average visibility. I changed their thinking to view the website as part of a much wider network – the world wide web.

You’ll now also find Click Suite on twitter, Vimeo and LinkedIn.

CONCEPTUAL DESIGNS

Click Suite set its designer loose on some early concepts. The themes were ‘play’, ‘learn’ and ‘explore’.

EXPLORING THEMES

ROADMAP

The roadmap is like a high-level plan split into three stages of work. Each stage has a focus – with an explanation of how it will add value to both the business and customers.

The focus of the first stage was to show that “Click Suite has got great ideas”. Future phases intend to add more detail about Click Suite’s team and services and provide the ability for visitors to add their own contributions to the website.

INFORMATION DESIGN

The Information Design started with the concept of allowing the user to switch between different modes of navigation (Relationship, Pictures, Text).

Here’s an early concept for the ‘relationship’ mode…

EXPLORING NAVIGATION APPROACHES

But Click Suite decided this was too ambitious with the limited time and people available, so ‘Plan B’ kicked in.

Plan B focused more on the portfolio viewer – which allows you explore projects in sequential order or filter the portfolio to view projects within a certain industry (e.g. Museums) or technology (e.g. Touchscreens).

HOMEPAGE PAPER PROTOTYPE

VISUAL DESIGN

The visual design had to showing off Click Suite’s work as well as complement a variety of visual styles ranging from 1995 to the present.

The swirly animations help guide your way through the new website – these were hand-drawn and are now extending their way into our document templates, presentations and, eventually, our business cards.

VISUAL DESIGN MOCKUP

DEVELOPMENT

If you’re technically inclined you might notice that the website is created in Adobe Flash, but it acts a lot like an HTML website!

The back button remembers where you’ve been, you can bookmark specific pages and lots of other clever stuff invisible to the naked eye.

USABILITY TESTING

Here are the results of the first round of usability testing on a working prototype of the website.

We tested the site with both staff and customers – setting them tasks followed by a questionnaire to gauge their impressions. We then worked to fix the issues and move the green line to a rating of four and above.

USABILITY TEST ANALYSIS (SURVEY)

THE RESULT

So how did Click Suite go with the DYO?

Only time will tell and Click Suite would love your feedback!

While it was tempting to design a wildly creative website with whacky navigation and hidden content, the new website mixes a bit of the traditional with a bit of the new.

The site is visually rich, but still looks and acts like a website. The large portfolio images can be presented in a variety of formats – still images, animation or video.

The case study text underneath each project has the flexibility to change and extend over time. For example, in future we plan to add cross-links to related projects and technologies.

Check it out…

• Extensive work portfolio (Tip: to move through the portfolio you can click the on-screen arrows or use the left and right arrows on your keyboard)
• Some fabulous ideas
• Dozens of awards
• Top notch services
• About the company, its people and how their clients have benefited from working with them
• Where to find Click Suite and keep in touch

Still coming… (sometime in 2010)

• HTML version of the website (for the few organisations which block Flash).
• SmartPhone version.
• Ability to filter projects by client.

They respect tsunamis in Japan

When the recent 6 metre tsunami hit the Samoan region, killing 189 people, there unfortunately wasn’t time to warn their people.

But there was time to warn their neighbours in the South Pacific.

We failed.

New Zealand had several hours to crank-up the tsunami warning machine. The police did their best to round up people on the shoreline, but apart from that all we got was out-of-date news reports, government websites which were light on detail and the internet rife with speculation and rumours.

In New Zealand SMS (text) messages warning people in high-risk areas arrived 3 hours too late. How many people on the East Coast of New Zealand could have been killed if this was the big one? Potentially thousands.

My previous article covered how bad the information out there was at representing where the tsunami could strike, the risk and what to do. The graphics which were available were highly technical, easy to misinterpret and in most cases was retrospective data of what had actually occurred – not predictions of what was coming.

And we have to take into account human nature. In New Zealand when we hear a tsunami is coming a fair number of us just assume it’s yet another false alarm. Hundreds even go down to the shoreline to watch it coming in.

Why? Saying “go to higher ground” isn’t specific enough. Some will think that means the big sand-dune a few metres from the shoreline.

I believe we need to give people a clear message at a glance, and just enough detailed information that they’ll take it seriously.

So, while I don’t claim to be a tsunami expert, I decided to have a go at creating a ‘general public’ information graphic which could be populated with data in real-time (or by hand and published online within minutes).

I encourage your feedback, or if you are a designer, have a go at improving on my design and let me know when you do.

Here’s my first attempt (click on the image to enlarge) or download the PDF (84KB) if you want a closer look.

The left panel shows a regional breakdown of the risk level, how high/inland to go and the deadline:

The map shows the risk level, how high/inland to go and the deadline for the major population centres:

The modular design allows the information graphic to be easily reformatted for different layouts. Here’s a snap-off of the map on it’s own:

And here’s a snap-off of the regional warnings:

Information Components

Good idea

The purpose of the graphic is to act as an early warning system to explain the following things I thought most people would be interested in:

• Earthquake magnitude.
• Wave height.
• Arrival location(s).
• Arrival time(s).
• Power of the wave (extent of inundation).
• How high I need to go up or/and how far inland.

Earthquake magnitude is easy, I included that.

Wave height is variable and actually a misleading factor as people wrong assume a small (say 3m) wave is not dangerous. It actually depends on the power or force of the tsunami – a small tsunami could still go a long way inland and cause devastation. So I deliberately left wave height out.

The other questions I have done my best to answer in the graphic.

Inundation

The extent of inundation was hard to represent in “birds-eye view” graphic as it depends on so many factors (such as being by a river estuary).

This could work if the map was interactive, like a Google Map where you could zoom into your region and see an overlay of the areas which are likely to be affected. I’m sure this sort of thing is coming.

Colours to Represent Risk

Another aspect I struggled with was the use of colours to represent risk.

At first I used the traditional red/orange/yellow to show risk levels. I decided this wouldn’t be useful for people with red/green colour blindness (the most common form of colour blindness).

I felt that using of shades of blue further emphasised water smashing into the shoreline, so this won in the end.

Red/Orange/Yellow or shades of Blue?

Your Thoughts?

Says it all.

Whether you’re a tsunami expert or not I’d love your feedback.

Keep in mind that the intention of this Information Graphic is to act as one way to communicate the risk and guide people to take action.

I realise it’s imperfect as the risks can be hard to assess due to dozens of complicating factors. But in all I believe it’s better than ‘almost nothing’ – which is what we get every time a large earthquake hits the Pacific.

PS: Thanks to Click Suite who unknowingly allowed me work-time to design this graphic last Friday while my bosses were holidaying in Fiji (I was thinking of you insanely relaxing on a beach during the tsunami season!)

Where's the custard in your supermarket?

Why I don’t use Card Sorting

Card sorting is a simple technique in User Experience Design where a group of  users are guided to arrange subject-headings under pre-determined categories or into groups which make sense to them.

For example, a card labelled “apples” might logically sit under a category labelled “fruit”.

It can be a useful approach for designing menu structures or website navigation paths.

But I haven’t used card-sorting since 1999.

Why? Because since the advent of the Content Management System (CMS) I haven’t needed to. The CMS changed the way I approached information architecture forever. I’ve never again needed to resort to card sorting in order to locate content in a place which is intuitive for ‘most users’.

In my view card sorting is a bit of a hack to resolve the issue of static websites where the content is forced to live in one place.

It’s like going to the supermarket and looking for custard powder. To me it makes sense to look for it within the cooking section next to sugar, baking powder, cornflour etc. But good luck finding it there because you’ll usually find it in the desserts section next to jelly and ice-cream cones.

Am I stupid? No, I just think different (and I know I’m not alone).

But why can’t the custard powder be in both places? And why can’t it also be next to the pre-made custard in the chiller? That would make sense too right?

Custard goes next to custard?

It’s because of physical constraints – supermarkets are dealing with physical products and usually can’t afford the space to locate food in more than one isle.

But, websites are different. We’re dealing with data, which is cheap, flexible and can transform itself into many formats and locations. This means, wait for it… the content can live in more than one place at once!

Why restrict it to live in a place the majority wants? What about the other 49%?

Call me a liberal hippy, I don’t care. I’m all for proportional representation.

PUT THE CONTENT IN THE PLACE IT MAKES SENSE TO [YOU] & [HER] & [HIM]

Doing this with a half-decent CMS is easy. It allows you to create multiple pathways to content by attaching categories/metadata/tags. The trick is to then leverage these tags and make them part of the navigation.

So all of a sudden a whole new world opens up… all roads lead to the content, in a way which makes sense to pretty much anyone.

An example I use when designing intranets is the ‘Leave Form’. Everyone uses it right?

But how might different people think where to find it? Where would they start?

• The Human Resources Manager might be thinking: “HR Form 305″ or “Holidays Act”
• The Team Manager might be thinking: “Leave Application” or “Leave Request”
• The Staff Member might be thinking: “I want to go on leave” or “Leave form” or “Holiday”

If the content lived in one place under one label then chances are that some people would spend precious time fluffing around trying to the find the elusive Leave Form.

A few might not find it and email the busy HR Manager. Well, I say, make it available in ALL these places. Why not?

Hereb are a few examples of sites with multiple pathways to content…

Ministry of Transport

Want to find statistics on road crashes? You can get to the right report via a number of pathways…

• By audience type (e.g. “motorists”)
• By transport mode (“land”)
• By topic (e.g. “crashes”)
• By content type (“research”)
• By searching (e.g. “statistics”)

Epicurious

Need to cook vegan chocolate cake? You can get to the right recipe via a number of pathways…

• By ingredient (e.g. “chocolate”)
• By dietary consideration (“vegan”)
• By category (e.g. “desserts”)
• By searching (e.g. “vegan cakes”)

Sustainability

Want to save power? You can get to the right advice via a number of pathways…

• By goal (e.g. “I want to save money on my power bill”)
• By topic (“energy”)
• By searching (e.g. “save power”)

I’m not saying you should throw card-sorting out the window. It might prove useful in some situations.

But it’s time we all starting thinking of content, not as a static thing which needs to be locked into a certain box in some dark corner of your website, but as dynamic.

Set it free! Let it bubble-up to the right place at the right time for your users.