From Sketch to Screen: Sound Discovery Process to help in the conceptualization and design of a beautiful and functional website
We have all envisioned creating that amazing site for our clients – one that serves all their needs – from communicating copious amounts of data in an interesting way with seamless and transparent navigation, to loading in the blink of an eye and looking like gold in every browser, at every resolution.
Achieving this is possible with sheer genius and luck, but also with a bit of planning and foresight coupled with an ability to think out-of-the-box and multitask while being organized and staying on schedule.
Sounds impossible? It’s actually quite simple if the task at hand is broken into a step-by-step process with easily achievable goals at each stage. A simple breakdown of the process includes the following stages as an example: discovery, information architecture, design, technical implementation, testing and launch.
Stage 1: Discovery
This is probably the most crucial stage in the development of a website. In order to deliver the most user-friendly, visually appealing and functional website, the designer really needs to listen to the client’s needs and communicate a good understanding of these needs along with their own preliminary findings. There are a few steps in this process.
1. Client Survey / Creative Brief Questionnaire: Ask the client to do some work before you set out to wow them with your awesome design skills. Send them detailed questionnaires about their goals, needs and preferences, ask them about sites they enjoy to visit often, and sites of their competitors, what they like and don’t like about these sites. Ask them specific questions about the mindset of the target audience, and more importantly what they would like to say, and what they would like the audience to do after they have visited the site. Questions about the desired perception of the site, technology needs and timelines are very crucial at this stage.
2. Discovery Research Document: While the client is away doing their homework, the designer starts their research process. This process includes looking at the clients’ competitors, and other relevant sites, local and global. The findings can then be compiled into a discovery research document with screenshots and pros and cons of each site listed, so that it could come in handy throughout the life of the project as a point of reference. Even though we might feel like we can remember all that we have seen, it is important to put it in a document so that both the client and designer have a point of reference at a later stage.
A very effective technique is to make a live presentation of the findings of the discovery phase to the client, so that their opinions and feedback can be considered at the outset instead of coming as a surprise at the end when a lot of time and effort has already been put into the design. It also helps solidify ideas and set the tone and expectations of the outcome at the very start of the project thus bringing the designer and client to the same page. See an example of a discovery presentation slide here:

3. Mood Boards: Along with the discovery research document which analyses the client’s competitors’ sites, a mood board is often a very effective tool in getting a constructive conversation started. It is usually in the form of a collage of bits and pieces of visual inspiration, colors, fonts, etc. Some places to look for inspiration include photo sharing sites like flickr.com, stock photo sites like istockphoto.com, color sites like pantone.com or a good old image search on google. Some examples of effective and thought-provoking mood boards:



images from: http://weblog.404creative.com/2007/02/14/website-mood-boards-a-successful-precursor-to-visual-prototyping/
In conclusion, a sound discovery process eliminates a lot of guesswork from the process of creating a great website as it forms a good starting point where the expectations of the client and the understanding of the client’s needs by the designer are presented in an organized manner. Detailed and informative questionnaires, a solid discovery research document/presentation, interesting mood boards: not only do these serve well through the duration of said project, they become invaluable assets for future projects as well.


October 27th, 2009 at 12:36 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by allwebdesign: From Sketch to Screen: Sound Discovery Process to help in the conceptualization and design of a beautiful and f.. http://bit.ly/2VgQF8...
October 29th, 2009 at 12:53 am
Hi Madhavi, hows San Francisco?
Great article really well written, and good tips. Never thought of doing a mood board, always thought that was more for the fashion industry, but its a really effective idea for getting the basic design scheme agreed with the client. Good work.