Making an NHS design
Take a look around various NHS websites, and a couple of things will stand out for you quite quickly. The first is that there is very little consistency between hospital, CCG and other local NHS websites – they all have varying interpretations of the NHS brand, and as a whole present quite a mixed message to our patients and stakeholders. The second is that there are a LOT of NHS websites out there – and the volume makes the mixed appearance even more confusing. In a perfect world, we would be able to present a consistent look and feel to our web visitors, and give them an easy to understand way of navigating our services.
Luckily, the team at NHS Digital have done a lot of hard work in this area, and recently launched the NHSUK frontend design.
The benefits of the NHS Frontend Design
- Branded – this is an immediately recognisable “NHS” brand design.
- Accessible – The design has been tested for accessibility and enables ALL of our visitors to access the information easily.
- Open source – the work is freely available, and as such can be used across all NHS organisations with no additional cost of money or time
- Maintained – the team at NHS Digital are constantly working to improve and further develop the design patterns, to accommodate new developments and to ensure it is permanently a “best in class” solution, as well as a secure one.
Because we had already decided to use WordPress for our Local Academy project, we decided to take the excellent work of the NHS Digital team and extend it to be a WordPress theme. Themes are a set of code that can be added to any WordPress site to provide a visual layer over the content and by developing a theme we could ensure that all of our sites were consistent and fully branded.
By working with colleagues from NHS Digital, we were able to get a better understanding of the design choices that had been made and to gain knowledge through the lessons they had learned. We set up an initial scoping meeting with them and with an external agency who designs websites for NHS organisations on a regular basis. Following this meeting, we decided that as well as the theme we would need to develop a plugin for visually displaying content. (The theme is the overall wrapper, the plugin would deal with individual content aspects).
The plugin – NHSblocks – leverages the relatively new Gutenberg layer in WordPress. This means that what users see when editing pages is immediately the same as what the end user will see. Because of the number of different modules we needed to create as well as the fact that Gutenberg is very new presented a number of challenges. We looked at whether to outsource this work or bring in a specialist, but decided that it was worth the additional time of up-skilling our team in house to be able to maintain this plugin in the future. The plugin is now live on the WordPress website and can be installed completely free of charge on any WordPress site in the world.
The theme was initially developed over a single weekend, and provided a proof of concept from which we could then further develop and refine. As well as continuing to work with NHS Digital, we also had offers of help from Health Education England and the Local Leadership Academies. Using their feedback, gathering their requirements and working alongside them we were then able to develop the theme further and ensure that it catered for a wide variety of different website usages.
In addition to this we also had ongoing work within the team where the theme was able to be stress tested in rapid deployment situations. We have already seen websites being developed using the theme for HEE, NHS England / Improvement, Leadership Academy and General Practice purposes.
The theme is now available to use for any NHS organisation from our GitHub repository, and will be shortly available on the WordPress theme repository for easy deployment from within any WordPress website. Once this happens, any NHS organisation will be able to install WordPress, and once installed can then add the NHSBlocks plugin and the Nightingale theme. This will give them a professionally designed, fully accessible and mobile responsive website in minutes at no cost (except hosting which they will need to provide).