The power of prototyping: take it all

As an agency that practices the user centered design (UCD) approach, we apply a wide palette of tools to ensure that all requirements of the stakeholders were taken into account and that they evolve into a user friendly solution. One of our powerful techniques is wireframing with a subsequent transformation of the wireframes into prototypes.

You can't tell a book by its cover

Visual designs are always attractive to have a look at, and they are usually the final step before development. Therefore, it is not always evident why we actually need to spend time and do not start with the designs from the very beginning of a project. Do we need these sketches at all? What purpose can the clickable mockups serve? The truth is that there are several areas where even low fidelity or especially the low fidelity solutions can serve the project very well.

Low or high fidelity that is the question

There are different levels and ways to create a prototype starting with the paper ones and ending up at a fully functional code-written solution. Creating high fidelity prototypes is very tempting because they provide an almost real look and feel including all interactions and workflows. The only trouble is time and, therefore, cost. In the article “When To Prototype, When To Wireframe – How Much Fidelity Can You Afford?” Garett Dworman questions the high fidelity solutions. Creating them in the very beginning of the project, particularly when business requirements, scope, information architecture and interactions are not defined, expands the costs rapidly. On the other hand, low fidelity prototypes help to elaborate solutions quickly, emphasize big picture, improve design thinking and allow many iterations. Low fidelity solutions help concentrating on the functionality while high fidelity ones often distract the stakeholders and users, who start discussing colors and the general look of the page but not how this should work.

A good beginning makes a good ending

Our first design step usually needs a piece of paper or a white wall and a pencil. After several iterations and evaluations of paper prototypes we arm ourselves with computers and create the first wireframes in Axure. Axure allows us to be fast, share ideas online with our clients and team members no matter where they are et the moment. Later on we craft designs out of the most important pages or elements, ensuring the necessary level of interactivity. We never forget user experience research, conducting it as early as possible. There is nothing better, but to watch real people accomplishing tasks on a ‘real’ product. This can be a painful experience. Even more that legitimate critique has been pronounced emotionally and about your “sweet baby”, is not the nicest thing to learn. However, a stitch in time saves nine. Better accept a new design iteration than rebuild the entire website afterwards.

All in one

During the project’s lifetime prototypes do a good job as:

Specification for the client that allows defining the workflows and the most important areas. Prototypes are a good source for the expectations’ management and answer the question whether stakeholders and production teams speak the same language. They provide a basis to get more specific than “we need understandable solutions with the Call-To-Actions placed prominently”. Prototypes reveal whether we have a common understanding of what was agreed scope of the project or not and what can be considered as a change request.

Solid ground for designers. Producing visual design needs time. Having a thought through and good tested prototype saves a lot of time and helps directing creativity in a way that will make everybody happy: the users and the stakeholders.

Specification for the tech team. While the visual designs are in progress or only very few pages were produced, developers can start with implementation given that the user experience research was conducted. Speaking about the websites based on Drupal CMS, it is always good, but not really essential to see the end version of visual design to prepare the development environment, make a decision about the modules needed to install and start site building. For the latter it is fine not to know the exact look of the teaser, more important the existence of the teaser itself and the places where it should be shown.



Let us know how we can help you.