Skip to main content

Building accessible and mobile-first services for the NHS

After we relaunched the NHS website last August, we needed a way of sharing what we learnt with other digital teams to help them build accessible, mobile-first products and services too. David Hunter, an interaction designer in the NHS website redesign team at NHS Digital, explains how we did this.

By David Hunter, 20 March, 2019

Mobile and desktop screenshots of the NHS.uk website

In August 2018, the site previously known as NHS Choices was relaunched as simply the NHS website. It featured a new, clearer design that was more accessible, readable, and designed primarily for mobile devices.

It was well received, and teams across the NHS began wanting to reuse what we had made.

But, we had a problem - there was no easy way of doing this. Sharing code with other teams across the NHS was complicated because there was no one true source of frontend code. As a result, there was lots of duplicated effort, out-of-date styles and inconsistency between different parts of the NHS website.

We needed a way of distributing all our new, accessible and user tested styles and components. So we made two things – the NHS.UK frontend, and the NHS.UK prototype kit.

The NHS.UK frontend

The NHS.UK frontend is a centrally-controlled source of accessible, tested styles and components which we hope will increase the consistency of products, save money through reuse and lead to more coherent journeys for users.

Starting with GOV.UK

The GOV.UK Frontend, built by a team at the Government Digital Service, was an excellent starting point as they are ahead of us in designing and building accessible components for public services.

We were able to reuse a lot of what they had, and we built upon that to meet the specific needs of the NHS.

Doing this was an efficient way of working, saving time and public money. We look forward to contributing back any findings or changes.

Working in the open

Everything we do is in the open, free for everyone to look at and learn from. All our code is well-presented and documented, making it easier for others to pick up.

We encourage others working on services in health to work with us, by contributing new code back to us.

Making it for everyone

NHS services are for everyone - so we have thought about accessibility from the outset.

We have been regularly testing with people:

  • who are dyslexic
  • who are blind or partially sighted
  • who are deaf or hard of hearing
  • who have been affected by Parkinson’s disease
  • with a learning disability, autism or both

Doing this helps us to know what really works for people.

All members of our team were trained on how to use various assistive technologies, such as VoiceOver, Dragon and ZoomText. Involving everyone in accessibility was a great way of understanding how different people use the web and ensuring what we make works for everyone.

We also made improvements following some accessibility audits done by Digital Accessibility Centre (DAC).

Using the NHS.UK frontend

Teams can now begin using the NHS.UK frontend in live services - visit GitHub to find out how.

The NHS.UK prototype kit

Screenshot of the NHS.UK prototype kit

While the NHS.UK frontend is the code for live services, teams need a way of experimenting with new things during the design process.

The NHS.UK prototype kit lets you test ideas and new services that look and behave like the NHS website.

The prototype kit uses code from the NHS.UK frontend, so teams will always be prototyping with the latest styles, components and patterns.

Using the prototype kit

Teams who use the prototype kit can:

  • quickly create realistic prototypes for testing with users
  • focus on unique problems - not having to start from scratch each time
  • include users with access needs throughout the design process
  • have multiple people collaborate on the same prototype
  • publish prototypes to the web - excellent for testing on lots of different devices

We did lots of user research with designers and developers to make sure our installation and how-to guides are easy to follow, and we will continue to improve these.

Post-it notes with user research insights stuck on a printed version of the installation guides

To use the prototype kit you only need basic HTML knowledge. We plan on running prototype kit training sessions and code clubs for those who want to improve their skills.

You can download and install the NHS.UK prototype kit and get up and running in no time.

Let us know how you get on by emailing us or messaging us on the #prototype-kit channel on the NHS.UK service manual Slack workspace.

The NHS digital service manual

The NHS.UK frontend and prototype kit should make it much easier for other teams to build digital services, but we don’t want them building ‘beautiful nonsense’ – things which look right, but aren't informed by user needs, haven’t been thoroughly tested, and that meet organisational needs rather than those of the people using them.

The new NHS.UK design stands for quality, so people can be reassured that what they are using will work for them. One of our design principles is ’design for trust’, and we must not jeopardise that.

The NHS digital service manual will help you build for trust. The design principles in it will guide your work and help you focus on user needs. The service manual also provides you with things like the context in which components were tested, advice on accessibility and much more.

What next?

We’ll continue to work with the Standards Team, iterating and improving the NHS.UK service manual, frontend and prototype kit with a big focus on building a community of practice and support.

For more information, contact us direct on the NHS.UK service manual Slack workspace or email the standards team at service-manual@nhs.net.

Last edited: 23 April 2019 1:28 pm