What’s the value of prototyping in UX design?

Prototypes are a versatile way of drafting a version of a product or design to allow you to explore, test hypotheses and iterate on ideas. Prototypes show the user the potential designs and experience before investing time and money into formal development.

A prototype can vary from project to project; ranging from low fidelity paper sketches to high fidelity interactive click-through journeys. The type of prototype used is highly dependent where the project is in the product development lifecycle, but fundamentally a prototype is made to test hypotheses.

Why do we use prototypes?

1. They’re quick and easy to create

Prototypes can be put together by any stakeholder and can be as simple as a sketch on paper. If the purpose is to communicate an idea to a designer or developer, then sometimes a quick sketch or flow can do the job just as well as a high-fidelity prototype. Some projects, such as those working in a Lean or Agile manner, require teams to test assumptions quickly and work on top of previous findings on a bi-weekly basis. Prototyping in these environments can be off-putting due to the time needed to build them. However, we’ve found that low fidelity prototypes are often more than enough to answer many early design questions and take little time to create.

2. Learn what’s working well (and what’s not)

Putting ideas and designs into any form of prototype can help uncover mistakes, oversights or incorrect assumptions previously missed. This is especially the case when testing your prototype with users. Some ideas simply don’t work as imagined when put into practice, or some assumptions made early on weren’t given enough time to work through. Prototyping gives the team the opportunity to weed out these issues before any significant financial commitments have been made on the development. Likewise, this is an opportunity to find out what is really working well and to understand why. Having ideas built and put in front of users helps pinpoint which features are effective, and where to look to roll out those features elsewhere.

3. Improvements can be identified

As you learn what’s working well, you’ll be able to look at how some features need tweaking to maximise the effectiveness. As the prototype is a live, working file, it’s a great way to test new ideas or make changes on the fly with minimal risk. As prototypes are not one-off, they can be used over the course of a project and evolve alongside it; they can aid the team in working at speed, with agility and eventually become a high-fidelity interactive replica that resembles the intended final design of a product.

4. They bring the team together

Getting a visual or interactive prototype together can really help get everyone on board with the overall design decisions that have been made. It can also be beneficial to stakeholders, or others who might not be as involved with the day-to-day design decisions, to see the ideas and outcomes of the team in a realistic form. These benefits can be wide ranging, from reducing the number of meetings, to improving the morale and engagement of the wider team.

5. Attract potential customers and bring people on board

Prototypes can be a great sales tool! There is little better to help communicate ideas than a visual, working representation. They can be influential in getting potential customers or senior stakeholders onboard with a new product or feature.

6. A better development handover

If the designs require a certain type of interaction, animation or change of state, having them well defined and built can save time during development as less questions need to be asked and developers can jump straight into building. It can be helpful to have both designers and developers working together during the design phase, as developers can provide requirements and advice on what needs or should be included on a prototype.

Fidelity

The fidelity is often a top concern in terms of prototyping. Determining which level of fidelity to use largely depends on where the project is in the design phase and what needs to be learned. Here at Nomensa, we refer to three types of fidelity:

• Low: Sketchy, informal, acts as a stimulus to test early concepts
• Medium: Also called “greyscale”, it’s the traditional fidelity of wireframes in a lot of research settings
• High: Polished look and feel also factored into the prototype. As close to the finished article as possible

Choosing the right type of prototype that suits the needs of the project is crucial as it has implications on three major factors:

• Time and effect of initial production and ongoing maintenance
• Quality and honesty of user feedback in research sessions.
• Project/sprint budgets.

Formats of prototypes

There are typically three format types that each have advantages and disadvantages:

Paper

Typically used in early concept work to ascertain whether an idea is even worth pursuing. It’s a research tool in the purest sense that delivers rapid results and genuine user feedback.

Software

Specialist prototyping software such as Axure, Sketch, Proto.io etc. enables the exploration of layout and interactivity but can get into difficulty in a responsive context. These can be built to near indecipherable replications of the real thing but can take a long time to get there.

Coded

Going straight to code enables faster prototyping in some contexts, particularly when a responsive behaviour is required, where the development and ongoing maintenance of a prototype across multiple breakpoints can be better managed. Rapid changes can be applied across the prototype (e.g. CSS changes). Coded prototypes are not however, a short-cut to a fully developed product. There may be some indication to the developer on the intention of how something could be built, but they by no means are a substitute for a fully tested & built product.

Whenever prototyping, it’s important to identify a clear idea of what you’re trying to achieve. This helps build a collective understanding with all stakeholders of when it’s time to move on. Maintaining a prototype long-term shouldn’t be the objective and by knowing what you are trying to achieve you also get an idea of when you should move on.

We’ve used prototypes extensively throughout all our years in UX and particularly in our partnership with the Met Office. These have ranged from simple wireframe print-outs for some quick on-the-street guerrilla testing, through to fully interactive experiences used to test accessibility and/or usability in our labs. For example, we used this prototype in a recent sprint to help test how certain changes to weather information can help improve how users interpret the data at a glance.

Due to the nature of the public weather service that the Met Office supplies, all our work must be tested rigorously. We’re very aware that any misunderstanding of the weather data can lead to a negative effect on the Met Office brand perception and in extreme cases, have possible risk to the users life.

This is just skimming the surface of prototyping’s potential. You can read more about our work with the Met Office, or get in touch to speak to one of our expert team members.