updated: October 2nd, 2009 / Ross Johnson / 27 Comments

Improve Your Creative Process, Better Design, Quicker Approvals

There are two things I struggle with the most in my job, staring at a blank photoshop canvas and having to fight the fourth round of revisions despite the fact that we had established doing only two in our contract. However there is hope, I have found ways that have improved our approval process and improved my designs significantly. Our projects are actually more profitable because we added a few steps to the creative process.

EXPLORATION

Exploration is really two phases in and of itself, as you have two areas to explore and gather information from. One is the clients themselves, learning what they want, their needs, and their expectations is critical. Secondly doing your own exploration and research into the industry, their competitors, will give you a whole new perspective on the project.

Kick Off Meeting

Exploration on the client end usually starts with a kick off meeting. Use the kick off meeting to find not only the technical and information requirements (what exactly is going to go on the site/page), but this is a great opportunity to ask a lot of probing questions as to how the website should communicate and what usability considerations are in play.

Now I avoid saying “how the website should look” because a lot of people who are not trained have passionate opinions on that question and it is not always linked to communication. Instead I want to move deeper, almost into a “brand messaging” level to really get to the core of “What is this group all about?”

Example Questions:

  • What should the users first thoughts be after seeing the site design?
  • What is the age group of the common user?
  • What is their level of technical ability?
  • If you had to boil it down to one specific goal, what is the primary goal for the website?
  • What are some tasks that users will be performing on the website?
  • If the design could say one sentence, what would that sentence be?
  • How can we visually communicate that sentence?

The idea is to get them thinking about the message and how that message can be communicated graphically. Now what I have found in many cases is that the untrained people in the meeting might have some vague ideas that may or may not be valid, but this is a perfect way to steer the group towards your expert thoughts and ideas while still letting them feel like it was their group ideas.

External Research

After you have learned as much as possible about the client(s) from their own perspective, it is time to do external research and find out what their competitors are doing and what other people think of them. Their competitors are easy to investigate, simply firing up a web browser and search engine can give you a wealth of knowledge about them ranging from their communication strategy, to reviews/opinions about them.

However to research the client further I will often try and get a list of average customers lined up and give them a quick call and ask them 3-5 unobtrusive questions to see what the general perception of the client is. You could ask them to perform a survey if they are busy, or if you have more than 5 questions to ask. The goal is to really learn the true perception rather than the assumed perception.

Communications Strategy Document

Sometimes this is also referred to as a creative brief, but we tend to call it a communication strategy document simply because we
feel it fits better. This may feel like an extra step but I assure you it saves time in a way you couldn’t imagine. The benefit is really two fold.

  1. It requires YOU to think about everything you have learned, what the client wants to communicate, the contradicting perceptions, and HOW you are going to do it. If you have ever found yourself hunting through design galleries or sketching trying to figure out how to get a look and feel that seems to “fit”

    Ask yourself questions, such as “How can I communicate young and edgy, and put that into words?” or “The company is very free spirited and wants to communicate ease of interaction, does that mean rounded flowing design or open and clean?”

  2. It also puts the client on the same page as you in terms of how the design should look. When you have a 1 – 2 page document that explains how the website should look and feel and WHY it is almost impossible to say “No, that doesn’t make sense.” Further you can get the client to sign off on it, which will be a subconscious “I agree” on the clients side. This will make it much less likely that the client will object or want to “play around” with the design concepts presented.

You will find that your design revisions drop dramatically, and if there are revisions they will be simple and minor compared to “Lets try a different look” type of revisions.

WIREFRAMES

At this point you have a choice, you could develop wireframes or you should move straight into photoshop. For me this really depends on the client, as sometimes wireframes can feel a bit limiting. There might be 2-3 different locations that the navigation could go and still be completely usable. In this case a signed off wireframe could limit my creativity.

However if I am dealing with a client that has more than 2 – 3 decisions makers, or they seem extremely opinionated and likely to draw out the creative process I will start with wireframes simply because it makes it harder to want to “try” different design decisions. Again the goal of the wireframe is to block out where the different elements of the website will be located and get the client to sign off on it. It is a mental “I agree with what they came up with” and a commitment on the clients part that makes it hard to go back and ask for changes, and if they do you are fully justified in asking for more money (due to increased time on the project.)

DESIGN MOCK UPS

Now I am not going to talk about doing the design mock-ups themselves, rather how you present them. I deeply believe the designs should be presented in person, in a browser, in the form of a web slideshow.

What we do is have an explanation page that links to the mockup page, followed by another explanation page followed by the second mockup page.

Explaining your design decisions before you show the mockup to the client gives you a chance to talk about all of the things you tried that didn’t work, you can re-enforce the communication strategy, and talk about every nuance of the design. By the time you show them the design concept they will both be nodding their head in agreement, but also eager to see the masterpiece you have created. It will prevent you from having to DEFEND your design decisions (which becomes a YOU vs the CLIENT situation) and instead you explain them before hand and they just make sense when the client sees it.

Secondly by showing the client on a screen in a browser you will avoid the situations where the client likes/dislikes something based on the fact that it is not being displayed in its natural environment. The most common situations are when a client prints out the design concept and wants something bigger because it doesn’t take up half the page, or later they find that there is content below the fold and they don’t like that.

If you present the mockup like it is a masterpiece that will move mountains the client will feel like it is too. It gives you a chance to really sell and presell your design in a way that simply opening up a PDF or JPEG could never do. Again this will save countless hours in revisions and you will end up with a stronger design for your portfolio because it won’t be washed out by the opinions of 4-5 different people on the design committee.

CONCLUSION

The real gems that I get out of this process is a better understanding of what I should be communicating, and the process of thinking and writing out what is the best visual way to go about the communication. I have always worried more about creating high quality work than time/budget, however there is the added benefit of a smoother and quicker creative process because you keep the client agreeing with you with out unnecessary design review and justification steps.

27 thoughts Improve Your Creative Process, Better Design, Quicker Approvals

  1. I liked the content on this site. Would like to visit again.

    Shirin Goel
  2. Thank you soo much for this entry. I am a webdesigner. I have the problem of having to redo the website over and over because somebody woke up and decided that the nav bar should go to the other side.

    Also, some people want the sidebar to the right on the home page and to the left on the rest of the pages. How can I explain that that doesn’t look good?

    What about when somebody gives me the text, I load the text and then they correct the text again and again, should I charge more?:?

    How do you handle the payments? do you send an invoice and expect the check on the mail? do you have a credit card on file and then charge people. Sometimes I feel uncomfortable charging people. do you have some words of advice on how do you tell them that they have to pay??

    thanks

  3. With the navigation moving it is pretty easy to find a few usability studies that show that moving the navigation in general tends to cause confusion. If your clients don’t listen to your advice then find others who have the same recommendations, how can they argue against testing and statistics?

    In terms of the text you should charge more, and it is easy to if you clearly define content delivery as part of the design/development process.

    After the design is approved you should have a content delivery due date, and the content has be turned in by that point and fully approved/edited/etc. Any changes will be billed hourly. If you establish this up front the client will take you seriously and make sure the content is right the first time. If you just switch it out indefinitely they have no reason not to make sure they are happy with it.

    In terms of payment you have to get over it. Realize that your work is valuable and understand how much your time is worth. Once you are confident in the fact that you have a valuable skill you will have no problem asking for money. Would you go to a grocery store and expect to get the food for free? What about getting a hair cut? Of course not, and neither do clients. However if you offer to do it for free of course people will take you up on it.

    In terms of billing do a milestone approach, 50% at the start of the project, 20% after the design is approved, 20% after the content has been put into the site, and 10% before you launch the site.

    ross
  4. I work with what one might consider micro-clients. This is a different game although obviously the issues are the same. I like what you have written, and it tracks right along with my design approach, but I am plainly low budget and that sets limits on changes and the like.

    I like to get my clients focused in on who their audience(s)are and most often I write the content, as well as design the site, with that in mind.

    In my mind, websites answer questions leading to the sale. Sometimes visitors don’t understand the questions, so that must be dealt with head on. Language issues are central to the communication strategy, and if the client has multiple publics it might be necessary to carefully survey the mix, the strategy, and perhaps even position certain pages to certain groups.

    I absolutely agree the central point of design is communication. Nielsen’s research indicates that visitors are more and more impatient with sites that lack clarity and fairly obvious responses to “what’s in it for me”. I think he termed it “information predation”. Any designer not reading useit.com is really missing out I think.

    I am doing websites for $400 apiece (with a free year of web hosting), roughly $10 an hour. I am in the toughest of rural markets, all small time operators. This is quite a departure from the old days of $75 an hour, but it is immensely satisfying to help a small time operator create and maintain a decent web site. The core principles all apply, but everything falls on the back of the content creator. I am pretty sure they have no idea what a bargain they are getting.

    Your writing is very useful. I think it is helpful to pause every now and then, come up for air, and think about what we are doing. It is obvious that you spend time thinking about your craft. Thanks for sharing.

    MD

  5. Wow this post is really helpfull!

    I know for sure this will improve my process and presentations.

    thanks!

  6. Glad you found value Micheal, and sounds like your business model is working (although I don’t know that I would try it). A lot of these processes can be warped to include copy as well, where there is a high level of subjectivity and a tendency to change things up frequently.

    ross
  7. Pingback: ifoh designs | » Friday’s Five: Week 7 | Web Design That Is Neat.

  8. Thank you for this information. I am just getting into freelance and your suggestions will help me be more confident when presenting an idea to a client.

  9. Site has very useful content and articles. Will recommend this to others.

  10. Thanks for this realy usefull informations…

  11. Pingback: Websites you Shouldn´t have missed in JULY 2008

  12. This a great article and I think a lot of people out there can learn from this. Especially young freelancers.

  13. Pingback: Улыбнитесь » Blog Archive » Websites you Shouldn´t have missed in JULY 2008

  14. Pingback: Design Discovery Document, What I Use to Learn More About Client Needs… » - Web Design Marketing Podcast & Blog

  15. Pingback: 9 of The Best Ways To Present A Website To A Client

  16. Would it be possible to see a post about your “communication strategy documents”? They sound like they have a different focus to “design briefs” and I’d really be interested in hearing more about them.

    Fantastic post again.

    Craig Roberts
  17. Pingback: S A N D E E P [ I N D I A N I C ] » Blog Archive » Websites you Shouldn´t have missed in JULY 2008

  18. Pingback: Websites you Shouldn´t have missed in JULY 2008 | POLPDESIGN

  19. Pingback: » Blog Archive » Morning vid-Link Love and FaithSisters Challenge

  20. Pingback: Package of the most cool and useful websites of this month | Design it

  21. Thank you for this information. I am just getting into freelance and your suggestions will help me be more confident when presenting an idea to a client.

    mohit negi
  22. I would add to it doing tutorials.. improve your skills..

  23. When you are presenting the design mockups, you say you present them as a web slideshow. Can you elaborate on that a little? I’m not quite sure what you mean…

    Kerry
  24. Very useful article. What do you tend to use for the wireframes – Visio, PowerPoint or Photoshop or another?

  25. Pingback: links for 2010-01-08 | Box A Design

Comments are closed.