In this new series of articles, we’ll give you an insight into how we redesigned and rebuilt DesignKarma from scratch, taking you from scribbles to code and everything in between.

Background

The previous DesignKarma website had been live for around 4 years and had served it’s purpose well enough. The messaging was still along the right lines, there were no new browser issues, no negative feedback from users or clients. So the decision to redesign was purely a personal one. Technology and the web had evolved, and we felt we were no longer practicing what we preached— good design, code and content management. An unusually quiet December and early January gave us no excuse.

In this series of articles, we’ll give you an insight into how we went about the project— from concept to development. Of course, a website is an organic thing so the project isn’t really “finished”, and it will continue to evolve the site over the coming months and years.

We’re really going to do this aren’t we? Aren’t we?!

Designing your own site is a horrendous prospect, as any web designer will attest. Give us the most challenging, high-profile project in the World and we’ll happily get stuck in, and be up to our eyeballs in sketches and scribbles in minutes. Charged with designing your own site and it’s not long before you’re procrastinating, rearranging your bookshelf, making another cup of coffee, etc…

You draw a blank. Not because you have no ideas. Quite the opposite in fact— you have so many ideas you can’t possibly organise or filter them into anything productive. There’s so much you want to communicate, nice features you’ve seen that you want to incorporate, SEO concerns, and so on. Hanging over you the whole time is the fact that none of this is paid work, and every hour you spend on the project is costing your business. The pressure to get it right, right now, is palpable.

Pet project versus “live” project

Because of all this, it was important for us to treat DesignKarma in the same way as a client project. Doing the project in patches of downtime or evenings was not the answer. We needed to treat this like anything else. Our processes work great on client work, so employing them to our redesign would help us structure activity, focus each stage, and importantly keep things moving.

We started with the usual Discovery stage, which in this case was really just a brain dump. Our brand, our strengths, weaknesses, target audience… Starting from a wide spectrum and refining down to core messages. Happily, we kept coming back to our original message of “Make the right decisions and good things happen”. This really communicates our belief that a good product or service is the result of lots of small decisions made along the way. In other words, attention to detail. This invests your project with good karma. Designing a website is the perfect instance.

With the messaging clear in our head, it was time to focus on content and design.

Time to do some research

“Research” is kind of a redundant term for us because we never do it. We never “sit down to do some research”. We’re always doing it.

Like anyone else in our industry we’re wired in and constantly researching, learning, trying… What that does is build up a general awareness of what’s currently out there. Now we had to understand our place in that landscape – where we fit, how we should sound, what we should look like, who we are and who we are not.

You don’t completely abandon where you’ve come from either. It’s essential you understand what worked previously and build on that, and dump what didn’t. For example, looking at the stats from our previous site showed that the vast majority of users went straight to the folio. People want to see what you’ve done. So, our work should take centre stage in the new design.

Specification

With any project it’s very tempting to just dive straight into Photoshop and start designing. Behave yourself. First off, you need to know exactly what you’re designing.

DesignKarma regularly produce detailed specification documents prior to the Design stage of our projects. A key component of these docs are “wire frames”. They allow you and your clients to get a feel for a website before it’s designed or built. They also ensure you’re making all those important little decisions I spoke about earlier. Skip this stage and you’ll find yourself fiddling with fonts and colours, completely missing some glaring content and functionality issues.

We start off with an A4 layout pad and Sharpie, before quickly moving into Balsamiq Mockups and throwing together wire frame layouts. You can even add notes and collaborate with clients online.

Working in something like Balsamiq is quite liberating for designers and clients because you really don’t care about layout or aesthetics at this stage— it’s all about what the web page does.

Having finalised our wire frames, now came the hard part: Design.

Design

We like to create a scrapbook of stuff we’ve seen that might inform the new design. This usually includes websites, apps, magazines, photography, fonts… We put all these things in our mental blender, combine with our own design sensitivities and best practice, and start to push pixels around in Photoshop. We use the wire frames to guide us, but try never to fix on their layout.

To avoid drowning in inspiration, it’s important to constantly refer back to your brand and key messaging. If an idea or approach doesn’t fit your brand then bin it – no matter how good it is. Be bold and decisive. You’ll soon make progress.

We wanted the site itself to be minimal— just an interface to seeing the work, or learning more about us. We could’ve themed it all, or filled the screen with a nice flowery background or something, but no. We wanted to say “here’s us, here’s our work, here’s what we do”. For us, strong typography, layout and some nice iconography would probably be enough.

For some reason, we often start out working in black and white (anyone else do this?). Colour can be very emotive right off the bat, and in the early stages we just like to focus on layout and UI.

There were a total of seven iterations of the homepage before ending up where we are now. The other pages followed on from there. The difference being on this project there was no feedback from the client, and the lack of outside input could’ve probably speeded things up. We did wonder about getting feedback off our clients, but with the clock ticking we really just had to plough on. You’re filled with self-doubt as it is when you’re designing your own site, so rightly or wrongly, we felt that encouraging criticism would’ve been disastrous. Better to follow our instincts and go it alone!

Copywriting

With a minimal design, copywriting became essential. Also, nobody wants to read reams online, so what little copy we had needed to really do the job. We’re not copywriters, but we were confident enough in our message and what we do, to try and write in a more personal and positive tone than before.

For example, the previous About page was kind of stale, with a laundry list of services. This time we wanted to avoid generic marketing speak and just tell people. We also had SEO concerns and certain keywords to include, but overall we wanted to focus on the human reader first, search bot second. What we’d lose in PageRank we‘d make up for in clarity of message.

Next up: Setting up content management with ExpressionEngine 2

Find out how we setup and configured ExpressionEngine 2 for the new website in chapter 2.