A web designer's anecdotal design brief process

A humourous guide for clients and the website design brief

The following is a web designer’s helpful and anecdotal perspective to guide clients through the 8 point process of writing a creative website design brief; the ‘what to do’ and ‘what is best to avoid doing’ list.

So, you’ve secured funding for your new B2C or B2B website, it’s now time to get things moving in the right direction.

The first thing that you might want to give careful consideration to is creating a website design brief. A brief for your new site should be a comprehensive and helpful document, something that our design, web development and search marketing teams can look at to get an idea of what you want. It needn’t be too extensive; keeping things concise and to the point is much more useful.

In order to help you put together a brief quickly and easily, we suggest breaking it down into the following sections. One of our web designers has also added some links to one of their favourite sites to give you an idea of the things that we don’t find extremely useful.

1. What do you want the website to do?
99% of the time the answer to this question will be, “To make money”. How it makes money is the important thing. Do you intend to sell items or services online? Is the site intended to be a catalogue of your products designed to get your phone ringing? Will it be an information portal generating money from advertising? Will you charge for membership? If it’s a top secret idea that you want to guard with your life... well we’re usually willing to sign non disclosure agreements.
Client's funny response about what the website should do

2. What’s your target market?
A site that targets 80 year old woman is going to differ slightly from one targeting teenage boys. Will the site be accessed mainly from desktops or people on the go using mobiles and tablets? Do you specifically intend to target mixed race 50-somethings looking for a good fish and chip shop in the Leyton Buzzard area? You know your market better than we do, it’s your job. It’s our job to know how best to target that market.
Client's funny response about their audience.

3. What’s your budget?
We don’t need to know exactly what you’re prepared to spend but a ball park figure is helpful for all concerned. It’s also good to be realistic in your expectations. While it’s true that there are a number of companies out there who offer to build sites for under £100 that sort of budget is more likely to result in the website equivalent of a Reliant Robin rather than an Aston Martin DB9
Client's funny response about budget considerations.

4. Do you currently have a website?
If you do what’s the URL? What aspects do you like about your site? What are you not happy with? Is it working? How long has it been online for? What did it cost you? Have you seen a return on the investment?
Client's funny response to expectations for the website.

5. Do you have an existing identity?
If you already have a logo, colour scheme and brand guidelines that’s great, it makes our job a lot easier. If not, would you like us to create any of these for you?
Client's funny response about the corporate identity.

6. Any idea of how you would like it to look?
What’s helpful here are some example sites that you like the look and feel of. Sites that will work with your product and your target audience. Is there a particular feel you want to achieve? What sort of experience would you like the design to convey?
Client's funny response about the look and feel of the website.

7. Keep things simple
There’s no need to over-complicate matters with long winded explanations describing in great detail how you expect every section of the site to work. When it comes to meeting face to face we can discuss functionality. If you have a complicated, idea we’ll strive to make the user experience as simple as possible.
Client's funny response about keeping it simple.

8. Anything out of the ordinary?
A lot of our clients focus on the unique selling point of their website, something that makes them stand out from the crowd. It could be a unique way of interacting with users that completely immerses them in the experience, perhaps it’s more about the look and feel, maybe there’s an idea for some off the wall navigation. Sometimes this idea can be so great that it encourages everyone on the team to get behind a project that could turn out to be the next big thing, sometimes however...
Client's funny response about point of difference.

Rocktime has naturally written out some steps you can follow for writing a creative or campaign objectives brief and our Sales Team will happily help you draft out some ideas for your website. It should be an enjoyable and exciting exercise.

What funny anecdotes do you have about the website design process?

Authors: Foz, Fiona Anderson

Social Mobile Local Global and the Olympics

Team GB uniforms by Stella McCartney and adidas

At the time of writing this, The United Kingdom of Great Britain and Northern Ireland, commonly known as the United Kingdom, or Great Britain and Northern Ireland, or more recently 'Team GB' are doing rather well at London 2012 Summer Olympics. With a haul of 26 gold, 16 silver and 14 bronze medals - it’s our best showing for over a century. With 204 countries competing, this Olympic Games is truly a global event and shared throughout the world on social networks.

Social - Twitter
Before the games even started a Greek athlete was kicked off the team for tweeting with a racist overtone and it’s been a story of highs and lows for Twitter ever since. After posting some pretty malicious tweets about the diver Tom Daley, a teenager from Weymouth was arrested and given a dressing down by the police. For a fleeting moment this story was global headline news and seems to have re-ignited the debate as to how the authorities should deal with social network incidents of this nature.

Adam Naisbitt set up @2012TicketAlert after he tried to get hold of gymnastics tickets for his fiancée. This unofficial ticket alert helped thousands of people get tickets and filled the empty seats that were causing such a stir in the media. Of course the people at Ticketmaster and  LOCOG didn’t like his code crawling their site and they put a stop to it. But 30,000 angry Twitter users ensured that the service was re-instated. The Ticket Alert profile now has 54,466 followers.

Google
Each day Google has been running little games on their home page that typically take less than 30 seconds to play. They look nice, well illustrated as with all Google Doodles, are easy to play and are relevant to the day's sporting events.

Any search involving the keyword ‘medals’ results in an up to date medal table at the top of the SERPS. Yep, the UK does seem to be doing rather well!

Facebook
After winning gold in the Women's Heptathlon, Jessica Ennis had amassed over 600,000 followers and counting: today it is 726,516 with 957,976 talking about this page. Chances are that at least one of your Facebook ‘friends’ has liked her official page. But that is still a way off from the American basketball player, Kobe Bryant’s who has 13 million 'Likes'!  David Beckham, Britain's most decorated football player of all time, has 20 million. There’s even a trend in celebrity chart  if you prefer that to the actual medal count! Naturally, Usain Bolt is the most popular Olympian today.

There’s an app for that.
Shortly after the first athletes started arriving at the Olympic village, 'GPS, location-based Grindr', an app, or also known as a 'geosocial networking application', that hooks up gay men with others in the local vicinity, crashed due to the increase in traffic. Both the BBC Olympics and the official London 2012 apps have proved extremely popular. The free BBC Olympics app for iOS and Android devices gives headlines, video features, schedules and details about every sport, country and competitor.

The Join In app for iPhone, Android and BlackBerry phones connect viewers with local news updates and information about everything that is going on, in and around the Olympics, such as maps, guides, schedules, information on cash machine locations, ticketing issues and wheelchair access.

Rule 40
“Except as permitted by the IOC Executive Board, no competitor, coach, trainer or official who participates in the Olympic Games may allow his person, name, picture or sports performances to be used for advertising purposes during the Olympic Games.”  In the interests of protecting big global business sponsors, this effectively barred athletes from thanking any unofficial sponsors on social media platforms. The athletes are considered 'labelled marketing assets' and Twitter as a 'marketing tool'.

Media - BBC
The BBC, as usual, have done us proud. The 'Danny Boyle, Isle of Wonders' opening ceremony had 27M UK viewers and not surprisingly, generated more tweets than the entire Beijing Olympic Games four years ago and amassed a staggering 9.66 million worldwide tweets . Nice touch honouring Tim Berners-Lee, the founder of the Web, in the ceremony. You can watch any event live on the BBC website. You can get involved with live comments and nowadays the BBC even retweet comments.

All the major newspapers like @Telegraph2012  have set up dedicated Twitter streams of Olympic coverage. Many of the newspapers regularly make direct quotes from Twitter posts.

The Olympics inspired blogs from all over the world, from sport clothing designs, jokes, politics, women's rights, celebrity to youth engagement ideals.

Transport
In addition to Transport for London’s (TfL) permanent Twitter account (@TfLOfficial) a number of Transport for London Twitter accounts were set up to provide additional local advice on how services and roads are operating during the Games @TfLTrafficNews, @TfLTraveAlerts and @GAOTG.

The 'social media accounts' and 'travel mailing lists' introduced by TfL are supplemented by a number of other online travel platforms. Concentra launched an interactive graphic detailing which Tube stations were likely to face the most severe disruptions on any given day of the Olympics; Google maps offered cycling directions for Londoners planning on cycling to work during the Games.

Mashable Tech did their own article on The Olympics of tech which makes some entertaining reading about achievements in digital, mobile, social and programming.

Mobile
Half of all the searches and video streams in USA and UK are coming from mobiles and tablets during the Olympic games. Social Mobile Local Global; it’s all the same thing!

It is amazing to see all the technologies, social and search all coming together. Here at Rocktime we feel very proud of the Olympians and we are reminded yet again what a great industry of digital development we work in.

Which social or technical innovation inspired you the most at the Olympics?

Authors: Foz, Fiona Anderson

Now vs Then

A humorous view point from one of the Web Developers at Rocktime, about 'Now vs Then' and the advances in technology; with reference to some nostalgic technologies.


***
As a child, who was born in the 70’s, my childhood experience of technology differs greatly from the world that my daughter will grow up in.

My little girl turned one at the weekend and as such she will never know of a world without mobile phones, digital photography, the internet, on demand television, online shopping, iTunes, sat nav or Facebook. I on the other hand grew up blissfully ignorant surrounded by red phone boxes, cheap instamatic cameras, BBC Microcomputers, TISWAS, waiting 28 days for delivery, our price, maps and actually having to speak to people face to face.

So in the interest of having a little bit of fun, let’s have a look at each of these points in turn.

Mobile Phones vs Red Phoneboxes 


Although I work at Rocktime, I must admit to having a bit of a pet hate towards mobiles. Granted they have completely changed the face of communication and with each month there appears to be a new all singing all dancing model that claims to rival a Cray Supercomputer.

So what if you can play games, surf the web, take photos, listen to music, check emails, augment reality, or make a super skinny yummy mocha latte with your latest phone. I still can’t shift the 80’s image of larger-than-life men going through a mid-life crisis showing off their breeze block sized phones as a bizarre status symbol. Before mobile phones we made plans and we stuck to them.

Technology - 0 : Old fashioned red phone boxes - 1

Digital Photography vs Cheap Instamatic Cameras

I used to go travelling with a Boots instamatic, that cost about a fiver and come back with dozens of rolls of film, not having the foggiest what was on any of them. Eventually, I would get around to developing them and spend a few hours grinning like a deranged madman as I would re-live the events surrounding each photograph.

Of course, out of perhaps several thousand snap shots that I’ve taken this way, there are probably less than a dozen that would look good hung on a wall. While the professionals may debate whether film or digital produces the best results, the sheer numbers of photographs we can take inevitably mean that we’ll get a greater number of photographs we can be proud of using digital. But please remember people, simply going out and spending a few hundred pounds on the latest piece of kit does not make you David Bailey.

Technology - 1 : Blurriness - 1

The internet vs BBC Microprocessors

No contest, the internet wins. You can play the Acornsoft classic elite online!

Technology - 2 : 32kb - 1

On Demand TV vs TISWAS

Okay, if all TV was like TISWAS, great as it was, on demand would probably win this one. I do think that the likes of Virgin’s on demand service, iPlayer and the like have taken away the mystique of my beloved telly. I remember when there was only three channels and recall watching the first episode of Countdown the day that Channel 4 launched to great fanfare. We had to watch what the schedulers said we should watch and as a result some programmes became a national event.

The next day we would gingerly discuss the previous evening’s entertainment over monster munch and frazzles. Every Christmas they would show Star Wars and The Great Escape, there would be a Bond film pretty much every bank holiday and we would lap it up together as a country! Nowadays, you can download a film before the actors have even finished filming it and all sense of grandeur and occasion is lost as it squeezes onto a memory stick.

Technology - 2 : Nostalgia - 2

Online shopping vs Waiting 28 days for delivery

Firstly, whenever you sent away for something you had to pay for it with a Postal Order as very few children had bank accounts! These were only available from Post Offices (Do they even exist now????) and as such the experience would inevitably involve having to stand in close proximity to a gaggle of pensioners. Inevitably, the cost of the goods meant that you had to purchase a ridiculous combination of smaller denominations of PO in order to get the correct amount. You would then have to buy a stamp, find an envelope and a piece of paper, write down your details and order, address the envelope and then go and post it in the mail box. For some reason everything used to take 28 days to deliver which meant by the time it had turned up you were either no longer interested, or the purchase in question was so drastically out of fashion that you dare not be seen with it in public for fear of being branded a social luddite!

Technology - 3 : Rubbish - 2

iTunes vs Our Price

iTunes. If you could buy vinyl from apple I would have scored them 2 points!

Technology - 4 : My cassette has broken - 2

Sat nav vs Maps

Every so often you hear about someone who’s blindly followed their sat nav’s instructions and ended up either in the wrong county/stuck up a mountain/or at the bottom of a lake. Sensible route planning is in order.

Technology - 4 : Learn to read a map, it’s not that hard - 3

Facebook vs speaking to people face to face.

While Facebook is great for catching up with old friends, seeing what people are up to and having several different conversations at any given moment; you can’t beat good old fashioned human interaction.

Technology - 4 : The Dark Ages - 4

So it’s officially a draw. My daughter’s life will be pretty much the same as mine and in years to come, most of the items listed above will be obsolete and serve only to serve up fond memories.

***

Every aspect of working in web development and creating integrated search marketing campaigns is driven by change; be it innovations in hardware, software, social commerce, or Google algorithm updates. Please contact Rocktime if your business recognises that it needs to increase its online visibility globally, nationally or through local optimisation; we can help develop a strategy to embrace these changes.

Author: Foz

Lets look at site usability

So you’ve had an amazing idea for a website that is going to make you richer than Del Boy.
You’ve found a website design agency who’ve produced a slick, modern looking site.
Your advertising campaign has gone live. Traffic is coming to the site.
Now it’s just case of waiting for those orders to flood in....

Nothing happens, or at least nothing on the scale you expected.

You know your figures stack up and on average you should be converting 1% of your visitors into sales but your site simply isn’t achieving that. Oops!

In my mind the main thing that has an adverse affect on site performance is usability. Let’s draw some comparisons between an e-commerce site that sells ‘widgets’ and a fictitious supermarket, for the sake of argument we’ll call them ‘Freshco’.

What’s the first thing you see?

“You notice how they always put the fruit and veg at the entrance to the supermarket? You go in thinking 'this is a fresh shop, everything in here is fresh! I will do well here.' You never go straight to the bit with the toilet paper and squeezy brushes do you? ”

Eddie Izzard – Definite Article

Eddie hits the nail on the head here, first impressions really count. Your site sells widgets and the first thing a user should see when they land on your page is a picture of a widget. It should also be a nice clear picture taken by a professional photographer, not something that you’ve snapped on your phone.
If you have an adwords campaign running you should make these first impressions more specific. If a user has searched for ‘Blue Small Widgets’ take him straight to the page that has the information about ‘Blue Small Widgets’, don’t just dump him on the home page and let him find his own way there.

What’s the lighting like?

When you walk into a Freshco it’s bright, almost as bright as the sun! Even in the middle of the night they keep the aisles well lit. As a result Freshco has an electricity bill roughly equivalent to the gross domestic product of Venezuela but they do this for a reason.

Imagine how much harder it would be to go shopping in the dark. All this light makes it easy to see things without having to strain your eyes and your website should be no different. I’m not suggesting that you make your design a white so bright that you could get a tan from looking at it but you should be able to read text easily and the images of products should look as crisp and well lit as possible. (Usually you’ll find manufactures are happy to supply you with good, isolated images of their products.)

Where’s the beef?

At Freshco the beef is in the beef section. The beef section is in the fresh meat aisle. The fresh meat aisle is in the refrigerated area of the store. Easy peasy lemon squeezy!

And that’s not only at Freshco. If you were to drop anyone (with the possible exception of vegans) into the middle of a modern day supermarket they should be able to find the beef easily. The same should be true of your widget store.

• Have a search box that can search product name, description and code easily. Stick it somewhere obvious near the top of every page.

• Navigation. Make it simple, straightforward and intuitive. Use both horizontal and vertical navigation if need be.

• Use a sensible hierarchy of products and categories.

• Make sure that there’s a ‘Basket’ and ‘Checkout’ link in an obvious place.

 Put the high profit items at the end of aisles.

Yes, that’s what they do at Freshco. Believe it or not they’re not putting the most useful value for money products at the ends of aisles, they’re putting the ones that have the higher profit margins there because most customers will pass by these area.

Ok, so an e-commerce site doesn’t have physical aisles but there are areas on the page that could be used to push high profit, or end of line products that relate to the rest of the page. If you’ve got 100 orange widgets that you want to get rid of, it doesn’t hurt to promote this fact on pages relating to red and yellow widgets.

Everybody hates forms!

Unless you’re applying for credit at Freshco you can take your shopping to the till, pop in your card, key in your pin and you’re good to go. You don’t have to become a member. You don’t have to give your address. You don’t have to give a daytime telephone number.

Granted there are certain pieces of information that are important, such as delivery address, but try to make this easy for the user. Don’t force users to register if they don’t have to. If possible and budget allows use a post code look up that pre-populates the address fields. You should definitely have the ‘Is the delivery address the same as your billing address?’ functionality. Keep the information that you ask for to a bare minimum. You can always have a text area that allows for any other comments should someone wish to explain the intricacies of catching the train from platform 9¾ at King’s Cross.

Don’t look shifty!
 
We all know and trust Freshco. Unless you’re lucky enough to have built a large household brand there’s a good chance that users won’t know exactly who they’re buying from the first time, and when it comes to money, people are careful. Having the logos of the cards that you accept will help a little but there’s much more you can do.

• Having a ‘Shop safely with us’ type page will allow you go in to detail about how you ensure that users details are safe and secure, link to this page from somewhere prominent either on every page, or at the very least from the basket page onwards.

• If you’re a limited company put the registered number in the footer of the layout. Widgets Ltd Registered in England and Wales No. 1234567 looks better than ‘Make all cheques payable to Dave T Geezer... discounts for cash!’

• Display a telephone number, even if it’s likely to go to answer phone.

• Put a physical address and not just a contact form on the site.

• Make sure the site looks good, works and that the copy is spelt correctly. A lack of attention to detail can result in a lack of trust.

Check your stats.

In Freshco, even the untrained amateur can spot the useless check out attendant from 30 yards away, you can see clearly if an item is out of stock or if the tills aren’t working. This is because everything is under one roof.
Your online shop is slightly different from this. Your customers are more than likely sat on a sofa wearing nothing but underwear and scratching themselves, with Hollyoaks on in the background. You don’t have the luxury of being able to watch their experience but your stats can give you an idea.

If, for example, there are thousands of users who get through to the final checkout page but don’t complete the transaction have a long hard look at that page to see if anything could be improved. If the bounce rate is through the roof, on a certain entry page, scrutinise that page, tweak it, and see if that makes a difference. If there’s fewer visitors than you would like hitting a particular page, than make it easier for them to get to, perhaps by placing it on the home page.

Your stats aren’t just a meaningless set of numbers to show the bank, they can help you get an idea of how to improve your users experience.

Make it as easy as you can for people to part with their hard earned cash!

This pretty much summarises it. The whole journey should be...
1.    Go to site
2.    Find Product
3.    Add To Basket
4.    Repeat if necessary
5.    Pay

Anything outside of that, any additional clicks or processes will slow people down and make it more likely for them to go elsewhere.

On a slightly more serious note, whilst talking about our hypothetical Freshco is one thing, putting all this into practice is quite another. Whether it's starting from scratch or improving for an already existing web development, why not get in contact with us here at Rocktime, and our Sales Team will be more than happy to talk strategy and solutions over tea and biscuits.


Author: Foz

What's in a 404 page?

If we’re going to establish what makes an effective 404 error page it makes sense to start by explaining what an error page is. Now as error pages aren’t exactly the most exciting of subjects so in the interests of keeping you entertained as well as informed the following may not be exactly how things happened...

A long time ago in a galaxy far, far away pixies invented something called the internet. The internet was a magical, wonderful place where people from all over the kingdom could go to do anything their imaginations could conjure up. They could play games, speak with people from across the kingdom and even settle up household utility bills with companies that, thanks to a big sell off of national interests in the eighties, are now essentially foreign owned.

Now as everybody knows pixies are very wise indeed. They had the foresight to realise that, given the fact the internet was a global phenomenon based on a network of millions of computers running over telephone lines and administered by humans, it was inevitable that things would go wrong. So the pixies gathered the wisest wizards from across the land and over a feast of unicorn pizzas and the juice from a magical red bull they came up with a list of standard laws that should be obeyed by everyone in the land. If something was ever to go wrong on the internet a page would be displayed with an error message. In order to help fix the problem these pages would have code numbers which would explain what had gone wrong so that other wizards could fix the problem.

Ok, so it’s not exactly how it happened but it’s close enough.

When your computer accesses a web page it will receive something called a response code. These codes are essentially three digit numbers. If this number begins with a 1 or a 2 then everything is pretty much hunky dory and as such the chances are you’ll never be aware of these responses. Anything beginning with a 3 signifies that the page has moved a 4 suggests client error and a 5 means that there’s a server error. These last three response codes usually result in an error page being displayed.

A 404 error is served up when a file (typically a web page) could not be found, it simply doesn’t exist. This can happen for a number of reasons, the user could have made a mistake typing in the URL, the page may have been deleted or, much as it pains me to admit, occasionally links are coded incorrectly. An un-styled 404 error page can look like this:

Let’s face it, that’s not much use to anyone apart from geeks. However, the user ends up with something like the above; there is very little useful feedback and unless they’re persistent, you’ll end up losing them and their business to one of your competitors.

So what are the alternatives? Well as a bare minimum, the page should look friendlier and feel less like I’m being told off by a teacher. Next up the reasons as to why the page might be being displayed should be in clear English with an informal, non technical tone. There could also be links to the main pages of the website so I only have to click once to get back on track and in an ideal world it should look like the rest of the website so as not to look broken. (People will think twice about parting with cash online if the website doesn’t look fully functional!)

If you think you might need some internet pixies* to help with your online needs, why not get in contact with Rocktime and talk to our sales team about how we can help you expand your online presence.

*Pixies may not be included.


Author: Foz

Introduction to Favicons

This month we have a technical focus on the blog. Members of 'The Rocktime Tech Team' will be sharing their knowledge on some of the latest tech developments. Kicking off proceedings the first blog of the month comes from Foz, as he introduces us all to Favicons.
A favicon, also known as a website icon, a shortcut icon, a url icon, or bookmark icon, is a small icon that can be used in several places. A favicon will usually appear as a small icon in your favourites, bookmarks or in the address bars of most browsers.

Ideally, a favicon should tie in nicely with your companies branding. However logos and company names don’t necessarily lend themselves to working well within the limitations of a favicon, namely small and square. The image above demonstrates how it is often obvious which elements of a company’s branding can work i.e the Twitter and New Forest Hotels' favicon. However, sometimes a little creativity is needed; as in the case of both the Google and Rocktime favicon.

Your favicon will be created as part of a new website build, or can be requested should you note you don’t have one, although ideally, we encourage you to give some thought to favicons at the logo design stage.

We design favicons at a size of 32x32 pixels in the standard .ico format, which you can read more about here.

A favicon is something so small, yet so significant and there are lots of branding and bookmarking benefits from having a favicon. If you want a favicon to be added to your Google blog or website, or whether you need a logo for a web App or webclip for an iPhone, to form part of your 'online graphical elements' then please contact our Rocktime Sales Team.

Author: Foz