Designing services using GOV.UK styles, components, and patterns

As someone interested in the latest trends in UX design, I see the GDS Prototyping Kit mentioned all the time in UX job specs - even for non-government services.

It’s clear there must be a reason so many businesses use GOV.UK standards. So I wanted to explore what makes this kit so popular, how it works, and why businesses of all kinds rely on it to create consistent and accessible services.

How exactly does Prototyping work?

Before diving deeper, let’s talk briefly about prototyping. In UX Engineering, prototyping is the process of creating an early model of a product to test ideas, user flows, and design elements.

The best prototypes are usually interactive, helping designers, users, and stakeholders experience how a service “feels” in the real world. This lets teams spot usability issues early on and iterate quickly before spending on full development.

For government projects, prototyping is critical as these services must stick closely to accessibility and usability standards. Governments need to make sure their services work for (literally) everyone - through intensive usability testing throughout the design process.

But what about non-government businesses?

Well in that case, prototyping with the GOV.UK kit is even more valuable! It lets businesses piggyback off rigorous (and often costly) research done by governments to make sure their services are 100% accessible - all without spending a penny on extra development/research.

What is the GDS Prototyping Kit?

The GDS Prototyping Kit, developed by the UK Government Digital Service (GDS), helps people create prototypes that follow the GOV.UK design principles. It comes preloaded with styles, components, and patterns, making it easier to build prototypes that meet the strict usability and accessibility standards.

Any business or organisation that prioritises UCD can get value from it. For example, a financial services company wants to prototype user-friendly application forms… They could use the GDS Prototyping Kit to get all the elements they need pre-built and accessible.

Using GOV.UK styles and components

One of the main reasons businesses and organisations use the GDS Prototyping Kit is that it comes preloaded with GOV.UK styles and components. This ensures that their services follow the same design principles as other GOV.UK services, providing a familiar and trusted experience for users.

Example: adding a GOV.UK button

At its simplest, if you need to add a button to your service, you can simply use the prestyled GOV.UK button element:

<a href="#" role="button" class="govuk-button">Continue</a>

This gives you a button that’s fully styled according to GOV.UK standards with good accessibility by default.

Example: adding a GOV.UK form

Forms are at the heart of most digital services. With the GDS Prototyping Kit, you can spin up forms that stick closely to accessibility best practices. Here’s an example:

<form method="post" action="/submit">
  <div class="govuk-form-group">
    <label class="govuk-label" for="name">Full name</label>
    <input class="govuk-input" id="name" name="name" type="text">
  </div>
  <button class="govuk-button" type="submit">Submit</button>
</form>

By using these prebuilt components, businesses can focus on refining user flows and gathering feedback rather than worrying about fiddly front-end accessibility stuff.

Using GOV.UK sesign patterns

The GDS Prototyping Kit also includes a variety of GOV.UK design patterns, which are standardised solutions to common problems in service design. These patterns are especially useful for businesses looking to ensure that their services are intuitive and easy to use.

For example, if you need to create a sign-in flow, you can follow the GOV.UK design pattern for authentication.

Using these patterns, businesses can avoid common usability pitfalls and provide a more consistent user experience, which is especially important for services that users might interact with repeatedly, such as paying taxes or applying for benefits.

When would businesses find this useful?

The GDS Prototyping Kit is incredibly versatile and can be applied in various sectors:

• Financial Services: A bank could use the kit to prototype a user-friendly loan application process, ensuring that the user experience is consistent and accessible.

• Healthcare: A healthcare provider might use the kit to design a service for booking appointments or managing prescriptions, focusing on accessibility for all users.

• Retail: An e-commerce platform could prototype a GOV.UK-inspired checkout process that simplifies the user journey and builds trust with customers.

• Education: Universities could design digital services for student applications or course registrations, ensuring the process is streamlined and easy to follow.

By using the GDS Prototyping Kit, these businesses can quickly create and test user flows, ensuring that the final product meets high standards of usability and accessibility.

Best practices for using the GDS Prototyping Kit

From what I’ve seen, there are a few best practices to keep in mind:

1. Follow GOV.UK standards to the letter: the prototyping kit makes it easy to follow GOV.UK standards, but it’s important you make sure design patterns line up (it’s easy to drop components into a project without building a logical user flow)

2. Keep prototypes focused: prototypes should focus on testing key user interactions. Overcomplicating interactions with a bunch of animations is a waste of time - iterate quickly, make things look good, then run usability tests.

3. Collaborate early and often: share your prototypes with stakeholders and real users as early as possible. The faster you get feedback, the better your final service will be.

Conclusion

The GDS Prototyping Kit is a powerful tool for businesses that want to design digital services with a strong focus on user-centred design, accessibility, and consistency.

By using GOV.UK components and design patterns, you can build, test, and iterate quickly, making sure your services meet the high standards (without having to wade through WCAG guidelines just to get something working right).

I plan to use the GDS Prototyping Kit in more projects. It’ll be interesting to see how many industries I can use it in. E.g. government, finance, healthcare… etc. I don’t really think there’s a limit.