How to do design on an agile project

Everyone’s doing agile. The days of the monolithic project are seemingly numbered. Whether that’s true or not I’m not sure. There will always be the big enterprise stuff going on somewhere.

But for the rest of us it’s getting quicker and cheaper to build web products and services. OSS, SaaS and a plethora of APIs has reduced the time frame down to days to get something out into the wild.

At the same time that all this is happening, the increased complexity of the user interactions online now necessitates greater attention to the design of a given site. But, with the deadlines getting shorter, where does the extra time come from to get the design right? This is something I’ve been asked a number of times. Most recently by a developer specialising in Ruby on Rails development – the grand daddy of all web 2.0 rapid, agile development platforms.

I’ve worked on a couple of agile projects. And let me say, it’s not for the feint-hearted. No room for newbies here. Sorry. You need to begin with a designer who has plenty of experience in designing and delivering web projects. That designer also needs to let go a little, become less precious and realise that if it’s not perfect now, it can be in 24 hours time – but more of that later.

Right let’s get started.

Defining the interface through sketching

As I may have mentioned before, I like to sketch. I find it’s the best way of getting an idea down in visual form and in front of the client quickly. What’s great with this approach is that the client won’t get bogged down in the details of colour and copy. They’ll focus on content and the broader layout and examine if everything they need/requested is on the page. Just to note at this point, I’m not talking about managing scope creep in this post, just how the design bit might work within the wider project.

What’s lovely about sketching is that it lowers the barrier to producing layouts to anyone who can hold a pen and apply it to paper. In fact, one method I have used historically is to gather the project team around a whiteboard and gradually ‘build’ the interface as a collaborative exercise. A snap with a camera phone then records it to be shared. Which ever way you do it, the sketching process helps to iron out any potential issues with development before committing pixels in Photoshop.

Working up the interface

The developers can go and start to build some stuff working from the sketch as a starting point. It’ll be ugly (probably) but at least they have something to build. Without the sketching bit they may be hanging around waiting for your designs which creates a bottleneck.

You’re probably looking at getting a design out in a couple or three days from here. Before the project started you may have done some initial investigative design work and got a broad ‘look and feel’ working which makes this stage a little easier.

It’s a convenient point to mention that working in the same room as the client on an agile project really helps. They are engaged, not going to any other meetings (this is agile – it takes both a physical and time commitment) and are, therefore, on hand to answer any questions. That client also needs to be in a position that allows them to sign things off quickly. No committees allowed. No 6 rounds of design amends. Get a design done, keep reminding them of the deadline and hopefully get it (largely) signed off. If there is one particular widget or element that isn’t working, you may be able to ignore it for the time being and commit the rest of the design leaving the sticking point to later.

This signed off design can then go and start the transition into CSS, XHTML and Javascript. As this is happening you can start to work on other screens or refine the design of that widget that the client wasn’t happy with. Again though, you’re not holding the process up. Everyone has plenty to do and aren’t wanting for finished designs.

This should be the way the process then works for the rest of the page templates on the site/service.

The PSD is not king – the prototyped site is

One point to mention in an agile project and, in my eyes, it’s very important. Unlike other projects where the client likes to see armfuls of printed out PSDs; in an agile project the PSDs have a diminished authority. As soon as they’ve started to hit the front-end mark up guy, the prototype site has the authority. That’s the working, living, breathing product. We’re not in the habit on an agile project of creating artwork for gallery walls.

A very efficient method of working I’ve found is to screen-shot the prototyped site and work on that in Photoshop for the subsequent iterations. That way you don’t waste time recreating PSDs to match the prototype. It’s all in place for you and you can get on with designing the portion of the interface that you need to get done.

The only certainty is change

Always remember that this is a two-way process. Development / client / HTML  can come back to you at any point for clarification or indeed amends for any number of reasons. Ideally you should commit 100% of your time to this project. Dividing your time between projects may mean that you miss decisions being made and have no idea of functionality that may have changed from half a day ago. Services such as Twitter (or any enterprise variant) come in handy to help keep communication channels alive on the project. Perpetual contact with the team and multiple releases a day make it both and exciting but at the same time exhausting process.

Talking of multiple releases. As mentioned earlier, precious designers may find the whole process a nightmare of frustration and chaos. If you let go a little and remain pragmatic then you can still produce well crafted sites. The very thing that may create this frustration allows you to change things very quickly – the multiple releases. If you embrace the process and adapt to a way of working that sits well with you and just as importantly with the rest of the team, there is every chance that you will be able to get a great product out in a time-frame that you never thought possible.

Ideas are nothing without the execution

I’ve just watched the second installment of ‘Big Chef Takes on Little Chef‘, the concept of which revolves around trying to reinvigorate the fortunes of the Little Chef roadside restaurant chain.

I’ve probably been to a Little Chef once in the last 20 years (when very hungry and desperate on a road trip you understand). Watching the show it looks like they haven’t changed a bit in at least 20 years – or even decorated in some cases.

To help with this turnaround they drafted in the culinary genius Heston Blumenthal.

Now, I like Heston. I admire his direct manner and his ‘fuck ‘em’ attitude. I like the idea of what he does with food; challenging perceptions, creating new tastes and experiences. I thought that it might have been a bit of a mismatch putting someone like Heston in the hot seat to refresh a 50 year old, staid, outdated institution like Little Chef. But as the chief executive, Ian Pegler, said, he brought Heston in for his ‘blue sky thinking’ to ‘think out of the box’ and for ‘that Heston wow factor’. Suffice to say I wanted to throw the controller at the TV every time he uttered these phrases. He chose Heston above ‘other celebrity chefs’ because he was so radical and he felt that’s what Little Chef needed. But what he failed to understand is that Heston’s food is £250 a head at his flagship Fat Duck restaurant. And it’s completely inappropriate and at odds with Little Chef’s staple quick-turnaround roadside fodder.

So the process started with an, at best, vague brief and a client whose expectation and hope were matched in equal measures by his misguided enthusiasm. Disaster and broken relations were bound to follow.

What Heston focused on in the beginning, quite rightly in my opinion, was the quality of the ingredients and the attention to cooking techniques to produce food that was better prepared and therefore better tasting. This was, seemingly, totally lost on the chief exec. He was expecting more ‘blue sky’ and less ‘box’. The problem was that he didn’t have the first clue how to articulate what he meant by this to Heston.

On top of this, there’s no point having loads of great ideas if they cannot be carried through. Little Chef kitchens consist of a deep fat fryer and a hot plate. The ‘chefs’ work from a manual like they’re assembling an Ikea flat-pack. Radical changes to the menu would necessitate root and branch revisions to their entire cooking processes. This is before you consider retraining staff and refurb’ing the kitchens to house more traditional food preparation implements. Like saucepans for example. What’s the point of a great new menu if there are not the means or skills to produce it? It doesn’t look like this had crossed the mind of Mr Blue Sky.

The other flaw in the process was the way in which Heston’s new menu was tested. They did this by dividing one of the more popular restaurants in two. Depending on what the diner wanted depended on where they sat. Obviously, ‘Heston’s’ side of the restaurant was empty. It’s not surprising! With no marketing, explanation or build up to what they were trying to achieve it probably scared the hell out of the diners. They were arriving expecting an olympic breakfast and were greeted by oak-smoked Salmon with scrambled eggs and offal and oyster hotpot!

There is still one installment of the series to go, so we’ll see how this all pans out.

What I want to look at is the way the ‘client’, the chief exec. in his case, treated his ‘agency’ – Heston.

I can see a lot of similarities here with clients I’ve worked with historically on web design projects. In fact, I’ve blogged about the designer/client relationship before. Far too many clients focus on the wrong things. They want a ‘blue sky’ website design but they cannot explain what they mean by this. Then, when they see radical they get scared and want it watered-down or merged with the ’safe’ option. Alternatively, they don’t like your site design concepts at all but they can’t tell you what exactly they don’t like. They expect a ‘wave of the Photoshop brush’ and all to be well. (I’ve actually had that last sentence uttered to me in a meeting).

Then, when they eventually launch the site there’s no marketing support or fanfare. No long-term content strategy, no planning for post-launch maintenance, no warning of what’s coming for the faithful users. It’s just thrust onto the world. And then they wonder why it falls flat and people complain. And then it’s the agency’s fault!

What has become apparent in the latest episode of Heston and Little Chef’s adventure is that the process may end up being the marketing campaign itself and Heston’s hard work ends up on the back burner at best. And that won’t be Heston’s fault it’ll be down to the way the project was conceived and run in the first place.

Trust me. I’m a designer.

There’s been a lot written by designers bemoaning clients who hire their services and then spend the entire project systematically dismantling a design and treating the whole process as a vanity project for their own ego.

So, I’m not going to repeat any of that. I want to talk more about the ‘creative’ process, what it is, what it means and how to traverse it and end up with a quality product at the end.

Just the other day a client asked me about a design that another agency had done. The relationship had broken down and I was called in to pick up the pieces. See this previous post for my thoughts on this. Anyway, this particular design exhibited a tabbed device at the top of the page which would be used for product and service sales touts. She asked how it would function and how it would look when one of the alternative (very brightly coloured) tabs was selected. ‘Will the whole panel be that colour?’ How are you going to make it work?’ These weren’t hypothetical questions. She wanted answers there and then. I explained to her that part of the design process would be to look at the colours, how the active states of the tabs worked and do some explorations to see how we could make it robust and practical for the CMS but both effective from a sales perspective and aesthetically pleasing. A tall order, but that’s our job as designers.

She seemed a bit put out by this. I got the impression that she thought I would apply some Photoshop filter in five minutes and all would be good. The fact that we would need to spend a couple of hours defining how it would work seemed strange to her.

I was beginning to realise maybe why the relationship with the previous agency had turned sour.

You see, ‘design’ is a process. No matter how many designers out there think that they are ‘far too creative to follow any processes’ it is just that. It’s not a five minute lash up implementing the first thing that comes into your head.

Let me roughly delineate how this process works for me.

1. Play
   Read around the subject, look at some competitors, look at some completely unrelated sites / print materials, cut stuff out of magazines, go to a gallery.
2. Think
   Scamp has a great line on his blog ‘When you see me staring out of the window, that’s when I’m working.” Nuff said.
3. Digest
   During this part all those bits of inspiration and the thinking comes together and begins to manifest itself in some form of high-level design concept.
4. Refine, rework, erase and do again
   The most tortuous bit. Getting the bloody idea to work! Sometimes it hurts, sometimes it flows. Different designers work differently. Some like to do 10 iterations of an entire design. Some work on bits to get each element right. Whatever, this is about worrying the details and crafting the design. Lot’s of tea works for me.
5. Develop and extend
   The design is now worked up into site page templates or pages of a brochure.

Now there are minutiae to this that I haven’t gone into, but you get the idea. It’s step 4 that’s the crunch point. And this is what I was trying to explain to my client. There lies the nitty gritty of making it work. This is where the executional touches often occur that transform the design from good to great.

If there is too much intervention and watering down at this point a good design can turn bad. Very bad.

I’ve been watching Kevin McCloud’s ‘Big Town Plan‘ programme over the last few weeks about the regeneration of Castleford in Yorkshire. Kevin follows the progress of the town council, the local residents and designers and architects as they struggle with urban regeneration projects throughout the town over a five year period.

Kevin, being a great advocate of ‘the design process’, is visibly put out when, at various times, this process isn’t adhered to. When the process is bypassed and ideas watered down by ill informed councillors the result is at best lackluster, at worst completely unfit for purpose.

But when there were strong project champions in the local residents, a visionary architect who listened to the residents (the clients) and little interfering by the council some astoundingly beautiful pieces of architecture were created. The bridge across the river being a shining example. This project exhibited a great process, strong leadership, a client who had faith in the designer but asked well-informed, difficult questions at the right times in the project. In essence, everyone pulled in the right direction, worried the details, left egos at the front door and made it work.

The most successful projects that I’ve worked on have had strong client leadership. A champion who works with the designer to reach the best possible solution. They drive it through, supporting the designer with everything they need to create a successful product. They give the designer both freedom and restraint – difficult but worthwhile. And the designer repays by taking on board client comments because they’re timely and intelligent. And they strive to make it work.

Castleford’s town motto is ‘Possum si volo’. ‘Where there’s a will, there’s a way’. And this is so true when it comes to commissioning great design.

About working in teams in an agency

Can I just get one thing off my chest.

How can we create beautifully functioning, robust, intuitive user interfaces and engaging online experiences if creative are completely divorced from the rest of the process?

Just an observation and something that has cropped up more and more in various places. I’m stunned that ten plus years down the line into the life of digital agencies proper integration between teams is still a rarity.

Interaction design is driven by information and needs. Without this we (designers) are merely decorators.

I know I’m not shy of a Paul Rand quote on this blog, and I won’t hesitate here.

Image from the book “Paul Rand: Conversations with Students” available on Amazon.

[Note: This has nothing to do with my current place of employment. Thankfully, we have our discipline integration pretty nailed.]