Prototyping

Creating prototypes during the development process is an essential part of building your product or service. Prototypes allow you to rapidly test different designs and solutions before building the final version, helping you to save costs, time, and gather feedback from users as early as possible.

What is a prototype?

A prototype is an early sample, product, or model used to test ideas and concepts before building a service. Prototypes can be used to test a concept in the early stages of designing and building a service. In later stages, prototypes can help test a UI design, in-person service, or technical functionality.

Prototypes can be:

simple paper sketches to quickly gather feedback on general concepts or rough ideas (low fidelity)
wireframes that use images to show the visual elements of each webpage and screen with little detail
high-fidelity wireframe which show a visual representation of a finished product
functional prototypes that include a working version of the functionality you're testing

Prototypes don't need to be expensive and they shouldn't take long to build. Regardless of the form it takes, the process is iterative. A good prototype leads to constructive feedback and further insights, not agreement.

Benefits of prototyping

The purpose of a prototype is to gather behavioural insights, rather than attitudinal, with as little investment as possible. When we give a user something to use, and observe the way they reach their goal, the feedback we get is more reliable than if we'd asked them to imagine what they would have done.

Prototypes are used throughout the development cycle – alpha, beta and live – to experiment with different designs and solutions, and to test new features and improvements.

Prototyping can help you:

examine a design concept's viability
improve usability through constant testing
help ensure you're building the right service for users
help the team develop a shared vision about the service as it moves towards the end result
enable faster design exploration, which is more efficient than using production code.

Low fidelity prototypes

Low fidelity prototypes are rough representations of concepts early in the design phase, usually in alpha or early beta phase. They are usually quick sketches or simple digital renderings of what the expected product/service should contain.

It's best to use low fidelity prototypes to:

communicate the concepts, design alternatives, screen layouts at a high level
focus on significant functionalities
put thoughts down quickly
detect and fix major problems early, rather than later
receive feedback that is relevant from the start of the project.

Tools you can use to make low fidelity prototypes

The tool could be anything that would help you communicate quickly. Here are a few ideas:

pen and paper
post-it notes, flip chart paper, markers
cardboard
Balsamiq
Lumzy
SimpleDiagrams

Start with sketching

It's always quicker to work out ideas on paper than to jump into code. Sketching is non-committal and an important part of a good design process. For sketching, all you need is some paper and good pens.

Ben Terrett's sketching templates on Gov.UK can help you get started.

Hi-fidelity mock ups

High fidelity mock-ups are polished visuals that look and function close to what you envision the end product to be.

It's best to use high fidelity mock-ups to:

get clarification on copy
understand user flow and information hierarchy when building a website
consider what the different forms of execution will best align with user's goals
spot mistakes early and pivot early, rather than after development and coding starts.

Tools you can use to make high fidelity prototypes

Here are a few well-known tools you can explore:

Functional prototypes

In cases where the prototype needs to test how the product works, building prototypes in code allows you to rapidly achieve a life-like experience. If you're testing how technology meets user needs, that part of the technology should feel like the real thing.

Example: If you're testing the UX of how a search function might help users find what they need, they should be able to type their search query in to the prototype, and get results based on it.

Although coded prototypes perform as a live product, they should be less expensive to develop than production-ready code.

Using the HTML Starter Kit

You can quickly prototype a UI in HTML using the Design System HTML Starter Kit. It's a compiled version of the Design System that can be full run from your file system.

Testing your prototypes

Find out more about how to test your prototypes:

Resources

This content is based on work by the Ontario Digital Service and is licensed under the Creative Commons Attribution 4.0 Licence.