Communication in Web Design: My Web Design Process

I recently had a chat with a prospective client, he has an upcoming business venture and is in the market to get a website designed and developed. He had the usual questions about cost and turn around and then asked about my process. He told me that all of the designers he had talked to thus far offer a project price and supply the client with 3 designs, he is then able to select which one he likes the best and they will do up to 3 rounds of revisions on that design before moving onto development. Sounds like this could be a pretty typical approach to the design process, however, this is not my process.

So then, what is my process?

Step One: Listening to your client

I start all of my projects with a consultation. I meet with my client, usually for about 2 hours. The purpose of this meeting is to get the client talking about their goals for the design, the business and it’s needs, the audience or customer who will be using the site, the clients aesthetic tastes and preferences, the brand and how these aesthetic tastes relate to the established look of the brand, etc. I don’t give out many ideas in this meeting, its more about asking questions and encouraging my client to open up. Being a Designer is a lot like being a therapist, I spend a good amount of time just listening to my clients to hone in on what they are really looking to achieve.

Step Two: Research

After meeting with my client and getting an overall view of what they are looking to accomplish, I spend some time digging deeper into the information they have supplied me about their business, audience and goals. I check out their competitors sites and also look at other industries websites and the strategies they use to solve similar problems. I study the aesthetic elements that they client highlighted in our talk about their tastes and figure out how those can relate to the brand or if they don’t fit – I find alternatives that may also appeal to the clients sensibility while staying in vein with the brands look and feel. All of this gives me the clear calls to action, the information that needs to be included and it’s hierarchy.

From here I start sketching, whether it be on the computer or on some graph paper, I do some very rough wireframing of the main page layouts. I block how the elements will layout on the pages and how they relate to one another.

With these rough sketches and my refined analysis of our consultation, I go back to my client with my assessment of our talk. We go over the key points I pulled out and then we review my wireframes and I go over how I plan to set about addressing the issues at hand. Sometimes, at this stage there is something that a client then recalls that they feel is important that we hadn’t yet discussed – this is our time to make any directional changes on the sites overall message and adjust accordingly.

If the adjustments and/or additions are fairly minimal and we feel as if we are on the “same page” with each other, things move into the next phase….

Step Three: Design

Design to me is a very methodical process, the part where I am listening to my client or where I am researching their user base is just as important to me as when I choose that background HEX color. Once the preliminary steps are taken and I am clear on the direction to move, the design work begins. This is, my favorite part!

Step Four: Refine & Polish – Rinse & Repeat

Once I’ve completed a design mock-up I upload it to my web server, so that I am able to present the design to the client in a way that is very close to how it will appear in its final form. I simply save out a flattened image from my PSD and put in onto an HTML page. If there are multiple layouts within the site I will use image map linking to simulate functional navigation for the client, and they can click from page to page to see the various layouts. After the clients review we go over the design again and tie up any loose ends before I move on to development.

It is important to make sure that all of your design decisions are settled in this stage before you start slicing and coding. Include in your PSD all of the text elements that may be a part of the site including numbered lists, h1 – h5 tags, blockquotes, WordPress image captions, etc. Talk with your client about how the navigation and other interactive elements will function – if you’re planning to use any jquery functions, send them an example of your plan or mock something up for them.

Taking the time to settle all these details now will make development a faster process, plus you’re client will feel more at ease talking to you about text color in the stage. Many clients feel a sense of panic when they get a functioning site back and it isn’t exactly what they expected, (even if you have explained revisions can be done.) It’s best to set clear expectations early on, so there won’t be any surprises!

I work a little different than some, putting my emphasis early on into communication with my client, research and experimentation to find the proper solution for their needs. I’m also a little different in that I don’t offer a specific number of revision rounds. I want my client to walk away thrilled, not just happy, ecstatic!

Why this Works

I’m sure many of your are reading this and thinking that offering unlimited revisions would set you up to be walked all over and worked to the bone, but this isn’t the case. Sure you could end up regretting this approach if not executed properly… it’s all about the approach.

For starters, you have to present yourself to the client as an expert in what you do. Show your enthusiasm and knowledge, make them feel secure with giving you the reigns. This part is tricky, because it can’t be faked. Appose to what some freelancers would spout on their blogs, clients are not stupid. Demanding, Unreasonable at times, but not stupid. If you don’t really believe you know how to take charge of this project and give their business the best solution, they will sense this – and that’s going to make then nervous.

It’s important to set boundaries early on and let your client know what they can expect. I really do believe that the great majority of nightmare client situations happen when the client gets nervous about your capability to deliver  what they need. It’s in situations like that where they may feel the need to micro-manage. Before you kick off the project talk to them about your process, and what will be expected from them. Outline in your contract the specifics of what you are including in your project price (number of layout designs, functionality, features, browser support etc.)

Care. This is a big one in my eyes. Once you start looking at your client as just another paycheck, it is obvious. Remember why you are in this industry! You love design, right? Designs not fine art, it’s not about free range on personal expression. Its about lending your unique experience and skills to a client and helping them to grow their business through smart solutions. It’s creative, but it is also strategic! Part of a successful design process and creating an ongoing relationship with your client is to really care about their business and how your design solution is going to contribute to the future of that business.

What is Your Process?

Do you do multiple designs or focus on one? How do you handle revisions? Leave a comment and let me know about your process or your thoughts on all that I’ve wrote here about mine. Thanks for reading! :)

10 Comments

  1. Story added…

    Your story was featured in designmoo.com! Here is the link to vote it up and promote it: http://designmoo.com/node/6518

  2. Can I just say something before I head on with my comment, that has to be one of the most useful approaches I’ve ever seen any designer accommodate to their clients. Very well done, shows that you care as much about your clients as you do about their project.

    Being more of a programmer myself I adopt a kind of similar approach in terms of planning. I meet with the client and allow them to speak their mind regarding their project and I note down key areas of the meeting. I tend to try re-assure the client that the meeting isn’t a life threatening thing, and this loosens up the client greatly in sharing their focal point of what their project is all about.

    After I get the main elements, I then research on how I would for one put these elements as a whole together, and how the client would like them to operate. Obviously, researching competitive websites firstly before proceeding onto this step.

    I mainly use the second meeting at the end of the planning stage to show the client, the concept of how I plan to develop the project, the design work of how things will look, and the justifications for these decisions. This will then allow the client to make any further changes before signing off.

    During development of the project, I use a iteration type technique, by breaking my development of specific elements down into blocks, once a block finishes and is ready to be tested, I get the client to test and see how they like it. By doing this, I show the client exactly how their project is building up, and with adding them into the cycle, they feel wanted and have a sense of feeling they are contributing. Once all blocks are developed and tested, the client at the end gets an overall of the complete project tested before finishing.

    Once the client has tested, I get an evaluation from the client which provides me with his feedback of how I have done the project. And this again, serves as a last minute change before finalising the finished product with the client.

    Well, that’s how I do things, might need to take a few pointers from Liz though ha ha! Amazing article!

  3. Care. I’ve read so many blog posts explaining web design processes. Listening and communication are mentioned a lot, but as part of the business. I rarely ever see passion or the sense of fulfillment mentioned in the same post as the businesslike processes. So I love how you mentioned care. In everyday work, it’s something we often forget. :)

    I believe that listening and research are invaluable to any web design project — and in an ideal world, every project would have these important steps. But there are some clients who see web design as more of a product than a process. I think this is one of the reasons why designers usually do the X designs, Y revisions method. How do you deal with new clients who email you: “I need a website for my business. How much?”

  4. @Anthony Woods: Good point about putting your client at ease! A lot of people jump into a web project and they aren’t sure what to expect, which can be a little scary for them. …especially if they feel like they don’t *understand* the web. Personally, I think working with a print designer would be scarier cause print is so final! Web is ever evolving to fit your needs.

  5. @Madeline Ong:
    All of us who are working for ourselves have to make decisions about the type of business we are building and the clients that fit into that. Early on you really do want to take on as much as you can to build up experience and work for your portfolio, etc. But you should always keep in mind that every job you take on says something about your brand!

    I do get inquiries ffrom time to time who are strictly price shoppers, but rarely end up with these people as clients.

    How do you deal with new clients who email you: “I need a website for my business. How much?”

    My first response is that in order to quote them accurately I need to know more about the project, I follow up with some standard questions about the size of the site, the features needed, etc. Some people never even respond to that, those who do I usually get a sense pretty quick from what they send to me if they are seriously interested in hiring a designer or if they just want the cheapest and fastest available. If its the later I reply with a “ballpark” range for them on what something like the project they have described would cost them and let them know I am happy to send a more narrowed quote if they’re interested.

    Also, I don’t think there is anything wrong with simply asking what their budget is! A “tight budget” could be $100, it could be $3000, it’s all relative and you never know who you are a talking to. Starting out, sometimes I got people who had a smaller budget, but it wasn’t so low that I was willing to turn it away and some of these became valued clients who have grown with me.

  6. I’m still trying to work out the revisions part of the web design process. I’ve only been showing clients one design and most of the clients I’ve had, accepted that or only asked for minor modifications here and there. I haven’t had to deal with a client asking for revision after revision. If the revisions are causing the progress of the site to slow down or if a deadline is creeping up, I’ll have to put my foot down ever so lightly…somehow.

    I think one way to iron out what the client wants before designing the whole site is to send the client a mood board. I recently read an article by Kevin Flahaut about mood boards and thought it’d be a great addition to my process. He even provides a PSD template that is organized into different sections like color palette, typography choices, and sample imagery. With mood boards I honestly think you can avoid too many revision requests by covering the basics of the layout like color, imagery (patterns, textures and photography), an typography.

    Once the interface is designed, the client may see something that she doesn’t like. Maybe she wants this bit of info moved to another page or that button doesn’t look right or her husband doesn’t like the gradients! Anyway, my point is we can’t predict what the client will ask of us designers but we can at least try to cover as much of what the client (and the client’s husband or committee) wants and needs in the steps before designing the interface.

    Well, I think this has to be my longest comment (I don’t comment often) so I’ll end here. Excellent post, by the way, because it really got me thinking about the web designer and client relationship.

    1. Mood boards are a big help when you’re trying to communicate a direction to a client! Your comment reminded me of a mood board type thing I put together for Hatch (the design I have pictured in the post) I unloaded it to flickr: http://www.flickr.com/photos/cmdshiftdesign/4036083486/

  7. @Liz

    “All of us who are working for ourselves have to make decisions about the type of business we are building and the clients that fit into that.” This is so true! I usually see this as a win-win situation:

    -It’s great when I get to work on a project I like with a client I’m in accord with.
    -If there’s a project I don’t end up working on, it means that the client (or project) and I don’t fit together, which makes not working on it okay.

    Still, there are some projects I want to work on and clients I’d love to work with… but can’t, if I want to pay the bills. I guess we all have to find the comfortable intersection between doing what we love and getting paid for it.

    As for dealing with new clients, I also ask questions about the project as a first step. Some clients never get around to answering them, which immediately identifies the clients I would be incompatible with. If they can’t be bothered to answer questions about their business goals, how (and why) would I help them achieve these goals?

    Sorry, I’m starting to get off-tangent here. Thanks for your reply to my comment. Great post!

    @Corinne

    Thank you for bringing up mood boards! They’re a great idea. I’m fascinated with real-life scrapbooks — I’ve been meaning to fill a scrapbook with interior design photos and color samples for my dream home. So it’s weird I never thought about doing something similar for web design.

    I was going to say something about committees and gradients, but perhaps that’s a topic for another day. ;)

  8. […] BLOG From – Liz Andrade, web designer Asset – Advice, ideas, Liz’s video posts Read – “Communication in Web Design” by Liz […]

Comments are closed.