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 if your 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:
- Design System HTML Starter Kit
- Design System Figma UI Kit
- Sketch
- Invision
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:
- When to do research
- Plan user research for your service
- Plan a round of user research
- Usability testing
Resources
- GOV.UK Blog - Using prototypes in user research
- GOV.UK Making prototypes
- Design System HTML Starter Kit
- Design System Figma UI Kit
This content is based on work by the Ontario Digital Service and is licensed under the Creative Commons Attribution 4.0 Licence.