A Design Romance
New Love
It’s our first date. We’re both nervous to meet for the first time, both eager to make a good impression. We’ve been waiting for this moment for a while and want this relationship to work; we want rewards and are hoping for something lasting and meaningful. It wasn’t easy finding each other and we’re keen to get everything right from the start. In the beginning we aren’t completely ourselves. We are a little excited, desperate to be liked and to like the other. Basically, we’re flirting. We’re agreeing with each other a lot. We’re hoping for the best and glossing over anything that feels even remotely negative.
Client relationships can feel like this in the beginning, like the start of a love affair, both eager to please. We’ve ‘pulled’ following our excellent chat up lines during the pitch (and obviously our good looks and charm); we’ve had a good few dates, got along well and made some plans. Then it happens. The first cracks begin to appear. If this is going to happen, it’s often at the point just after the client is given the first glimpse of their new design, a design which has been slaved over for many days.
This can be the turning point, and the problem can often be simply down to the handover process. An email with an attachment is fired off into the unknown, and much like with a love letter we await an answer with pounding, hopeful hearts.
We just want to please
Unlike a love letter (we hope), the first thing that our recipient does is show the result of our blood, sweat and tears to everyone within reach. This includes random colleagues, family, friends down the pub, and next door’s web-savvy teenager.
When this happens there are no accompanying design explanations, no description to provide context to what we’ve achieved, or problems we’ve solved. The design is flashed about on a laptop screen, or more likely, a printout of dubious quality and is presented completely out of context.
So why does this happen? Why does our client feel the need to involve others far and wide?
- Often they aren’t the one making decisions and have to get approval from higher up in the organisation.
This is a particular problem with larger sites
- They feel out of their depth. Many clients have never run a website or made decisions about design. They therefore feel the need to get the advice and opinions of others to reassure themselves of their decision.
- They are aware that their opinion is subjective. If design is subjective then how can a design decision be reached alone? Surely others need to be consulted for a wider opinion to form an opinion beyond simple personal preference?
- They want to share the responsibility. In many organisations there is a culture of blame. This inevitably leads to clients being reluctant to make decisions alone. They know that if they consult wider and higher then it is harder for them to be blamed should things go wrong.
- They know they have to deal with internal politics. They are left with little choice if they want a design to be approved. Without consulting internal stakeholders (those with influence and a vested interest in the project) the design is likely to get blocked on principle, even if it’s perfect.
And so it begins. The dreaded ‘design by committee’. Even if there is no actual committee, the virtual committee of friends and colleagues is always ready and waiting to jump in and start meddling with your feelings, undermining the fledgling relationship.
Group Hugs
I’ve sat in a lot of client meetings, and the type of project work Headscape is involved with means that many of those have involved very real and very large committees sometimes with over 20 people in the room. Everyone has to be involved for political reasons. Everyone has an opinion. Everyone wants their say in this exciting new web project, and more and more everyone thinks they know about design.
But design quality on the web is definitely improving. More people over a longer period of time have now been exposed to and subliminally bathed in well designed websites. Design has progressed in many other areas of life too, from operating systems, phones, games and TV graphics to furniture, cars and product design. Of course, we all have our personal opinion, but this is rarely based on considered pragmatic research, experience or knowledge.
Techniques for wooing
Merely emailing a design and asking the age old question ‘so what do you think?’ can be a sure-fire way to murder a romance.
All is not lost, however. There is hope for the romance to return, or for the rift to have never occurred in the first place. Call us old romantics, but we’ve learnt a few techniques at Headscape to help keep love alive, and the lover’s hand held tightly. We need to slow things down a little, and proceed with our design step-by-step.
Separation
Well that doesn’t sound like a good way to kick start a relationship back into life. But I’m talking about keeping two parts of the design process at distance, rather than keeping the client at arm’s length.In the same way that we’ve separated design and content between our CSS and HTML, we’ve also employed techniques to separate design and content in the design process. We’ve done this using a 2 pronged attack; mood boards and wire frames. Mood boards which consider only design, and wire frames that consider everything but the design.
Mood Boards
Mood boards can be created in many ways, and we’ve been through a bit of an evolution with just this aspect of the design process. They can range from tailored graphical elements to match a certain theme, to a simple copy and paste job of found elements, arranged to give an overall feel for a design. We tend to favour fully digital mood boards for most clients, simply due to the ease they can be passed around and displayed at meetings. Paper versions have their place too, especially in smaller meetings; but we are producing a digital product here and not print work and we shouldn’t lose sight of that fact.
Tailored mood boards can take a long time, but give a great chance for some creative experimentation of techniques and other ideas you’ve been desperate to have a play with. The process is, however, a bit of an expensive luxury. Copying and pasting design elements into a layout package from elsewhere with a little annotation here and there can speed up the mood board process. Sometimes it can be tricky to find the type of elements you had in mind and it can become a time consuming process just copying and pasting if you can’t find that great concept you saw a while back. This is where a well ordered inspiration scrapbook or Flickr account can be helpful for cataloguing design elements you like.
Mood boards should NOT look like a website – though this can be a hard design habit to break.
How many mood boards? Sometimes five have been necessary, allowing for at least one which is completely ‘off the wall’, occasionally only two are necessary. But through experience, three now feels like the perfect number.
As with a first kiss, so Mood boards need careful introduction to the uninitiated. Clients can be confused by what they are looking at, especially if any element such as a block of navigation is too strong. It’s essential to reiterate what a mood board is and it’s purpose, otherwise clients can quickly start to think they are being shown an actual website design. Keep things abstract and scattered and just for now, lose that grid completely.[Give examples of mood boards]
Wire frames
Ideally wire frames should be design free, created with simple line work and a basic font (often comics sans!) to demonstrate and initiate ideas of layout and functionality. Whereas the mood-board tries to avoid looking as though it has structure or layout, so the wire frame should not look like it has any design. Sometimes even adding the logo top left can set a precedent it can later be difficult to unfix from the client’s mind.
First impressions really can last with wire frames.
I’ve found many times that the client has spent so long looking at a wire frame that they can get hooked on its layout. This can be hard to shake even if you think you have found a better layout solution later on.
We often start the wireframing exercise on paper with the client present, and build up to a digital version for clarity and presentation later on. The nice thing about packages such as Balsamiq and Mockingbird is that they produce neat digital versions whilst maintaining that neautral hand drawn look.
Divide and Conquer
When presenting moodboards and wireframes another way of keeping the romance alive is to present to stakeholders individually rather than in a group. Although this is best done face-to-face, it can also be done over the phone.
Individual discussions take more effort, but the benefits are enormous…
- It prevents ‘design on the fly’ – When a group of people discuss design they try to reach a consensus. This means that they make design changes in the room and you can lose control. Speaking to individuals can prevent this.
- It neutralises the ‘alpha’ – In group meetings you will always find somebody who dominates the conversation. Either through personality or position in the company they overwhelm quieter members and bounce people into agreeing with their standpoint. By consulting with people individually you avoid their dominance.
- It puts you in control – By speaking to stakeholders individually you are the only person who knows what has been said. This puts you in a powerful position that allows you to pick and choose the feedback you use.
Ensure opinions are informed
Some stakeholders argue that they do not need background information on a design in order to judge it. The argument being that users don’t have that background, so why should they? The answer is simple, they are not users.
A stakeholder needs to judge the design from a business perspective as much as that of a user. They need to understand the business objectives; they need to know about corporate guidelines and what the competition is doing. In short they need to understand the context in which the design was created.
However, in many cases the stakeholder is simply given a design and asked “what do you think?” The obvious solution is to provide the background to each stakeholder before asking for feedback. To avoid the group meeting scenario where things are dominated by the alpha male, and to avoid time-consuming individual presentations to each stakeholder, we need to find another way.
A method we have found effective at Headscape is to record a short screen-cast video of the mood boards or design with a voice-over explaining our approach. This commentary is hard to ignore and ensures the design will never be seen out of context, allowing the designer to stay in control. Not all designers are brilliant presenters and could be intimidated by a full board room. The video is a useful tool to have available.
A simple screen-cast with voice-over can help articulate suggested design solutions, and can be passed around freely to ‘see what they think’ without ever losing context.
Feedback
The problem doesn’t just lie in controlling the presentation, it is also important to control the feedback.If you ask stakeholders “what do you think?” you are encouraging a personal response. This is actually not the feedback you are seeking.
Instead ask questions that focus the stakeholder on the real issues:- Does it meet the agreed business objectives?
- Do you feel your target audience will respond favourably to the design?It is also worth focusing the client on factors that informed the design:
- Is the design in line with your corporate branding?
- Is the design what you expected based on the approved mood board?
- Does the design reflect the agreed visual hierarchy agreed in the wire frames?
Notice that the above questions all require a simple yes or no answer. This prevents the feedback straying into personal opinion. However, it is also a little restrictive so we always ask “if not, why not?” after each question.
Asking “why not” achieves two things. First it forces the stakeholder to articulate the problem and ensure there is a valid, well reasoned argument behind their statement. Second, it opens a discussion that simple yes/no answers prevent.Unfortunately no matter how well presented a design; there will be times when people cannot agree. In such situations testing can break the deadlock.
Testing
Ultimately, any amount of stakeholder feedback has a limited use. The stakeholder is not the user and it is the user that the design must appeal to. That is why, whenever possible, a design should be tested with real users.By asking users to comment on design you effectively render the personal opinions of stakeholders redundant. Best of all, design testing can be done cheaply and easily using services like Ethnio and What Users Do.
“Testing a website with real users can often defuse disagreements”
Finally it is worth reminding stakeholders that no design decision is set in stone as it is with print work. Often the best way to evaluate a design is by putting it live and seeing what happens. Things can be changed later.
For larger sites (where the stakes are higher) A/B testing should be making many of the design decisions anyway. Ultimately, testing is always going to be more effective than the opinions of stakeholders.
End of the Affair
So you had fun but it’s time to go your separate ways. You found understanding, have great memories and will always be friends. The project is over, you have a piece of work you are proud of, and the client is happy with how they helped shape their site and what you gave them and their users. This is how it should be.
“Successful design should be a collaborative process and not something that springs spontaneously from the creative mind of an individual designer.”
You never tried to exclude the stakeholders from the design process, their input and knowledge of their users was vital, you just had to find a way to draw it out of them. Their contribution has to be informed and shaped into something that is actually of use to the designer.
Comments like “I don’t like the green” help no one, and can damage what could have been an amazing, long-term relationship. By using some of the techniques here you can guide and woo your client into seeing your creative vision and carry them with you over the threshold and into production.