Throughout a project, we’re constantly developing lots of ideas and concepts, some of which define an overall user experience, others of which simply sketch out a single, small interaction. A lot of our time is spent working out flows & processes that simplify and enhance the experience of using a digital product. As you can imagine, this isn’t a linear, static process. Concepts need testing, tweaking and refining - quickly.

This is where prototyping comes in…

Prototyping helps designers design but just as important is that it also helps them communicate. We create simple working versions of a web product, normally without visual design, so we can try our ideas out, play with them and think about them.

Prototypes are easy to change, edit or throw away and once we’ve refined them we use them to demonstrate how we think things should work.

They allow all related stakeholders from clients to developers to users to experience how things might work and to get an understanding of the user flows in practice, allowing designers to get useful feedback from all involved.

Prototypes range from diagrams on paper to fully photoshopped interactive systems. They help to link all phases of our projects and allows a much more fluid approach. Prototyping is also fun, quick and easy and allows designers to quickly get ‘hands on’ with their ideas. There are a number of positives to including prototyping into our project process:

1. It’s an agile process that allows for development innovation and iteration at a fast pace
2. It’s a great way for the client to grasp how the site will work in reality - it enables them to walk in the shoes of their user and give tangible and useful feedback.
3. The designer can easily demonstrate their ideas for functionality and interaction
4. It enables us to anticipate all the different user flows and subsequent functionality and experiences that needs to be designed to accommodate it
5. It allows us to easily translate how our user experience will translate from web to a mobile, or vice versa.

Dining Solutions: Prototypes in Action

We recently prototyped a mobile focused version of an online takeaway service - Dining solutions. We’d previously designed their brand and site back in 2005, when takeaway food ordering (and the way we surf the web) was totally different.

Prototyping came into its own during this project - as we were able to establish the best user experience through a series of trial and error prototypes. We used Axure, an application that allowed us to combine traditional static wireframing with interactive functionality. Its a great way to quickly sketch out ideas and to see whether they worked in reality, without getting into full-on coding. Through constant refining and tweaking - we quickly came to a working prototype to show the client, who in turn was able to understand how it would work and easily give feedback. When the final product was delivered, the client was happy with the way it looked visually but also knew it would give their users the best experience possible.