Before you start About the GOV.UK Prototype Kit

What is the GOV.UK Prototype Kit?

"The GOV.UK Prototype Kit provides a simple way to make interactive prototypes that look like pages on GOV.UK. These prototypes can be used to show ideas to people you work with, and to do user research."

The Prototype Kit is a powerful tool for performing usability testing of a digital service with real users and gain insight into why a particular design does or doesn’t work. Its strength is in creating fully interactive experiences.

The GOV.UK Prototype Kit contains all the necessary design patterns and components needed to make pages that look like GOV.UK pages.

There are a number of comprehensive tutorials and examples available on the GOV.UK site, however knowing a few web development basics will make it easier to follow these and troubleshoot independently. As a result, these pages aim to supplement the official documentation with related skills and resources.

Components of the Prototype Kit

Technically there are three component parts of the Prototype Kit:

The GOV.UK Design System: the documentation for all the styles, components and patterns.
govuk-frontend: contains the code used by developers to build user interfaces for government services. As a designer, you don't really need to worry about this as it is included in the Prototype Kit.
GOV.UK Prototype Kit: a simple web application that contains govuk-frontend and that can be used by designers to rapidly create interactive prototypes as per the GOV.UK Design System.

When should I use the Prototype Kit?

It’s probably best not to design pages and journeys directly in the Prototype Kit. Its strength lies in simulating real interactions with a digital service, not designing them. Unless you are particularly proficient with your code, do the problem solving and design before building a prototype in the kit.

A few things to think about:

It's a prototype - your code doesn't have to perfect.
Whilst your code doesn't have to be 'production standard', think about documenting what you do - someone else will have to pick up your prototype at some point.
It's a design artefact, not precise documentation for what is going to be built. You don't necessarily have to design and feature every page in a service in your prototype - just what is useful for the design process and what is pertinent to the research you want to conduct.
You don't necessarily have to implement full validation for your forms in your prototypes - just what is pertinent to what you need to test and research. See Craig Abbott's blog 'Validation for prototypes'.
Be wary of making your prototypes too 'clever' - it might seem useful in the short term to introduce some whizzy JavaScript, but you might be making it very hard for another designer to pick-up in the medium term.

The Prototype Kit and accessibility

Accessibility is a crucial part of your role as a designer at DWP. As such, your prototypes should be designed in an accessible fashion. In terms of your code, you should try to make it accessible, but it isn't necessarily the focus of using the kit: you're not expected to feature fully accessible, production-ready code.

However, by using the GOV.UK Design System, your prototypes should be accessible to an extent. Understanding the basics of HTML - and the related good practice - will also help you implement accessible prototypes. You should also be encouraged to test your prototypes with users with accessibility needs: if you do this, the accessibility of your code will be crucial.