A Quick Primer for an Effective Web(app) Design Process

A big problem with interface design is the focus on aesthetic. Remember that your website is first and foremost a tool for people to interact with your company. Aesthetic is only a factor in the overall consideration of the design process.

What's most important is understanding your customers, your readers, your prospects. To have a successful design implemented you need to take a few steps back and get away from design all together. Here's how to start:

1. Design Research (Personas / Mental Models)

Start by segmenting the different groups of people who use your site; or who your trying to target to use your site. Research what they are trying to get out of your site. What is it that they need? What is it that you need to tell them in order to convert them from a prospect to a client? These motives and outcomes need to be evaluated and documented so that you can design effectively.

2. Paper Prototyping

The next step is to get ideas flushed out rapidly on paper. You may iterate through several ideas. The idea here is to quickly create concepts for different scenarios that your users will encounter to achieve the tasks you want them to do on your site. If you flush it out quickly on paper you can actually run various ideas past sample groups to get some immediate feedback. You can test to see if they were able to accomplish the tasks you set out for them to do. You can also find out if they need to be able to do something you didn't necessarily anticipate. This is a very low fidelity form of user testing and a crucial step in a successful design process.

2b. HTML/Flash Prototypes

If your budget permits you can actually build out your newly sketched out website as a plain looking interface. The goal here not to create something that looks amazing. The goal is to build something that represents the paper design as quickly as possible. By doing this you can then actually send customers / users to the working prototype and see how they actually use it.

3. Art Direction / Mockups

Finally, once you have worked out all of the kinks with your design you can start focusing on making it pretty. Again, aesthetic is very important but it often comes to soon in the design process. People view this segment as the design process when in fact it is really the last step. Aesthetic is used to improve the user experience of the site. It comes in the form of art direction as well as animation and other interactive effects that can help communicate actions and provide feedback to the user. This step can be very time consuming and making changes to the overall UI when working in high fidelity becomes a more time consuming process. Thus it makes it harder for us to react to the necessary changes we need to make to our website in order for our design to be truly successful. This is why you must focus on aesthetic at a later stage in the design process.