Design & Development

How we redesigned our website and logo

May 1, 2013 By Dan Thornton

We’re lucky to have a number of talented web designers and developers in our network at TheWayoftheWeb. But we didn’t have a lot of time and money to get a new logo and website up and running.

So I thought it would be really useful to share the process we went through…

Our new logo:

For a long time I’d blogged without investing in a proper logo and identity. So I was enormously grateful to the talented David Darnes when he offered to donate his skills a few years ago to support me starting out as a business.

Having originally been influenced in naming my blog (and now the business) from martial arts and Eastern philosophy, plus speaking to David about my background in both digital and print, he came up with a great book-based logo which we used until this month.

It’s still a logo I really liked, but as our business has changed and evolved, and with the need to finally change the website from a simple blog to something more suitable for our company and network of specialists, we felt it was time for something different.

Having chatted briefly with some of our designers, the plan for the new logo emerged fairly quickly and organically. We wanted to ensure a larger font size with more clarity in a range of different settings, as we needed options that made sense from a 16×16 pixel favicon to the 2000+ pixels sizes for Google+ and Youtube cover photos.

So to achieve this, we settled on two versions of the logo, both featuring the same fonts and colours to have consistency across formats and to be recognisable in each setting.

This gives us more flexibility, both in terms of which option we use, and what other elements we can include for specific locations. But we wanted something graphical to represent the brand, and the ‘cogs in cloud’ was a moment of design genius.

As a virtual agency which works with both staff and clients through a wide range of online tools, obviously we have close ties with cloud computing. Without cloud computing services, what we’re doing would be twice as hard – project management, collaboration, accounting, offsite backups, etc are all made easier, as are serving websites and applications.

And within that cloud are the cogs that make this business machine run – the amazing people that we work with (that’s clients, partners and employees). Despite the brilliance of technology, any computer, software or project is only as good as the people that built it.

So that’s our logo – brilliant people brought together within the cloud, and following a shared philosophy.

Our new website:

Until now, TheWayoftheWeb has simply been a blog with some pages briefly outlining the services we offer, and it has never really operated as a cohesive way for clients to find out what we do or how we do it.

That’s been fine in the past as 99% of our work came from word-of-mouth recommendations from clients and former colleagues, which is wonderful.

But as we’ve grown, there’s a need to be accessible to anyone that hasn’t already heard about us, and to really clarify what it is we do.

The CMS choice was logically always going to be WordPress – there are other platforms out there which are definitely worth considering, but having used WordPress for many years and offering WP development and design in our portfolio, we have to show we can eat our own dogfood.

On top of this, we installed the Genesis framework – again, we’ve used this framework and many of the themes provided by StudioPress, so we’ve got a decent understanding of the benefits and how it all should work together. It’s the same framework we can offer to clients, so again, we’re using exactly the same technology as we offer to others.

But to stand out from other agencies building on the same platform, and to get the basics done fairly quickly, we chose to install the Modern Portfolio theme, and customise from that starting point. As standard it’s responsive (so it adapts to mobile and tablets automatically), and has had just a few minor tweaks to appear as it does right now.

Launching early:

There’s still a long way to go before we’re happy with the site. Having set a deadline at the end of April to go live, we knew that we could have waited and spent a lot more time tweaking and polishing to show our perfectionism.

But although that’s often the right approach for client work, sometimes it pays to get stuff out there so it can live and breathe. Especially when client work rightly takes priority, and our own site development could end up on the backburner if we weren’t careful. And we can immediately start measuring the difference with a real audience, rather than in closed user testing to see if we were on the right track.

It means you can see what we’re doing as we do it. And we’ll then share what we’ve done to make improvements, whether it’s for SEO, Social Media, Content, Design or Conversion Rates.

After all, using this site (and other internal projects) as our playground means we can quickly roll out proven, successful work to clients.

Want evidence of end user control?

April 3, 2009 By Dan Thornton

If you really want to underline the way control is now being shared with an ever greater number of people historically know as your ‘audience’, then show people the increasing rise of Firefox browser usage – then show them Greasemonkey.

Now Firefox isn’t the most used browser globally – Internet Explorer still rules, and Google’s Chrome certainly has some advantages and enthusiastic adopters. But whether or not Firefox ever dominates the browser market, the influence of the open source approach, add-ons and plug-ins is undeniable. It’s the reason that many people, including myself, might use Chrome for certain tasks for speed, but can’t give up the utility of plugins which offer everything from easy ways to see the way a page is coded, to Swedish spellchecking, mouse gestures and more.

But why is Greasemonkey so incredibly important?

Greasemonkey is a Mozilla Firefox add-on that allows users to install scripts on-the-fly changes to most HTML-based web pages. As Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script. Greasemonkey can be used for adding new functions to web pages (for example, embedding price comparison in Amazon.com web pages), fixing rendering bugs, combining data from multiple webpages, and numerous other purposes. From Wikipedia.

So that means:

You can spend as much time and money as you like on designing your webpage, but if I want to disable elements, change the layout, or do whatever I like, I can.

For instance, Facebook’s redesign angered many people – so if you want to hide the Highlights sidebar, just install one of three Greasemonkey options.

Or you can just emulate the old Facebook design.

And what’s really interesing?

As a website owner/publisher, I’m not aware of any way you’d know this was happening via analytics (And I’ve asked a few metrics/analytics types before posting), and you wouldn’t know what users are adding to your site to improve their experience, and possibly conversion rates.

(If you do know ways to track any of that information automatically, I’d love you to share it in the comments.)

Your users would though.

Resources:

You can keep up with the Greasemonkey blog at Greasespot, and find Userscripts for it at Userscripts.org. Please do keep in mind that you’re installing code which may in a very small amount of cases have been created by people who aren’t 100% lovely, so do some research before adding new scripts. Or just don’t blame this post if you kill the internet by accident.

‘The Supermarket effect’, and how to minimise it…

November 18, 2008 By Dan Thornton

I’ve coined the term ‘the supermarket effect’ in conversation and in passing, and never really publicly defined it. So for future reference:

The Supermarket Effect: The initial response to a new layout to a website, which echoes your first reaction to a supermarket changing it’s layout; ‘Oh, for crying out loud, where have they put the sodding milk’. Despite the fact that the change may actually be an improvement.

Chinese supermarket by gab on Flickr (CC Licence)

Even after a decade of making, changing, relaunching and tweaking websites, I’m as guilty of letting myself have the same reaction occasionally, before taking a deep breathe and evaluating what the changes actually mean.

And that effect can be devastating when you’re just launched a design you (or your team) worked on for days or weeks, and the first responses from users is to complain about every change. But if you understand that a percentage of shock is inevitable, you can start to seperate the valid and constructive comments from those of surprise – just remember that if they’re regular users of the site, it’s akin to walking into your local pub, or you living room, and finding someone has moved everything.

But there are ways you can minimise ‘the supermarket effect’.

Warn users that change is coming. Give them time to prepare themselves.
Explain in detail to key users what the changes will be, why they are being made, and give them an advanced preview. Get them onside, and they will evangelise the changes on a personal level which you wouldn’t reach as quickly.
Use A/B testing to reveal the changes to a small group and evaluate which changes are making the important differences.
Consider changing in phases, or offering a choice of old and new. Eventually you’ll have to force the late adopters across but it gives some of your audience a chance to get used to the new layout and help the latecomers.
Don’t dismiss the responses – even those which are purely critical of any change – politely explain the reasoning behind the changes, and the evaluation of them.

One famous example of reaction to change was Facebook’s unveiling of a new design. It led to vehement opposition, but over time, people do accept the changes, as long as there is value in making them for users. And if not – why are you making the change?

So are there other ways you can make a substantial change to your website, and minimise ‘the supermarket effect’?

Simple, but hugely effective

April 16, 2007 By Dan Thornton

It’s amazing sometimes how easy it is to break out of the habit of building a ‘traditional’ website, and how few people actually do it.

How about a website written on the top of a fridge and cooker? It could have just been a series of plain photos, but the addition of a few working links in some of the pages make it work wonderfully, wonderfully well.

So before you start designing a header at the top, a menu down the left or right, and content in the middle, STOP! Think about what you really want to get across, and what is really the best way to do it…because really, nothing else matters.

Now experience it for yourself: https://noonebelongsheremorethanyou.com/

Nobody likes change – or do they?

March 16, 2007 By Dan Thornton

I’ve written before about how you can gain a lot by treating your online communities in the same manner as you would a group in real-life.

And that also applies to change.

I’ve seen a lot of people put a lot of hard work into completely rebuilding a site, only to be surprised by the vitriolic reaction of a lot of the heaviest users.

If you’ve ever been into your usual supermarket to find they’ve moved everything around, you might not be so surprised. Especially if the new signage hasn’t been put up. Or think about what would happen if you went into your local town or city to find it had been totally rebuilt overnight.

Ways to avoid such a strong reaction?

1. Give as much warning of the change as possible. It gives people time to adjust to the idea something new will appear.

2. Show them screen shots of the new design and get their comments. Explain how you think the new site will work and let them feed back. They might raise points you wouldn’t have noticed, or suggest better improvements. And they’ll also be better prepared for when the new site goes live.

3. Best of all, let them play with the new site before it becomes a necessity. Launch it on a different URL, say www.website.com/newsite, and then link to it on your front page. That way the early adopters and advocates can go and experiment, giving you a chance to test with a smaller group, before you switch over and let everyone loose.

4. Make sure that you have enough staff to adequately deal with any queries via email, and forums if you have them. The first few days and weeks are crucial for retaining your audience, and the longer people wait for an answer, the more likely it is they’ll find an alternative.

You may still get some resistance, but it will be more moderate, and easier to deal with if your users are so surprised. And don’t forget the basics of a site when you being.