Code   o'clock

The power of prototyping

Before a feature goes into development, it is good practice to check if the overall concept and design really make sense for the user. It’s the time to build an interactive prototype and go into user testing.

UX Methodologies: Prototyping

Prototypes can become the biggest ally of UX designers, and of the whole team. They can lead to the (re)shaping of a product or feature in few iterations and save us time and money. But if we invest too much time and effort to make them look and work like they were ready for production, they can actually turn into blockers.

Also, if we fall in love with our design, we risk trying to stick to it or even getting stuck. For example, we can loose the necessary flexibility one needs to adjust after user feedback. That’s why the prototype must be stripped down to the minimum, but it still has to contain all the necessary functionalities and needed design basics to be understandable for the user.

Ideation and creation

First of all it is possible to create a user story mapping, which helps to design the flow that the user will follow and to map the various phases of the interaction. This can be aided by sketching a storyboard, something close to a comic that illustrates the various parts of the flow. This is a very creative part of the process and it is awesome!

The second step might be the creation of a paper prototype, with sketches and several layers of paper to emulate the interface. It’s very crafty and definitely fun!

Paper prototype for mobile and stencil

The final step is the creation of the digital prototype. This will either be reviewed internally for feedback or go into user testing, another really exciting phase cause we can foresee how the user will interact with our product and collect more information about his needs, goals and pain points. Probably the best part!

Tools for prototyping

There are several pieces of software that help to create interactive prototypes, for instance Axure, Invision, Hype, UXPin, but my personal favorites are good old HTML, CSS and Javascript. In this way you can include the prototype of your new feature in the environment of your website or web application and especially you can see how it works together with the other interactions already available on the site. Also if you have a styleguide or a pattern library, it is easy to copy and paste code snippets to the html to give it the look and feel of your website or app.

Design and usability

In my experience, even a little design tweak can improve the interface’s usability. For example, in a prototype we worked on in the past, we chose a medium grey for headlines. They were tapable, but during the user testing nobody noticed that. They were perceiving the grey as inactive! It was enough to modify the CSS right away, to see the next users all tap on them. The prototype should not be too detailed, but the usability should be taken into account.


Prototypes are shortcuts to user feedback. Definitely a necessary asset if you want to create a product that fulfills the user needs. Go build some!

Share post