Headspace Halifax Website Design

A good process can work wonders for your design

In my experience, I’ve noticed that with traditional design studios, there seems to be more care put into the design process. Sometimes this process can be lacking when a firm specializes in the web. Perhaps this is because web firms have more to think about, there’s SEO, analytics, and the big focus; development. Poor old design can get relagated to the back seat it would seem.

But if you’re a designer, you need to fight for your craft! In many ways, this can be done by having a tighter process, which, instead of impeding creativity, will maximize client satisfaction and design quality.

Typical Design Process

1) Call/email/meet with client, go over design questionnaire
2) Begin design
3) Present design, and receive feedback
4) Make any necessary revisions
5) Once approved, send templates to development team
6) Review and test before launch

Okay, so this is a pretty standard process. I’ve found time and again though, that a few extra steps in the beginning and a few extra steps at the end go along way to minimizing needless client-revisions, and maximizing the quality of the final product. As you see, there’s only one extra number in the steps:

Suggested Design Process

1) Meet with client
2) Design Brief
3) Information Architecture/Wireframe/Sitemap
4) Design
5) Present
6) Translate to code
7) Refine and test

1) Meet with client

I can’t stress enough the importance of meeting with a client face-to-face. In many ways it can completely affect the final outcome of the website as well as the working relationship with the client. It is where you get a chance to present yourself as a consultant to the client, not merely an order taker.

The problem with sending an email questionnaire is that the client simply fills out an order for the designer, and then expects the order to be carried out the way a cook in a restaurant prepares a meal based off of written instructions, without ever meeting the patron. This is not the way to go about a design project. We want to develop real trust between ourselves and the client, trusting they know their business, and they need to trust we know design, and have their business interests at heart.

Also, you’ll notice that clients will often say completely different things when they fill out a questionnaire as opposed to a discussion, where they will naturally be more candid and less ‘official’. It’s this reading between the lines that will give you as the designer tremendous insight into the mind of the client.

If a personal kick-off meeting cannot be arranged (in the case that the client is out of the local area), a phone conference call can be arranged, but again, email exchanges are greatly discouraged, at least at this stage (once you know the client, email exchanges are fine).

Another note, it’s incredibly helpful to discuss content at this point. Getting a client thinking about their content early will reduce the likelihood of a site being put on hold for weeks while the client struggles to provide content. Having content, even if only rough, will also improve the design. Instead of designing a template with lorum ipsum, you will be designing with real content in mind. Content in this case can mean photos/video as well as copy. The more is planned from the beginning, the better. Never allow the client to treat content as an afterthought—it is perhaps the most important element of any website.

The business benefit of taking this approach is the up-sell factor. Unless you bring it to their attention, clients rarely think about the content. By reminding them that they need to provide it, you can often sell a client on allowing us to bring in a professional copy-writer for the written text, and a professional photographer for the images. This gives us better quality content to work with, and also brings in additional revenue for the company.

2) Present a design brief

Before even beginning the design, it is helpful to present a design-brief to the client. This is a common practice in traditional agencies, however it sometimes gets overlooked in a web design company, where other services such as site marketing and development can overshadow one of the key components to a site’s success—the design.

A design brief simply states back to the client in writing everything that was taken out of the kick-off meeting. It shows what your design strategy is based off of the clients’ goals. It defines for a client how to judge the success of the project, giving them a measuring stick, and eliminates the “wait and see” attitude of the client (ie: “I’ll know when I see it whether I like it”).

Once the design brief is signed off, it will serve as your guiding point for the rest of the project. If you stray from the brief, your client will let you know, and most likely question the design choices. If the client feedback is excessive and strays from the brief, you can always go back to it and state how your design fulfills all the mandates of the brief.

A good design brief is a crucial part of the design process.

3) Wireframe and site-map

Although its tempting to begin the design at this point, it can be helpful present a wireframe and sitemap to the client. This need not be in person, but a phone call to discuss is ideal.

Essentially, this is information architecture. You’re trying to get the client to understand and provide feedback on the information hierarchy without being ‘distracted’ by the branding aspect of the site design (ie: type, colors, photos). This will help the client comprehend your layout, which blocks of information go where, and it will help them understand the basic flow of the site—how users get from point A to point B.

This process can help you as the designer come up with ideas that improve the site usability, without being concerned (at this point) with the visual aesthetic.

4) Design

Now with all the necessary research and insight into the project, you can begin designing. Before starting the design on the computer, have a creative session with the design team. This is something done in most creative agencies, and again, gets overlooked in a web setting. It shouldn’t. A website deserves as much creative strategy as a print, radio or TV ad. Get together with the group, briefly discuss the clients goals, and then throw out concepts. Some of the greatest sites designs are based off of a concept, which help differentiate the client site from their competitors.

Remember that not just designers need to be involved here. It can be incredibly beneficial to brainstorm with a developer as well. Though we may not believe it at times, they are creative people in their own right, not just brains in jars plugging in function calls. Often, good developers will be able to offer insight into current development techniques being used that improve site usability, such as an interesting content feature, or a JavaScript method that still keeps the build within scope.

Before, during and after this, do thumbnail sketches of the site design so you can freely experiment with the design elements before being restricted by the computer. Remember, the software is only a tool to digitally translate your design. Once the team has brainstormed, leave them out. It doesn’t make business sense to have two designers working on the same site, nor does it improve the design by having multiple designs to choose from, which leads us to…

Don’t create more than one design. I highly discourage the act of mocking up multiple design options for a client. It devalues design, and wastes time and money for both the company and the client. Read more of my rant on the topic of multiple designs.

Although a common practice is to design a home page and a sub page layout, it is often beneficial to actually lay out the majority of the website using real (or close to real) content (which you received by now thanks to pestering the client at the beginning). Laying out standard pages such as ‘about us’ and ‘contact’ allows you to create sub page layout variations that depend on the content. This also gives the client a more concrete idea of how their site will look once coded and live. Of course, you need to actually enforce that these pages look like they were designed once they’ve gone to code land.

5) Present/revise design

With a finished design presented to the client, discuss with them how this design is based off of the wireframe, and more importantly the design brief. Show how all of the clients’ mandates for their target user are being met by the design. Don’t simply send it to the client and ask them if they like it—you have to sell it. NOTE: I usually refrain from referring to a design as a mock-up. I feel that subconsciously, this devalues what your offering by suggesting that it isn’t ‘designed’ until its in code form, reinforcing the notion that design is quick, cheap and easy. We are presenting their sites design, though not in a work-able format, therefore this is the time for the client to present feedback, not once it’s developed. Many clients try to speed through this ‘mock-up’ process to expedite the build. This will only cause problems down the line, and will slow down the developers.

Revisions from the client should be handled delicately. The trick is to balance customer service with self-respect and professionalism. Often clients will make judgment calls based off of what they “like”. However designing according to a clients’ taste is like shooting at a moving target. There’s nothing to base your decisions from. This is why presenting yourself at the beginning of the process as a consultant, and having an informed design brief will minimize the chance a client will tell you he doesn’t like what you’ve done. If a site is well designed and based off of real business goals, it can be sold to a client, even if he wouldn’t choose to decorate his home in the same style. One of the best ways to sell a client on a design is to repeatedly point out that decision X has been made for the target user. Decision Y has been made for the target user. This way your taste and the clients taste are completely left out of the equation.

There are times when a clients negative feedback is right on the money. Because they intimately know their business, they may have a request for a revision on an element that you’ve completely overlooked. In these instances, it’s important to avoid the cliche designer attitude that our crap doesn’t stink. Coming off as dogmatic only frustrates clients and makes them question your professionalism. If a client is completely wrong, and you believe strongly in your decisions, kindly and helpfully explain why you did what you did, and the magic words, “I can do it the other way, but I highly recommend we go with this approach, as it will [restate benefit]”.

6) Translate to code

Once the client has approved the design—and signed off—create the XHTML/CSS templates for the developer if possible. I like to create my own XHTML/CSS from scratch for several reasons, the primary one being quality control. No one understands your design better than you, and you’ll be able to pay attention to the minute details that a highly caffeinated, overworked developer will likely ignore. Most developers appreciate having a well put together template of the “easy stuff” so they can plug in the dynamic data, and you’ll be happy that your left margin is set to 22px instead of 20px, and the headings letter-spacing is set to -1.5 instead of the default 0. Design is in the details. If we designed the content to start 38px down from the header, it needs to be that way. We didn’t make those design decisions arbitrarily, and we need to stand up for them, Of course, at this stage it is also wise to cross-browser test, which will diminish the chance of browser bugs once the templates are integrated with the CMS.

I feel it’s a good idea in a design/development team to have a CSS framework. Having a consistent repository of code, and naming conventions, browser bug fixes will speed up development, and allow team members to pass code around, not having to take time understanding what the previous developer has done.

An often missing step in the web design process is post code design. Too often designers hand off their precious designs like a mother bird throwing her babies off a high tree branch for the last time, never to see them again. As designers, we should be actively involved in the implementation of content. I highly discourage developers, project managers or *gasp* clients entering their own content. No one knows more about typography than designers, and just as in print design, web content needs to be pampered and massaged in order to be truly effective.

Of course, a client with a large site featuring hundreds of dynamic pages, in the case of a store, or online magazine, should enter this content himself, however it’s imperative to work with the developers to establish a set of rules that will give the client zero control over the design of the page. Remember, they’re paying to have a system to manage their content, not redesign their site. If I hire an interior designer to design my living room, and then once she leaves, I proceed to repaint the walls, and change around all of the furnishings, I’ve wasted my money.

7) Test and Launch

In the case of a small to medium sized website, I recommend training a client on the CMS only after their site is live. This will ensure the launch date isn’t postponed due to a client trying to learn their tool, and it will take a huge burden off their shoulders, while at the same time providing the aforementioned design quality control.

Conclusion

Though some of this stuff is a no-brainer, taking a little bit more time in the design process can, in a long-term way, save us from undue stress, reduce client revisions, make for a happier client who values our work, ensure that we are proud to show off our design after its launched, and even submit it to award sites.

What do you think?

Thoughts

Remember my personal information

Notify me of follow-up comments?

Name

Email, only we will see this

Please enter the word you see in the image below: