Tags: iteration



Clearleft.com past and present

We finally launched the long-overdue redesign of the Clearleft website last week. We launched it late on Friday afternoon, because, hey! that’s not a stupid time to push something live or anything.

The actual moment of launch was initiated by Josh who had hacked together a physical launch button containing a teensy USB development board.

The launch button Preparing to launch

So nerdy.

Mind you, just because the site is now live doesn’t mean the work is done. Far from it, as Paul pointed out:

But it’s nice to finally have something new up. We were all getting quite embarrassed by the old site.

Still, rather than throw the old design away and never speak of it again, we’ve archived it. We’ve archived every iteration of the site:

  1. Version 1 launched in 2005. I wrote about it back then. It looked very much of its time. This was before responsive design, but it was, of course, nice and liquid.
  2. Version 2 came a few years later. There were some little bits I liked it about it but it always felt a bit “off”.
  3. Version 3 was more of a re-alignment than a full-blown redesign: an attempt to fix some of the things that felt “off” about the previous version.
  4. Version 4 is where we are now. We don’t love it, but we don’t hate it either. Considering how long it took to finally get this one done, we should probably start planning the next iteration now.

I’m glad that we’ve kept the archived versions online. I quite enjoy seeing the progression of the visual design and the technologies used under the hood.

Iteration and You

Daniel gets off to a great start by plugging my blog. Oh, yeah! The excellence continues with his first slide which features the looming head of Trammell.

Daniel asks for a show of hands. Who works on one website? Who works on many different client websites? A good mix, it seems.

We’ll be hearing lots from Stewart Brand’s book, How Buildings Learn. Buildings don’t change much (on the outside at least …but let’s not go into right now). That’s certainly true of High Road architecture. But there’s also Low Road architecture which is much more modular. A lot of websites are like that. Frameworks like Django help there, as do Web Standards. With Low Road architecture you can easily build a castle as someone has actually done with mobile homes. White trash nirvana!

Establish a visual vocabulary to avoid building a . That worked with Pownce. Notched rectangles are used throughout, right through to the branding. On Digg, a lot of the visual language stems from the Digg button. It was initially inspired by a design element by Dave, used on Mozilla and refined on Digg where it influenced the overall design. Facebook also has a visual vocabulary based around blue rectangles and single-pixel lines. App developers can take this visual language and work with it to ensure their products fit in with the Facebook look and feel.

Design paths. That’s paving the cowpaths to you and me. Launch your website with the base set of features; don’t try to anticipate everything everyone will want to do. Instead, watch what people do and build on that. That’s how images came to Digg—emergence through user behaviour. Threaded comments also emerged from watching how people used a basic single-thread comment.

Adapt to scale. It’s a great problem to have. The original Digg button couldn’t handle figures with more than three digits.

Subtraction is iteration too (so true! I witnessed a great example of this in action just the other day in the Clearleft office). Remove clutter. You can add functionality and reduce complexity at the same time.

Realign, don’t redesign. That’s a direct quote from Cameron. You don’t have to rip everything out and start from scratch. When the Martha Stewart site redesigned, it really confused long-time users (like Daniel’s sister and the girl who sat next to Daniel on the flight to the UK). Unless there’s a really good reason to raze something to the ground, try instead to adapt what’s already there.

Now for the Stewart Butterfield quote:

Every time I hear a designer say the word innovation, I reach for my revolver… I want to shoot them in the face.

It’s okay to reuse something if it’s what works.

Make time for iteration (oh man, I hear ya!) — don’t overbook yourself on the new stuff. Release early, release often. Get it out the door even if it’s not perfect. Daniel illustrates this point with one of my Flickr pics.

But at the same time, don’t panic! You’re going to get an avalanche of feedback. Stop. Listen. Learn. Don’t overreact.

So to sum up:

  • Low road design is easier to adapt.
  • Realign, don’t redesign.
  • Create a visual language.
  • Remove as much as you add.
  • Don’t be over reactive.
  • Make time for iteration.

That’s it. Great advice! Any questions?

  • How do you sell iteration time to clients? That’s always tough—the politics. Choose your clients well.
  • How about using A/B testing to test features? It’s a great idea but Daniel hasn’t had a chance to implement it himself. If you can do it, it’s awesome but it requires the right infrastructure.
  • As an in-house designer, how to you get your bosses and management to buy into iteration? Didn’t we already have this question?
  • On the point of visual language, how much do you use a style guide? Daniel’s never used an official style guide, it’s more of a de-facto thing. At Mozilla they had some dos and don’ts but nothing hardcore.
  • Last question: You know when talked about the visual language? At what point do you decide that it’s too much to deploy everywhere? You can shake it up a bit. If it doesn’t fit, don’t use it. Variations are fine.

Bravo, Daniel! And indeed, Delta Tango!