Choosing a prototyping method
Prototyping is the process of creating a model or design of something in order to test and iterate it before making a final version.
Prototypes can be high or low fidelity. Sketching is an example of low-fidelity prototyping. At MoJ, Figma and coded prototypes are the tools we use for high-fidelity prototyping.
There are advantages and disadvantages for each method. Choose one according to your needs.
Sketching (low fidelity)
Sketching is typically done with a pen and paper and is sometimes called paper prototyping. You can also use a collaborative tool such as Miro.
Advantages
- Quick and cheap.
- Builds a design foundation.
- Enables you to create, iterate and throw away ideas without getting invested.
- You can focus on the flow and key concepts, not details.
Disadvantages
- Paper prototyping is harder to share – and collaborate on – remotely.
- Can be challenging to test with participants remotely.
Use cases
Sketching is used to test designs early in the process.
Read about sketching on the NN/g website
Figma (high fidelity)
Figma is a tool for creating designs, and user testing (depending on what the prototype needs to do).
Advantages
- Fairly quick and easy.
- No coding knowledge needed.
- Enables the whole team to work together, including making and viewing comments.
Disadvantages
- You need to be familiar with Figma.
- Interactions are quite limited.
- Harder to present realistic data.
- Cannot handle specific user testing, for example with assistive technology.
- Cannot respond to data input in testing.
Use cases
- Building user flows.
- Making simple, clickable prototypes to show navigation.
- Connecting to the MoJ Design System through the Figma Kits.
Read about setting up Figma prototypes at MoJ
GOV.UK Prototype Kit (high fidelity)
The GOV.UK Prototype Kit (sometimes called ‘the kit’) enables you to create something that looks and acts like your service.
Advantages
- The team and stakeholders get a better sense of how a product will behave.
- Responds to different devices and screen sizes.
- Easier handover from design to development (and for working out if a design is feasible).
Disadvantages
- Takes more time to build.
- You need coding skills.
- Harder to collect comments and feedback from the whole team.
Use cases
- User testing with real data and interactions, plus keyboard navigation.
- Testing with assistive technologies users.
Read about setting up coded prototypes at MoJ