They say a picture is worth a thousand words. Well if that’s true, a prototype is probably worth ten thousand.

Prototypes enable us to bring our concepts, ideas and designs to life so that we can explore flow and interaction in a more tactile way. We use them to demonstrate concepts, communicate ideas and (perhaps most importantly) to validate our decisions through user testing.

What is a prototype?

A prototype is a low cost mockup of a product, and can be produced at varying levels of fidelity or interactivity.

But its purpose is always to aid the exploration of an idea beyond the limits of ‘flat’ designs on paper or screen.

Depending on the intended use or goal, we might prototype a single interaction, a flow or even an entire app – but in each case, we’re looking to develop and demonstrate our ideas as a tangible model we can interact with.

When do we prototype?

We incorporate prototyping into two parts of our design process: early during the discovery phase, and then again during the main design phase. 

In both cases, they’re living artefacts – they continuously evolve as functionality and the user flow is explored and developed. However, it’s not uncommon for additional quick prototypes to be created at other points in a project, that examine finer details such as micro-interactions, animations or transitions.

Prototyping might also be done as part of our initial engagement with new clients. These are often put together more as an opening conversation piece, but can become very useful as the project moves into the early stages of the discovery phase.

A prototype in the discovery phase will most likely be composed of the medium-to-high fidelity wireframes we produce from initial explorations and decisions made in collaboration with our clients and project team. 

These wireframes illustrate the proposed layout and functionality of the product. The prototype adds the layer of interactivity that’s needed to give a more complete demonstration of the proposed concepts. This prototype is also used in usability testing. Plus, as it mimics the functionality of the final product, it requires less introduction and explanation from the facilitator, and less imagination on the part of the participants.

As the design progresses, the prototype evolves, increasing in visual fidelity towards the final UI designs, which include the client’s branding and tone of voice. It’s visually identical to the final product in addition to that layer of interactivity. This prototype will also be used for a potential round of user testing.

How do we prototype?

We use three primary prototyping methods at Apadmi – each one bringing its strengths, each better suited to particular phases in the project lifecycle…

Paper prototyping
In the early stages of the design process, there's divergent and convergent thinking, ideas are flowing, and there's a need to get rapid feedback on potential solutions. As its name might suggest, paper prototyping consists of designs quickly sketched on paper, with the interaction layer performed manually. So, if the user ‘taps’ a button, the next screen is moved in by hand. If an idea doesn’t work then it can be thrown away – literally. It’s rapid, inexpensive, can increase creativity, and can help team-building when done collaboratively or as part of a workshop.
Design prototyping
Once a direction has been agreed with the client and project team, the designer begins to produce wireframes that illustrate what the layout and functionality is likely to be. These designs are the first to populate what will ultimately be the first main prototype in the project. Later, the prototype is updated using the visual UI designs. Designs are exported to our digital prototyping tool where interactivity is added, linking the screen designs together and adding transitions. These prototypes really help give a feel for how the app flows and responds when the user interacts with it. They can be displayed in a browser or on a mobile device which means they can be easily shared remotely for feedback and discussion. At Apadmi, digital prototypes are what we primarily use for our usability testing sessions.
Advanced prototyping
Sometimes we need to explore or demonstrate a particular area of a product in more detail – and prototyping with screen designs can only take this so far. Advanced prototyping will often focus on only one or two screens, but in much more detail. Individual elements in a design can be made to react and respond to user interaction exactly as a finished product might – animations can be triggered, data can be entered into fields and stored, and even formulas can be included to change what is displayed depending on user input. The main benefits of advanced prototyping lie in the detail. A description, no matter how passionate, may not do an idea justice or communicate it adequately. But an advanced prototype provides a means of illustrating a concept for a client or even developer, in extremely high fidelity.