Design Discovery Document, What I Use to Learn More About Client Needs…

I recently posted about how to improve your creative process, and one of the core elements of that process is learning everything you can about what the client wants, expects, and needs to gain from the creative deliverables. Really the core of this learning process is asking the right questions and guiding the client in answering them, this way you get a clear idea of what you are to be communicating through your design.

I built my design discovery document through observing and reading about what others had put on their questionnaire, as well as trial and error (finding holes in my creative briefs and then writing questions that would help fill those holes). So to keep giving back to the community I wanted to post a quick rundown of the typical questions I ask during the client kick off meeting.

NOTE: Some of these questions are web design specific, others are more generic, and some I leave out depending on the scope of the project

PERCEPTION

1. What are 3 emotions or feelings a user should feel when they visit the site. Rank them 1 – 3 in terms of importance? (example: excited, calm, happy, etc)??????
   
2. What are 3 characteristics you want your site to portray? Rank them 1 – 3 in terms of importance. (example: professional, innovative, reliable, etc)???????
   
3. Do you have any brand colors? If not, what colors could be used to accomplish the feelings and characteristics from questions 1 & 2???????????
   
4. What types of images or illustrations could be used to communicate the feelings and characteristics of questions 1 & 2?
   

Content + AUDIENCE + TASKS

1. What are the primary tasks that a browser will use the site to complete? (example: register for more information, purchase a product, etc)???????
   
2. What are 2 – 3 goals you would like the site to accomplish? (NOTE: Goals are measurable tasks such as “increase sales”, or “improve brand recognition.” Putting content on a site is NOT a goal, ie: “Have a photo gallery”)???????
   
3. Describe a typical site visitor. How often are they online, and what do they generally use the web for? Give basic demographics: age, occupation, income level, purchasing habits. (Use as much detail as possible in profiling your target user. Profile more than one type if appropriate)??????????
   
4. What are the key reasons why the target audience chooses your company’s products and/or service (cost, service, value)?
5. What will be the primary navigation items on the site? (example: home, about, contact, etc)
   
6. Will there be any secondary navigation? If so, on what pages will they be on?
   
7. What utilities should the site have? (example: search / sitemap / help / etc)??????
   

MARKETING + UPDATING

1. How do most people find out about your product/service or website? What kind of triggers prompt a contact?
   
2. Briefly, what are your short-term marketing plans (specifically, for the site redesign and the 6 to 12 months following launch)?
   
3. Do you have an existing or planned marketing strategy in mind to promote this site launch? If so, please describe.
   
4. Do you intend to keep the site updated? If so, how often? Who is responsible for updating and providing content?
   

HOMEPAGE INFORMATION?

1. What content or information should be included on the homepage??????????
   
2. What elements on the home page will need to be updated frequently????
   

You can also download a sample of our discovery document here.

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.

Adobe Acrobat 9, making web design / development easier?

One of the fortunes I have had in my career is the starting and participation of the Detroit chapter of Refreshing Cities, dubbed “Refresh Detroit.” We have had a lot of great local and national speakers come in. While my favorite speakers have always been the local talent and learning the great things they are doing with the web in our little corner of Michigan, we had the pleasure of having Doug Halliday from Adobe speak to us about the upcoming release of Adobe Acrobat 9.

While Doug’s job is the business development of the manufacturing vertical at Adobe, through his presentation I learned of a lot of exciting features that will provide huge advantages to us web designers / developers.

PDFs, more than documents

Many people (me included) have become to think of PDF’s as simply a format for rendering documents across browsers/platforms. However there have been a lot of powerful features added to Acrobat that extends the functionality much beyond document rendering. This new release for example, boasts an impressive 350 new enhancements to PDF’s and PDF creation.

New Features

One of the most powerful new features of Acrobat 9 is the integration of different media types including Flash. We now have the ability to embed not only flash video into PDFs but also Flash Applications. I assure you this opens more possibilities than simply being able to add a video into a word document. Consider the ability to easily create a PDF portfolio built on flash. You can send your clients on PDF file that only requires a free reader, and they can browse through all of your work in a nicely defined and professional PDF “application.”

More on portfolios

The new version of Acrobat also offers the ability to create a specific compound package called a “Portfolio.” A Portfolio is a pre built flash application embedded in a PDF that can contain any file that you would like it too. For example this could be 5 images, 2 pdfs, 1 flash video, and a word document. Rather than send a prospect your image portfolio, maybe some rich media you have worked on, and your contract all in separate attachments you could instead package them into a portfolio and send them one PDF. The Portfolio has a pre built impressive navigation interface based on flash (kinda feels like itunes), and will automatically launch any embedded document in the appropriate viewer.

Capturing Web pages

The third feature that truly excited me was the ability to capture entire web sites. And by capture I don’t mean take a screen shot. Acrobat 9 has the capability to actually capture live entire web sites and deposit them into a PDF — fully functioning. It seems like a lot of server side scripting won’t work of course, however if you are producing a brochure site you could send a client the progress of your site in a fully functioning PDF. They could click through every page and see all of the flash, javascript, images, etc just like it was a web site.

Clients could then go through the entire site and add comments, notes, etc to every page before sending it back to you with all the attached feedback. Much better than any other solution I have encountered for feedback workflow and web pages.

Acrobat.com

Finally Acrobat 9 has full support for Acrobat.com, a free online service that allows you to share and collaborate on PDF documents live with other people around the world. Very powerful for document development and creation.

There were a lot of other features in Acrobat 9 like full 3D rendering support for CAD/Engineering files, forms, etc… but these were the features that seemed most beneficial to us web developers.