Creating new standards of design with the NHS website

By Dean Vipond. 24 June 2019

The NHS website is huge. It has been running for around 12 years now and has tens of thousands of pages.  As with any website of that size and age, different page styles and ways of presenting information arise.

Last year, our challenge was to raise the overall standard of design on the NHS website - ensuring it was more consistent in its look, felt more trustworthy, and was more accessible for people with different needs. 

The team who made the GOV.UK design system (a set of guidance, design styles and templates) were the first people we contacted. They spent years doing user research, trying out designs, and developing a system that is flexible and accessible.

Because everything they did was open source (meaning other people can take the styles and code and reuse them), we could take their work and repurpose it for the NHS. This saved a huge amount of time and public money in the early stages of the project.

Now we have a well-regarded design of our own, we feel it is a great resource for NHS colleagues to take on board. We are actively encouraging teams within our organisation and the whole industry to learn from our approach by making our work open source.

Adaptation not imitation

Our work was not simply a case of taking the GOV.UK design styles and changing the fonts and colours. The NHS website does different things to GOV.UK, and visitors come to our site for different reasons. They might be worried, in pain, confused, or simply looking for advice on healthy eating. We had to consider all of these situations and design something that worked for them all. So we adapted GOV.UK’s work and made additions where we needed to.

For example, we have boxes that tell people if they need to get urgent help from a healthcare professional. We know the public generally tend to scan pages, so we wanted to make sure that if you only look at one thing on a page, it’s the thing that tells you to visit your GP or call an ambulance.

Also, unlike GOV.UK, we have to give warnings. For example, if people should avoid alcohol with certain medicines, or keep a child at home if they have chickenpox symptoms. We had to design ways to show advisory information like this, so it makes sense to people and is immediately noticeable.

Share and share alike

These design principles don’t only apply to the NHS website. Many other NHS teams are making new things for the web. Just as we started with GOV.UK’s work, other teams can now use the design and code we have created, saving their own resources, and at the same time ensuring related products are made in the same style. This means people can trust them more and know what to expect when using them.

For example, the NHS Business Services Authority are using the NHS.UK frontend library to make the new NHS jobs website. Here’s a great blog post about how they are doing it. The team who are working on the 111 online service are also adapting the code for their users. People working in NHS organisations around the country are also working out how to use these styles and components in their work too. Everyone’s needs are different, and we have built a growing, supportive community of people sharing advice and ideas. With open source, new teams can take the work we have done, adapt it further, and share that with others. One of our NHS design principles is, “Make things open, it makes things better.” Whether it’s GOV.UK, NHS.UK or the wider NHS, this is definitely true.  

To see all the design and code resources we have made so far, go to the NHS digital service manual