Design Process

Do you have designs that are visually brilliant but poor in interaction? Do you struggle with stakeholders who send you back to make “expensive” design changes? If so, have you followed the below basic design process?

I  have always viewed “Design” as a 3-step process comprised of  – wireframes, interaction design & visual design. I would define them as follows -

Wireframes - The process of creating low fidelity “sketches” that define the structure of the website, it’s pages and how they relate to one another. Wireframes done at the “right” level of detail can help stakeholders “visualise” the solution being proposed.

Interaction Design – The process of creating “storyboards” that helps stakeholders visualise the “flow” through the website. One could define a storyboard for e.g. for a “wizard on the website” or for a “checkout process” on an online shop. The “storyboards” need not be different than “wireframes” but build upon them adding details wherever necessary

Visual Design – The process of visually (through shapes, fonts, colours) expressing the product to deliver the intended effect and reaffirm brand values. The “intended effect” is critical – as for an online shop it could mean motivating user to click the “buy” button whereas for a news website it could mean getting users to read “related news”.

Ideally you would have staff who is an “expert” on each step of this process. However, in practice, it isn’t unusual to have just one person that is responsible for all three aspects. The key point to note is that whether its a team of 3 or a team of 1 – each step of the process needs due diligence and care. Focus/Skip one or the other and one gets designs that are visually brilliant but poor in interaction or great in interaction but lacking a visual appeal.