Prototyping is a core activity when designing a new digital product or service. It’s also a key part of the GDS Service Standard Alpha phase for creating new digital services within central government.

Starting with a problem to solve or a new idea, it can be very challenging to know what this might look like from an early stage, or how it might possibly function. Prototyping is a learning tool to begin forming ideas, assumptions and risks into something tangible. It’s a way of getting something into the hands of your users to hear their thoughts, receive feedback, learn and iterate, before repeating this cycle again and again; aiming to get one step further towards a potential solution after each testing cycle.

There are many different ways of prototyping, depending on what you’re looking to do, and it’s not always a linear process. Here are four types of prototyping that you may consider using when creating a new digital product or service:

#1: Sketch prototyping

Sketch prototyping is just as it sounds — sketching out early ideas on paper to gather quick, early feedback. This is one of the lowest fidelity ways of prototyping, as well as one of the least expensive, but a very valuable stage as it allows for non-designers and key stakeholders to get directly involved.

Sketches don’t have to look perfect, by any means, the benefit is all in the low-effort input and high-value learning outputs. If you put a sketch in front of your user and their feedback is taking this into a different direction, simply scribble out what you’ve got, take this feedback and apply it to a next iteration of sketches.

#2: Paper prototyping

When you have a rough idea of the direction you might be heading in, grab yourself some more paper, a marker pen and a pair of scissors — it’s time to start mocking up early stage interfaces.

Paper prototyping allows you to take what you’ve learned from sketching and move this into a workable platform for your users to test further, as a physical “drag and drop”. By mocking up possible elements, this allows your users to begin experiencing individual interfaces, with example feedback possibly including:

• Moving a button or ‘Call to Action’ to a different location
• Changing the ordering of sections
• Rearranging selection options
• Introducing further features
• Disposing of unused features

#3: Mockup prototyping

Your paper-based interface may have gone through a few rounds of user feedback and iteration. Buttons may have moved slightly, Call to Actions may be larger, wording may have changed, but how will your users interact with this on a device?

Mockup prototyping allows you to put a higher-fidelity (and possibly branded) iteration into the hands of your users in a more realistic situation, such as on a smartphone device. These should be quick to produce, but look good enough to be considered “real” by your users. For this, platforms such as Marvel App can be used.

This type of prototyping allows users to feel like they’re using a real application or website, giving more of an observation focus in the user testing, rather than explanation. You can measure the expectations your users may have and the behaviours they may be showing, then allowing you to further test elements such as:

• Content — are you providing your users with the right amount of information?
• User journey — how seamless is the journey for your users?
• The look and feel — is it consistent from page to page?
• Any barriers — are your users experiencing any difficulties?
  

#4: Coded prototyping

When you’ve gone through a few more cycles of feedback and iteration, your mockup prototype may now be ready to move into a coded prototype. You’ve seen how your users move through a series of screenshots, but what about a basic coded concept?

Whilst code is a high-fidelity method of prototyping, and it may not be as polished as the mockup version, there is still much to learn during this valuable stage, including:

• Technical integrations — how will this product or service integrate into any other existing system requirements?
• Testing on different devices — how might this work on mobile, desktop and tablet?
• Risk reduction — can we learn as much as we need to about the risk involved in building this, before committing time and resource to building it?

For this type of prototyping, our framework of choice is Ruby on Rails:

• It allows to develop features quickly — already-existing code from elsewhere can be reused
• It’s cost-effective — there are no licenses and the code is open source
• It’s scalable — simple, rough prototypes can be quickly created, which can then be worked up into final stage products, all within the same technical framework

These are just four methods of prototyping that you may want to consider using when creating a new digital product or service. Depending on your individual project, you may be required just to use two or three, or all four and more (some online services may have a physical element to them, requiring you to begin prototyping for this too).