A manual for designing and building digital services

By Olivia Sharp, 7 September 2018

Staff stood by TV screen with colour coding image.

I’m a content designer and I’ve been working on the standards team at NHS Digital. Over the last five months we have been working to put together a new NHS digital service manual to help people who build digital services for the NHS save time and work in a consistent, user-centred way. Back in April, I blogged about the beginnings of defining digital standards for the NHS. The first version of the service manual is now ready to be used.

Where are we?

A single starting point

We’ve produced a simple site, where people building digital services in the NHS can easily find styles, principles and guidance in one place. It’s in an open beta so that digital teams can use it and help us improve it.

Screenshot of the design and build homepage

Styles, patterns and components

We learned in our discovery that NHS Digital designers and front-end developers in different teams were working out for themselves how to recreate the digital NHS style. They didn’t always know if another team had come up with patterns they could reuse or adapt.

We now have up-to-date styles - grid, colours and typography - and guidance on how to use them.

We have the beginnings of a library of reusable patterns and components; so far they relate to the NHS website (www.nhs.uk) but the long term goal is that they can be adapted for other NHS services.

Everyone is interested in where a design decision has come from, to help them trust a style or pattern and help decide whether it’s right for their service, so we’ve included research background and rationale.

Research

In testing, users noticed the yelllow callouts and understood them as a warning.

Reserch shows that clearly worded callout headings: 

  • help users spot relevant information quickly
  • help users who cannot distinguish callouts by their colour
  • are better than icons, which may not be accessible and can be interperated in different ways

A new content style guide

We spent time researching with content producers at NHS Digital, working on the NHS website, services like 111 Online and the new NHS app, and public health campaigns.

We ran co-design workshops with our content designers to understand what they would need from a style guide, and brought together already in-use standards to create the first version of a new content style guide for digital teams to use.

Screenshot of the inclusive language page on the NHS design guide

Discussion, sharing and decisions

For the manual to grow, improve and be a place to save the cumulative knowledge of teams producing services for the NHS, we need people to be able to contribute their own learnings and patterns.

It’s something the vast majority of people we’ve researched with want too - to be able to own and shape the standards they work to.

So as well as working closely with different disciplines to produce the manual, we’re inviting discussion and submissions of new evidence and patterns.

What’s next?

We’re creating guidance for using images and videos, we’re also helping to define and articulate NHS Digital’s model for agile working and service design, and standards for technology.

Our front-end developers are producing a toolkit so designers and devs across the NHS can easily create HTML prototypes using our components and patterns.

We’re making connections with NHS bodies like Leeds Hospital Trust to understand how we might work together and share learnings.

Get involved

If you’re involved in designing, building and maintaining digital services for the NHS, we’d love to hear from you.

Help us shape digital standards for the NHS. Email us at service-manual@nhs.net.