Making the NHS design system fit for the future

Over the past few months, we’ve focused on strengthening the foundations of the design system. The first step was to rebuild the NHS frontend kit, the code behind the design system. 

This work is now complete. Version 10 has been released, and we now need teams across the NHS to upgrade so everyone can benefit from the improvements and can move forward together.

The purpose of a design system is to solve repeated or common problems, such as how to ask a user for their date of birth, or how to make sure important information is clear and visible to them. 

Design systems help delivery teams create consistent user experiences that feel familiar, behave predictably, and, when done well, are accessible.

They do this by offering a set of reusable design components and patterns that can be trusted and used 'off the shelf' by multiple teams, saving them time and effort. 

The NHS design system played a vital role during the COVID-19 pandemic. Because foundational work had already been done, we were able to respond quickly when ministers asked us to design and deliver digital services in record time. We launched:

• 'Get a fit note' in 2 weeks
• 'Get tested for COVID-19' in 4 weeks
• 'Book a COVID-19 vaccination' in 16 weeks

Of course, there was more to these services than just using a design system. But having a library of user-researched, accessible, and usable components made that kind of delivery speed possible.

The NHS brand is highly trusted and needs to be protected. The NHS logo and blue colour scheme is a trust mark to many. Digital products that look like phishing sites, or fake NHS websites can cause real harm, which makes maintaining visual and brand consistency both a cyber security and clinical safety issue.

If something looks and behaves like an NHS website, people are more likely to trust it. But, if a legitimate NHS digital product doesn’t look authentic, people may avoid using it. At best, that wastes public money. At worst it causes harm to people.

Without a shared, easy to use and accessible NHS design system, and the NHS frontend code behind it, teams and organisations will create inconsistent digital products, developed in isolation, using varying styles, patterns and standards. This results in fragmented, and inconsistent experiences that undermine trust and increase clinical risk.

Usability and accessibility are clinical risk issues. If a person cannot order their repeat prescription, they may run out of medicine. If a healthcare professional or a clinician enters wrong data into a patient’s medical record, it can have serious consequences. 

The NHS design system provides consistent, usable, and accessible components that help reduce those risks.

We know the design system works. And as the NHS continues to shift from analogue to digital, as set out in Fit for the future: 10 year health plan for England, the design system now provides a more secure and efficient underpinning for this journey. It reduces duplication and saves money. Giving teams across the system a shared set of tools and patterns means effort goes into solving real health challenges rather than rebuilding the basics.

When the NHS frontend library was first created in 2017, it reused a lot of the code from the GOV.UK frontend (the code behind GOV.UK services), learning from its success and building on the strong foundations it had already laid.

While we drew heavily on GOV.UK, we developed our own frontend to meet needs specific to the health service.

Since 2017 there have been lots of improvements and updates to the engineering and design of the GOV.UK frontend, and the NHS frontend has struggled to keep pace. 

We have now realigned and updated the NHS frontend to follow changes to the GOV.UK frontend. This helps us to keep up with best practice, and make accessibility improvements. It also enables us to adopt design components from GOV.UK, such as the notification banner, and benefit from future updates.

As well as this, we have removed deprecated and legacy code to make our frontend smaller and easier to maintain. And we’ve squashed more than 20 bugs.

It’s a big update which also includes a logged-in header component with a log out button and account details, and updates to the footer, buttons and more.

This new update (version 10) will help us grow the NHS design system more efficiently so that it continues to support our digital teams in developing quality services, faster.

Version 10 of the frontend code is now live. We need as many teams as possible to adopt it. As this release contains some breaking changes, we’ve published an upgrade guide in the NHS service manual to help you through the changes you’ll need to make.

We understand this takes some time and effort away from delivery, but it is critical so that every digital product can benefit from the foundational changes we have made in this release. That way, you will continue to benefit from the updates we are going to release over coming months. We believe these will bring measurable improvements to accessibility, usability and the visual look of NHS products.

We will continue to support version 9 for the next 6 months, but to benefit from any future updates, you need to update to version 10.