By: Paul Boag

June 16th, 2009

Reader Rating: 9.5

Establishing the look and feel of a site can be a point of contention. Web designers often become frustrated because they feel there’s a lack of respect for their expertise. Meanwhile, clients grow annoyed when their designer seemingly fails to listen to them.

This confrontation inevitably leads to a loggerhead. On one hand we have a designer with years of design knowledge and experience; on the other, a client who knows his audience and business objectives. In this stare-off, sooner or later, somebody has to blink. Either the client will end up with a design that he is unhappy with that fails to meet his objectives, or the web designer will give in and produce a design that she believes to be less than optimal.

The problem with this confrontational approach is that it ignores the fact that design is a collaborative process.

Fortunately, there’s no need for it to be like this. In my experience it truly is possible to work in partnership with your client. Doing so allows you to explain your design decisions and to better understand your client’s business and user objectives. The ideal relationship is about collaboration rather than confrontation.

However, for this relationship to work, the designer needs to include the client in the development of a design. Unfortunately, many designers find this difficult—they prefer to avoid showing unfinished work. I’ve seen too many hours wasted by designers who want to make the design just right before showing it to the client, only to have it rejected as inappropriate.

At Headscape we like to use a “design methodology” with our clients that includes them in every step of the process. This approach provides a number of benefits:

• The client is educated about the principles of good design.
• The design benefits from the expertise that the client brings to the table about their business and audience.
• The client is unable to reject the design outright—he or she has contributed to the design’s creation, so will be unsurprised by the final result.

So what does this methodology include? Well, we follow seven key steps. Certain projects may only make use of some of these steps, but our experience is that the more steps we include in the process, the healthier the client relationship.

Let’s look at each step in turn.

1. The Kick-off Meeting

Having a face-to-face meeting at the beginning of a design project is a crucial step in establishing a relationship with your client. This is your opportunity to really understand the requirements and discuss items like:

• business objectives
• success criteria
• design objectives
• target audience
• site personas

This meeting is also an opportunity to establish the parameters of the relationship. Many designer-client relationships fail because the client micro-manages the design, reducing the designer to the role of “pixel pusher.” The client is not necessarily at fault because the designer may have failed to communicate the type of feedback he or she requires.

We encourage our clients to focus on the big picture and leave us to deal with implementation. So instead of a client providing feedback such as …

we persuade them to focus on the underlying issue, such as …

Comments like this allow us to see the underlying issue and find an appropriate solution (which may or may not include the use of pink!).

2. The Stakeholder Interviews

Although kick-off meetings are valuable for understanding the business and educating the client, more information may be required, especially when working with larger organizations.

The people in the kick-off meeting don’t always understand every aspect of the business, and they may not have the authority to sign off on the design by themselves. This can present problems when the designer has worked closely with client staff to produce a design that everyone involved so far is happy with, only to have it rejected by other stakeholders within the organization.

One way to include others in the process and ensure the designer has a better grasp of the business is to arrange individual stakeholder interviews. In these meetings, the designer talks with anybody who has a vested interest in the site, and encourages them to share their frustrations and desires for the site. This way, the stakeholders feel included in the process and the designer gains a better understanding of the role that the site will play.

3. Inspirational Sites

Once you’ve been fully briefed through the use of kick-off and stakeholder meetings, it’s time to begin suggesting a design approach. For many projects this involves launching Photoshop and creating a final design from a blank screen. However, doing so is a considerable investment in design time when a consensus on the direction of the site has yet to be reached.

Some designers ask the client what sites they like in order to get a better understanding of their preferences. However, while doing so has some merit, it’s a flawed approach for two reasons:

• First, the client is not always the best equipped to identify examples of good design—they tend to select sites based on their content rather than aesthetics.
• Second, the question “What sites do you like?” focuses too much on personal taste rather than designs that will meet business objectives.

Instead of asking this question, I recommend that the designer select half a dozen existing web sites that have elements he or she feels are appropriate to the project. The designer should then present these sites to the client and explain why they’ve been selected. Doing so will stimulate a discussion about the different approaches the design could take, and will give the client relevant examples to respond to.

Many designers already keep a repository of inspirational design. However, if you’re looking for inspiration I highly recommend Patrick Haney’s Flickr Feed [1] or Design Meltdown. [2]

4. The Use of Mood Boards

Out of these discussions should emerge two or three possible directions that the design could take. One approach would be to mock up these directions as finished designs. The problem with this approach is that it often leads to a “Frankenstein” design, where the client attempts to combine elements of each design. In my experience, this approach is rarely successful and can be time-consuming.

Instead, the designer should create a series of mood boards representing each design approach. The intention of these mood boards is to include elements that might be used in a final design, rather than resemble the actual design. These mood boards could include the following elements:

• typography
• color
• imagery
• screen elements (e.g. navigation bar)

Mood boards provide several advantages, such as they:

• are quick to produce
• focus on aesthetics, rather than content
• are flexible enough to accommodate a combination of approaches (for example, using imagery from one mood board with typography from another)

Because mood boards are relatively straightforward to develop, it’s possible to perform several iterations if required.

5. Wireframing

Although mood boards are excellent for establishing the feel of a design, you need to produce a wireframe to resolve issues of layout, hierarchy, and content.

Designers are often intimidated by wireframes because of the perception they’re time-consuming and expensive to produce. Many designers think of a wireframe as a prototype of the entire site, created in HTML. While such detailed wireframes can be useful, polished prototypes to this level of detail are unnecessary to achieve design sign-off.

In our experience, a collection of simple, hand-drawn sketches of some key pages is sufficient for the client to understand how the design will look. In fact, I’ve seen some clients confused by more finished wireframes—they’ve mistaken them for the final design and have been reluctant to sign them off.

By keeping wireframes hand-drawn there’s less investment in them. This makes it more likely they’ll change and evolve through discussion between designer and client. Additionally, the low barrier to entry means the client can be involved in wireframing too. Clients are often just as capable of sketching ideas as the designer and should be encouraged to do so.

That said, hand-drawn sketches can become confusing after multiple iterations. Therefore, once an agreement has been reached, the designer should produce a final, more polished set that can be used for design testing.

6. Design Testing

With mood boards and wireframes in hand, now is the perfect time to see how your target audience will react. Although you should also test the final design, there’s also a real benefit from testing at this early stage. The earlier you test, the easier it is to make changes, and the less time you’ll have wasted on a design that might fail to work.

Design testing also brings some subjectivity to the proceedings and can be used to resolve any lingering differences between client and designer (read more about design testing [3] in an article I wrote a couple of years ago). After all, both parties are close enough to the project to need a third party opinion—and who better to provide that than the people for who you’re building the site!

It’s vitally important that the end user is involved in the design process, so design testing needs to be kept lightweight to ensure it happens. Ideally, design testing should consist of two simple tests:

• The Flash Test: The user is shown a wireframe design for five seconds, and then asked to recall what screen elements he saw. The number and order of items recalled gives a good indication of whether the informational hierarchy is correct.
• The Emotional Response Test: The user is shown each mood board and asked to associate the feel of the mood board with any number of opposing words. Is the design conservative or progressive? Is it personal or formal? The answers to this test give an indication of which mood board is stimulating the desired response from the user.

With the users’ feedback on both the wireframes and the mood boards, it should now be possible for the client to sign off on the preferred layout and aesthetic. Only once this sign-off has been achieved should the designer begin work on the final design.

7. Design and Iteration

The designer now has all of the information required to produce a final design:

1. background information on the business, collected from the kick-off meeting and stakeholder interviews


2. a mood board and a collection of inspirational sites that will inform the site’s look and feel


3. wireframes that will dictate the layout and informational hierarchy

However, most importantly, the client has a clear understanding of the design process and the elements that will inform the final design. This means that the client will receive no nasty surprises when the final design is presented.

Of course, the designer will still need to explain the design decisions he or she has made, as the client may be unable to make the connection with the previous work done. By referring back to the mood boards, briefing information and wireframes, the designer should find it relatively easy to explain the chosen approach.

Does this mean that the designer will create the perfect design first time? Almost certainly not—most designs require some level of iteration and refinement. However, the amount of refinement should be considerably less than would traditionally be the case, and it’s extremely unlikely that the client will flat-out reject a design. After all, the final design will be as much the client’s as the designer’s.

Conclusions

On first reading this article you may be thinking that the process I’ve described sounds time-consuming and expensive. Without a doubt there’s a lot of work involved before a design is ever produced. However, in the long run, we’ve found it to be a real time-saver. Endless iterations can seriously delay an otherwise well-managed project—unlike the tasks of producing wireframes, producing mood boards or conducting meetings, accounting for endless iterations is impossible to plan. There’s no way to predict how long it will take the designer to produce a design that the client will approve. This can makes the project very hard to schedule, and any slippages can sour the relationship between designer and client.

This process provides a structure for a project that runs smoothly and actually helps to consolidate the relationship between both parties, rather than undermine it.

Finally, there’s no reason why you have to use every step for every project. Stakeholder meetings, for example, are often overkill for everything other than the largest projects. Having these options available will go a long way to reassuring your clients, while at the same time prevent you, the designer, from tearing your hair out!

[1] http://www.flickr.com/photos/splat/sets/981332/
[2] http://www.designmeltdown.com/
[3] http://boagworld.com/testing/design-testing/