The Battlefield of Design: Designers vs Clients

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 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!