Ever heard the saying "you're your own worst client?"
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.
Here's a reminder of what the old site looked like:
ABOVE: CLICK SUITE HOMEPAGE (2008)
Where it got to now isn’t a happy accident...
BASED ON A STRATEGY
We decided to “walk the talk” and kicked-off the DYO process by creating our own ‘Interactive Strategy’.
The Strategy includes:
- A vision statement for the company.
- An analysis of where we believe we sit in the marketplace (and where we want to get to).
- Profiles of our diverse target audience, their goals (and how we’ll meet them).
- And how we 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 focussed and with purpose.
Here’s what ours 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?
Our vision statement was about making it clear that we do (great) interactive media and want to "wow!" people with our work and ideas.
MARKET DIFFERENTIATORS
We picked six similar companies in NZ and did 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 our competitors had freshly designed websites. But despite this, in terms of content and services, all the websites felt fairly similar.
ABOVE: COMPETITIVE ANALYSIS
WHERE WE 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 our new website has an upfront explanation of what we do.
We also identified areas where we can be a little bit different and where we could be very different from the competition.
ABOVE: GAP ANALYSIS
TARGET AUDIENCE
Who will visit our website? We work with our customers every day so already had a good understanding of our audience.
Industries we 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.
Our 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
We 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 do we know we’ve succeeded?
Here’s a few of the factors we plan to measure:
- We get inquiries via the website.
- Engagements for work via website referrals.
- People say “I saw that on your website”.
- Subscriptions to our newsletter.
- We have comments on our blogs.
We’ve also measured success by conducting usability testing on our site and monitoring usage statistics. One 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. Our 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. We changed our thinking to view the website as part of a much wider network – the world wide web.
You’ll now also find us on Twitter, Vimeo and LinkedIn.
CONCEPTUAL DESIGNS
We set our designer loose on some early concepts. The themes were ‘play’, ‘learn’ and ‘explore’.
ABOVE: 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 our first stage is to show that “we’ve 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 our 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...
ABOVE: EXPLORING NAVIGATION APPROACHES
But we decided this was too ambitious with the limited time and people we had available, so 'Plan B' kicked in.
Plan B focussed 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).
ABOVE: HOMEPAGE PAPER PROTOTYPE
VISUAL DESIGN
The visual design had to showing off our 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.
ABOVE: 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 our first round of usability testing on a 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.
ABOVE: USABILITY TEST ANALYSIS [+] ENLARGE
THE RESULT
So how did we go with our DYO?
Only time will tell and we’d 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.
We’re thrilled with the result and we hope you are too!
Check it out...
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.
